Moving Product Tabs

Question

How do I move the tabs (product collateral) from the bottom of the page to just under the add-to-cart-wrapper? I've tried playing around with view.phtml, but can only get the tabs to appear above the Add To Cart block or at the bottom of the page.

Answer 1

I am not sure what is you are really trying to achieve. If I understood your problem correctly, then you can do this job by a single cut-paste of code snippet in view.phtml.

You need to "cut" the below code from view.phtml (Appears very below of the template file)

<div class="product-collateral toggle-content tabs">
    <?php if ($detailedInfoGroup = $this->getChildGroup('detailed_info', 'getChildHtml')):?>
        <dl id="collateral-tabs" class="collateral-tabs">
            <?php foreach ($detailedInfoGroup as $alias => $html):?>
                <dt class="tab"><span><?php echo $this->escapeHtml($this->getChildData($alias, 'title')) ?></span></dt>
                <dd class="tab-container">
                    <div class="tab-content"><?php echo $html ?></div>
                </dd>
            <?php endforeach;?>
        </dl>
    <?php endif; ?>
</div>

to inside the add-to-card-wrapper div.

  <div class="add-to-cart-wrapper">
       ....
       <!-- Paste your code here. Just below child elements -->
  </div>

This will give you an output like this.

You can find the modified view.phtml file here. Have a look on there and understand the changes.