Page 1 of 1

Modify Product Page Layout

Posted: Sun Feb 05, 2012 7:35 am
by dsk2006
Hello, i have a question about the layout of product page in default template. how i can get the price inside a tab and all other fields in a tab on the right side of the image ?

Here an example: http://themes.webiz.mu/opencart/apparel ... duct_id=69

My OpenCart Version is: 1.5.1.3

Thanks for any help,

Sebastian Korbel

Re: Modify Product Page Layout

Posted: Sun Feb 05, 2012 6:24 pm
by yellow_cake
This will require some work in the product.tpl and stylesheet.css file.

For example: If I wanted to move the "Add to Cart" button, I would move this code in product.tpl

Code: Select all

      <div class="cart">
        <div><?php echo $text_qty; ?>
          <input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
          <input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
          &nbsp;<a id="button-cart" class="button"><span><?php echo $button_cart; ?></span></a></div>
        <div><span>&nbsp;&nbsp;&nbsp;<?php echo $text_or; ?>&nbsp;&nbsp;&nbsp;</span></div>
        <div><a onclick="addToWishList('<?php echo $product_id; ?>');"><?php echo $button_wishlist; ?></a><br />
          <a onclick="addToCompare('<?php echo $product_id; ?>');"><?php echo $button_compare; ?></a></div>
        <?php if ($minimum > 1) { ?>
        <div class="minimum"><?php echo $text_minimum; ?></div>
        <?php } ?>
      </div>
right after <?php echo $description; ?> and before </div>
in the following code:

Code: Select all

  <div id="tab-description" class="tab-content"><?php echo $description; ?></div>
By doing this, you are moving it to the Description Div. After You have moved it, you will need to edit the layout to how you would like in the stylesheet.css.

Note: Pay attention when moving some of the code around. For example, if you're moving the "product-info" Div, be sure to also keep the "php if" code along with it.
See Example:

Code: Select all

<?php if ($options) { ?>                <---- Don't forget to keep this line before the Div
<div class="options">
......
.......
......
</div>
<?php } ?>                               <---- And this one after the Div
I know this isn't a direct fix answer to your question but hopefully it will get you on the right track.

Re: Modify Product Page Layout

Posted: Sun Feb 05, 2012 7:49 pm
by dsk2006
Thank's a lot i will try it out today and i let u know :-)

Thanks for the great reply,

Sebastian

Re: Modify Product Page Layout

Posted: Wed Feb 29, 2012 7:18 am
by Bg-foxx
dsk2006 wrote:Hello, i have a question about the layout of product page in default template. how i can get the price inside a tab and all other fields in a tab on the right side of the image ?

Here an example: http://themes.webiz.mu/opencart/apparel ... duct_id=69

My OpenCart Version is: 1.5.1.3

Thanks for any help,

Sebastian Korbel
Hi Sebastian. Did you manage to change the product.tpl layout to the one on the link in your initial post? I am trying to achieve the same result but I don't trust my programming skills to get to the same result :-[

Any info is appreciated.

Ivan

Re: Modify Product Page Layout

Posted: Tue Jul 22, 2014 9:36 am
by spartanproducts
Hi, I just stumbled upon this and was wondering if you could help me out. I'm trying to achieve the same thing, only, where is says description and review, is there a way to create more tabs along that line? and if so, is there a way to fit a custom t-shirt designer within one of those?