The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 05-12-2015, 06:59 PM
DSTC's Avatar
DSTC is offline
 
Join Date: Nov 2014
Posts: 22
Default

Move the product description form below the picture to above it


Hello,

From the product details page, I am trying to find a way to move the product description from below the picture to above it. I have found several threads in the forums related to this but they all discuss how to move the description to the right, beside the picture, instead of directly above it. I have been able to move the description to the side with this code:

PHP Code:
div.ecwid-productBrowser-details-leftPanel>div {
    
floatleft;
}

div.ecwid-productBrowser-details-thumbnail {
    
width225px;
    
margin-right5px;
}

div.ecwid-productBrowser-details-leftPanel div.ecwid-productBrowser-details-descrdiv.ecwid-productBrowser-details-leftPanel div.ecwid-productBrowser-details-descr div{
    
floatnone;
    
overflowhidden

I was going to use this code as a workaround, but after applying the code it takes away the "responsiveness" of the product image (it no longer grows/shrinks with the size of the screen).

However, I would really like to find a way to bring the product description directly above the product image and leave the picture/sidebar the way it is.

Any help or advice regarding this issue would be much appreciated.

Thank you!
DSTC
  #2  
Old 05-14-2015, 08:48 AM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by DSTC View Post
Hello,

From the product details page, I am trying to find a way to move the product description from below the picture to above it. I have found several threads in the forums related to this but they all discuss how to move the description to the right, beside the picture, instead of directly above it. I have been able to move the description to the side with this code:

PHP Code:
div.ecwid-productBrowser-details-leftPanel>div {
    
floatleft;
}

div.ecwid-productBrowser-details-thumbnail {
    
width225px;
    
margin-right5px;
}

div.ecwid-productBrowser-details-leftPanel div.ecwid-productBrowser-details-descrdiv.ecwid-productBrowser-details-leftPanel div.ecwid-productBrowser-details-descr div{
    
floatnone;
    
overflowhidden

I was going to use this code as a workaround, but after applying the code it takes away the "responsiveness" of the product image (it no longer grows/shrinks with the size of the screen).

However, I would really like to find a way to bring the product description directly above the product image and leave the picture/sidebar the way it is.

Any help or advice regarding this issue would be much appreciated.

Thank you!
DSTC
Hi,

Thank you for contacting us.

In order to move the product description from below the product image to above it on the product details page, you can use the following instructions:

Include the jQuery library into your page <head> tags or to the <body>:
Code:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
After that, add the following code into your website page, right after Ecwid integration code:
Code:
<script>
Ecwid.OnPageLoaded.add(function(page){
	if (page.type == "PRODUCT") {
		$('.ecwid-productBrowser-details-descr').insertBefore('.ecwid-productBrowser-details-thumbnail');
	}
});
</script>
As a result, the product description will appear on top of the product image: http://take.ms/8kJ9A

Please mind that this code is provided as an example and I am not able to guarantee that it will work in the future, so please feel free to make the corresponding adjustments if required.

I am using the Javascript code, because this will be the most universal way to perform this task. In case if you use Custom CSS themes to change the position of the elements on the page, it may work for products with the similar set of variation product image/description in terms of size, however it may not work properly for other products, so the Javascript code allows me to physically place the description of the product right before the product thumbnail image, thus it should work for all products correctly.

Please let me know if you have any questions.
Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
The Following User Says Thank You to Rick G For This Useful Post:
DSTC (05-14-2015)
  #3  
Old 05-14-2015, 05:58 PM
DSTC's Avatar
DSTC DSTC is offline
 
Join Date: Nov 2014
Posts: 22
Default

Thank you for the reply!

I am pretty unfamiliar with the use of Javascript code and JQuery. As such, I have no idea where to start or where to place this code. Am I putting these codes into the CSS theme from my Ecwid System Settings or am I placing them on my Wordpress page that I have installed the store to? Or are they going somewhere completely different (such as CSS in the Wordpress theme). I have tried a few variations but all without success.

I apologize for being so clueless in this situation. I might be a little over my head on this one, but figured I would inquire anyways.

Quote:
Please mind that this code is provided as an example and I am not able to guarantee that it will work in the future, so please feel free to make the corresponding adjustments if required.
And when you say this do you mean if JQuery updates I will have to go in and find the corresponding code I used to install JQuery (that you mentioned above) and manually change it? That makes me a little unsure if I should make the changes or not, seeing as I am not comfortable with the concepts of Javascript or JQuery. If it is fairly basic however, I should be able to make do.

Thank you again for any info or advice,
DSTC

Last edited by DSTC; 05-14-2015 at 09:00 PM. Reason: Grammer & added 1 line of text
  #4  
Old 05-15-2015, 10:43 AM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by DSTC View Post
Thank you for the reply!

I am pretty unfamiliar with the use of Javascript code and JQuery. As such, I have no idea where to start or where to place this code. Am I putting these codes into the CSS theme from my Ecwid System Settings or am I placing them on my Wordpress page that I have installed the store to? Or are they going somewhere completely different (such as CSS in the Wordpress theme). I have tried a few variations but all without success.

I apologize for being so clueless in this situation. I might be a little over my head on this one, but figured I would inquire anyways.



And when you say this do you mean if JQuery updates I will have to go in and find the corresponding code I used to install JQuery (that you mentioned above) and manually change it? That makes me a little unsure if I should make the changes or not, seeing as I am not comfortable with the concepts of Javascript or JQuery. If it is fairly basic however, I should be able to make do.

Thank you again for any info or advice,
DSTC
Hi,

Thank you for the update.

The code that I provided needs to be added right after Ecwid integration code. So for example if you have your store located here: http://distantshorestrading.ca/products/ then you will need to go to Wordpress admin backend > Pages > Edit 'Products' page > add the code after Ecwid integration code.

I see that the products page is password protected, so if you added the code I provided and it doesn't apply - please let me know the password to your page so I can check it. (you can send it as a Direct message here).

If you are using Wordpress website, then I'd strongly recommend that you use Ecwid plugin for it, because it simplifies the way you change the way your Ecwid store looks in terms of view mode, product quantity per page, etc.

Also, in my disclaimer earlier, I meant that in the code itself I am using the classes names, for example: '.ecwid-productBrowser-details-descr'. This name is created by Ecwid when the page is generated. When new changes are implemented in all Ecwid stores, we do our best to keep the current structure of the names and styles the same as before the update, so please don't worry - once you apply the code, it will be working correctly for you.
Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
The Following User Says Thank You to Rick G For This Useful Post:
DSTC (05-19-2015)
  #5  
Old 05-19-2015, 08:45 PM
DSTC's Avatar
DSTC DSTC is offline
 
Join Date: Nov 2014
Posts: 22
Default

Hello,

Thank you for the info! I am pretty sure I know where to put that code now, however, I am still not sure how to include the jQuery library to my site. I tried a few variations but still couldn't achieve any results.

I tried to send you our password to the store, but there is no link in the post above to send you a direct message. I then tried to manually send you one but I received an error stating:
Quote:
... has chosen not to receive private messages or may not be allowed to receive private messages. Therefore you may not send your message to him/her.
I am using a Wordpress site with the Ecwid plugin.

Thank you again for all the help!

PS. I apologize for the delay in replying, Monday was a holiday for us and I have just been busy at work, small company.

Last edited by DSTC; 05-19-2015 at 08:48 PM.
  #6  
Old 05-19-2015, 08:51 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Hi!

Quote:
Thank you for the info! I am pretty sure I know where to put that code now, however, I am still not sure how to include the jQuery library to my site.
If your Wordpress template doesn't have it by default, you can just include in the rest of the code that you added, so the final code will be:
Code:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<script>
Ecwid.OnPageLoaded.add(function(page){
	if (page.type == "PRODUCT") {
		$('.ecwid-productBrowser-details-descr').insertBefore('.ecwid-productBrowser-details-thumbnail');
	}
});
</script>
Quote:
I tried to send you our password to the store, but there is no link in the post above to send you a direct message. I then tried to manually send you one but I received an error stating:
Oh, I'm so sorry! I completely forgot that I disabled it. I have enabled it, so if you need to provide some sensitive information, please let me know in a direct message.

Thank you!
__________________
Ecwid API and App Market Team
Ecwid Developer Website
The Following User Says Thank You to Rick G For This Useful Post:
DSTC (05-20-2015)
  #7  
Old 05-21-2015, 01:27 PM
DSTC's Avatar
DSTC DSTC is offline
 
Join Date: Nov 2014
Posts: 22
Default

I have updated the code to what you replied with in the last post but I still can't get it to work. I just can't figure out what I am doing wrong here! I am not sure if this is relevant or not, but when the page is loading the description flashes up top for half a second then appears down at the bottom once it is loaded.

I sent you a direct message with our password to the protected store. Thank you again for all the time and assistance you have provided me!

DSTC
  #8  
Old 05-22-2015, 10:52 AM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by DSTC View Post
I have updated the code to what you replied with in the last post but I still can't get it to work. I just can't figure out what I am doing wrong here! I am not sure if this is relevant or not, but when the page is loading the description flashes up top for half a second then appears down at the bottom once it is loaded.

I sent you a direct message with our password to the protected store. Thank you again for all the time and assistance you have provided me!

DSTC
Hi,

I checked your website and unfortunately I can't see the code that you added right after Ecwid integration code. Also I found out that you are using Wordpress.com platform for your website and it doesn't allow any custom Javascript code to be added into the website pages, so I think that's the reason the code isn't applied.

So I see you were going to use this code as a workaround:
Code:
div.ecwid-productBrowser-details-leftPanel>div { 
    float: left; 
} 

div.ecwid-productBrowser-details-thumbnail { 
    width: 225px; 
    margin-right: 5px; 
} 

div.ecwid-productBrowser-details-leftPanel div.ecwid-productBrowser-details-descr, div.ecwid-productBrowser-details-leftPanel div.ecwid-productBrowser-details-descr div{ 
    float: none; 
    overflow: hidden;  
}
And I noticed that the width of the thumbnail is strictly specified: width: 225px;

So to make it look better for other devices, for example a phone or a tablet, I can suggest that you change that part to
Code:
width: auto;
Please let me know how it goes,
Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
The Following User Says Thank You to Rick G For This Useful Post:
DSTC (05-22-2015)
  #9  
Old 05-22-2015, 06:10 PM
DSTC's Avatar
DSTC DSTC is offline
 
Join Date: Nov 2014
Posts: 22
Default

Ahh, that makes a lot of sense as to why I wasn't understanding your initial instructions. Sorry for not mentioning earlier that I am using a Wordpress.com platform for my website. I did not think to mention it.

So updating the code and changing width to auto made the pictures all turn out extremely small. I thought that maybe increasing the margin-right pixels would solve the problem, but it does not. The text then appears off to the right but the image is still tiny and keeps to the left.
  #10  
Old 05-25-2015, 10:02 AM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by DSTC View Post
Ahh, that makes a lot of sense as to why I wasn't understanding your initial instructions. Sorry for not mentioning earlier that I am using a Wordpress.com platform for my website. I did not think to mention it.

So updating the code and changing width to auto made the pictures all turn out extremely small. I thought that maybe increasing the margin-right pixels would solve the problem, but it does not. The text then appears off to the right but the image is still tiny and keeps to the left.
Hi,

In this case you can apply this CSS code for only wide screens, i.e. more than 750px
Code:
@media screen and (min-width: 750px) {
    div.ecwid-productBrowser-details-leftPanel>div { 
    float: left; 
} 

    div.ecwid-productBrowser-details-thumbnail { 
        width: 225px; 
        margin-right: 5px; 
	}

    div.ecwid-productBrowser-details-leftPanel div.ecwid-productBrowser-details-descr, 
    div.ecwid-productBrowser-details-leftPanel div.ecwid-productBrowser-details-descr div{ 
    float: none; 
    overflow: hidden;  
	}  
}
So on devices which have less width the images will behave by default.
Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
css, location, product description

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:00 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.