Question

How do I move the review tab on the product page?

The code to generate the tabs is found in app/design/frontend/example/shop/template/catalog/product/view.phtml

<div id="tabs" 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>

It currently looks like so:

enter image description here

this is what I'd like to achieve:

enter image description here

Was it helpful?

Solution

Try this way:

Go to your theme/layout/review.xml.

Now, find

<catalog_product_view>
        <reference name="product.info">
            <block type="review/product_view_list" name="product.reviews" as="reviews" template="review/product/view/list.phtml" after="additional">
                <action method="addToParentGroup"><group>detailed_info</group></action>
                <action method="setTitle" translate="value"><value>Reviews</value></action>
            </block>
        </reference>
    </catalog_product_view>

and change <action method="addToParentGroup"><group>detailed_info</group></action> to

<action method="addToParentGroup"><group>review_info</group></action>

See we are just replacing detailed_info to review_info.

Then go to your theme/template/catalog/view.phtml and add following code after that description code:

<div class="product-collateral toggle-content tabs">
        <?php if ($review = $this->getChildGroup('review_info', 'getChildHtml')):?>
            <dl id="collateral-tabs" class="collateral-tabs">
                <?php foreach ($review 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>

I haven't tested, but should work.

Good luck.

OTHER TIPS

Try this.

File : app\deisign\frontend\<your_package>\<your_theme>\layout\local.xml

<layout>
    <catalog_product_view>
        <remove name="product.reviews" />
    </catalog_product_view>
</layout>

EDIT - 1

Please note this will remove review tab entirely from the product view page. I misinterpreted your question. I am leaving this answer for downvoting. Coz there is a chance to happen same misinterpretation that I had to some others. I dont want to happen and that's it.Thanks.

EDIT - 2 : To Suit to this particular question

Adharsh answer will work. Here is another approach...

Step - 1

File : app\deisign\frontend\<your_package>\<your_theme>\layout\local.xml

<layout>
    <catalog_product_view>
        <remove name="product.reviews" />
        <reference name="product.info">
            <block type="core/template" name="review_wrapper" as="review_wrapper" template="custom/review/catalog/product/wrapper.phtml">
                <block type="review/product_view_list" name="product.reviews" as="reviews" template="review/product/view/list.phtml"></block>
                <action method="setTitle" translate="value"><value>Reviews</value></action>
            </block>
        </reference>
    </catalog_product_view>
</layout>

Here first we removed entire review block. This will remove review block from the tabs section. Then we added a new core/template block and re-declared the review block inside it. Thus core/template block is just wrapper for review block which is set with a fresh template wrapper.phtml

Step - 2

File : app\design\frontend\<your_package>\<your_theme>\template\catalog\product\view.phtml

 <div class="product-collateral toggle-content tabs">
    ....
 </div>

  <!-- calling wrapper block just after the tabs section -->
 <?php echo $this->getChildHtml('review_wrapper') ?>

Here we just call our new wrapper block inside product view template.

Step - 3

File : app\design\frontend\<your_package>\<your_theme>\template\custom/review/catalog/product/wrapper.phtml

<div class="product-collateral toggle-content tabs">
        <dl id="collateral-tabs" class="collateral-tabs">
                <dt class="tab">
                    <span><?php echo $this->getTitle() ?></span>
                </dt>
                <dd class="tab-container">
                    <div class="tab-content"><?php echo $this->getChildHtml('reviews') ?></div>
                </dd>
            <?php endforeach;?>
        </dl>
    <?php endif; ?>
</div>

and that's it.

There are lot of solutions to do the same. We can do this programmatically too. But I love the layout way.. that is perfect in this case.


Note 1 : dont use very first layout update. it is wrong. Answer lies in the second edit.

Note 2: Didn't test this. Should work

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top