3

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

2 Answers 2

6

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.

4
  • I think you misunderstood the question. Please go through it once more :) Commented Jul 22, 2015 at 10:52
  • 1
    I am sure, I have understood his qst. Commented Jul 22, 2015 at 11:00
  • Yup you are right. I was the one who misinterpreted the question. I didnt see the review tab in bottom side. oops.. lol... :) Commented Jul 22, 2015 at 11:02
  • 1
    No worries Rajeev... Cheers Commented Jul 22, 2015 at 11:03
1

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

4
  • 1
    You should remove or edit your answer rather than waiting for other to down vote. Like your ethics though. Commented Jul 22, 2015 at 11:15
  • you think so.. I will not remove this answer, rather gonna put another solution. :-) Commented Jul 22, 2015 at 11:16
  • If you didn't test it and you are not sure if will work then you shouldn't post this. Not helpful.
    – João M
    Commented Dec 16, 2018 at 22:43
  • @JoãoMachete Be honest,We are not here to provide the community with a bullet proof solution which works in a blink, rather educate the community to solve the issues theme self from the given answer. If you are here to get a well tested "copy pasted - Bingo it works!!" solution, then you misunderstood how the stack exchange works. Commented Dec 18, 2018 at 7:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.