Jump to content

Make product page one column only


Recommended Posts

Hi I have been working on making my theme as easy as possible to navigate, but there is one small modification that I don't seem to get right. I would like very much to make my product page only one column besides the left column I don't like the price and add to cart button to be on another column just under the name would be fine. 

I will show you in the pictures how it looks and how I would love to modify it after.

 

post-944574-0-13641700-1427864945_thumb.png

post-944574-0-29838000-1427864944_thumb.png

 

I just need a light on where do I have to modify the code or if there is a tutorial some were. Thank you all in advance 

Link to comment
Share on other sites

You need a basic knowledge about HTML.

 

In default product page is divided for 3 div's:

<div class="pb-left-column col-xs-12 col-sm-4 col-md-5">

<div class="pb-center-column col-xs-12 col-sm-4">

and

<div class="pb-right-column col-xs-12 col-sm-4 col-md-3">

 

To make only 2 columns: open product.tpl in default-bootstrap template and about line 241 you should have:

</div>
<!-- end center infos-->
<!-- pb-right-column-->
<div class="pb-right-column col-xs-12 col-sm-4 col-md-3">

Remove this 4 lines.

In next step find:

<div class="pb-center-column col-xs-12 col-sm-4">

and change col-sm-4 to col-sm-7.
That's all. Now you have two columns.

 

If you want to change for example position of price you have to cut and paste code in another place of product.tpl

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...