Product description right below product image

[petrklika]

Hello,

I would like to have my product description right below the product image.

I tried change CSS but It seems like it can not be done only using CSS.. Do you have any idea how to solve it/code it?

Thank you so much...

 

 

[rocky]

You can move the code after line 153 of product.tpl:

		<!-- center infos -->

until the following line at about line 243:

		<!-- end center infos-->

Move it after the following at about line 400:

		</div> <!-- end pb-right-column-->

Then you can add clear: left; to the .pb-center-column section at about line 312 of themes/default-bootstrap/css/product.css to display it below the image.

[petrklika]

You can move the code after line 153 of product.tpl:

		<!-- center infos -->

until the following line at about line 243:

		<!-- end center infos-->

Move it after the following at about line 400:

		</div> <!-- end pb-right-column-->

Then you can add clear: left; to the .pb-center-column section at about line 312 of themes/default-bootstrap/css/product.css to display it below the image.

 

Hello,

 

I totally followed your instructions but It doesnt work properly for me... Are you sure that it works?

 

Thank you!

[rocky]

Yes, I tested it on my PrestaShop v1.6.1.10 test site and here's what I see:

 

 

Go to the Advanced Parameters > Performance tab and make sure "Never compile templates" isn't selected, otherwise the modified product.tpl won't be recompiled. Also, click the "Clear cache" button to make sure the old page isn't cached.

[petrklika]

Yes, I tested it on my PrestaShop v1.6.1.10 test site and here's what I see:

 

screenshot.png

 

Go to the Advanced Parameters > Performance tab and make sure "Never compile templates" isn't selected, otherwise the modified product.tpl won't be recompiled. Also, click the "Clear cache" button to make sure the old page isn't cached.

Yeah, but the problem is that I need to have my LONG description under the procuct picture as my images from the post says... :/

[rocky]

Oh, sorry. I misunderstood your question.

 

I see now the problem is that the right column is too long and the long description is clearing it so there's a big gap.

 

That's harder to fix, but still possible. Change everything back the way it was originally. You'll need to find the following at about line 401 of product.tpl:

	</div> <!-- end primary_block -->

Then move it above line 678:

</div> <!-- itemscope product wrapper -->

This will put the long description inside the same block as three columns.

 

You'll then need to find all the instances of: 

class="page-product-box"

and change them to:

class="page-product-box col-xs-12 col-sm-8 col-md-9"

This will reduce the width so they don't overlap the right column.

 

You'll then need to force the right column to float right instead of left by adding the following to product.css:

.pb-right-column { float: right; }

[petrklika]

Oh, sorry. I misunderstood your question.

 

I see now the problem is that the right column is too long and the long description is clearing it so there's a big gap.

 

Exactly!!!!

[petrklika]

 

Oh, sorry. I misunderstood your question.

 

I see now the problem is that the right column is too long and the long description is clearing it so there's a big gap.

 

That's harder to fix, but still possible. Change everything back the way it was originally. You'll need to find the following at about line 401 of product.tpl:

	</div> <!-- end primary_block -->

Then move it above line 678:

</div> <!-- itemscope product wrapper -->

This will put the long description inside the same block as three columns.

 

You'll then need to find all the instances of: 

class="page-product-box"

and change them to:

class="page-product-box col-xs-12 col-sm-8 col-md-9"

This will reduce the width so they don't overlap the right column.

 

You'll then need to force the right column to float right instead of left by adding the following to product.css:

.pb-right-column { float: right; }

This worked perfectly, thank you for your job!