Magento 2: How to move Product page Review Section from tabs to Bottom of page?

Question

I have referred this link i.e Product page Review Section from tabs to Bottom of page and followed the same. I also got the same result.

vendor\magento\theme-frontend-luma\Magento_Theme\layout\default.xml

I added below code :

   <referenceBlock name="reviews.tab" remove="true" />
    <referenceContainer name="content">
        <container name="new_space" htmlTag="div" htmlClass="container" after="-">
            <block class="Magento\Review\Block\Product\View\ListView" name="product.info.product_additional_data" as="product_additional_data" template="product/view/list.phtml" />
        </container>
    </referenceContainer>

app\design\frontend\Test\review\etc\module.xml

    <?xml version="1.0"?>
          <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
             <module name="Test_review" setup_version="1.0.0">
                 <sequence>
                     <module name="Magento_Catalog"/>
                 </sequence>
            </module>
         </config>

app\design\frontend\Test\review\Magento_Catalog\layout\catalog_product_view.xml

     <?xml version="1.0"?>
        <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
         <body>       
              <move element="reviews.tab" destination="content" after="-"/>
          </body>
       </page>

Home page I am getting error

   PHP Fatal error: Uncaught Error: Call to a member function getId() on null in /chroot/home/londonwa/londonwala.in/html/vendor/magento/module-review/Block/Product/View.php:131

Try <module name="Test_Review" setup_version="1.0.0"> instead of <module name="Test_review" setup_version="1.0.0">. — Pawan, Jul 25, 2017 at 1:30
Also don't need to create module for that, using XML it can be done — Pawan, Jul 25, 2017 at 1:32
I tried without using module.xml file but still it is giving error — jassi, Jul 25, 2017 at 1:36
you can create catalog_product_view.xml under app/design/namespace/theme/Magento_catalog/layout with same content — Pawan, Jul 25, 2017 at 1:39

Pascal Wientjes · Accepted Answer · 2021-08-05 07:23:42Z

Some additions for everyone who is also working with Magento 2.2.x. You can pretty much do exactly the same as in Magento 2.1.x by starting with:

In your custom theme add:

app\design\frontend\CustomVendor\theme-custom\Magento_Catalog\layout\catalog_product_view.xml

In this file we are going to tell Magento to move the reviews block as follows:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="reviews.tab" destination="content" after="product.info.details" />
    </body>
</page>

For Magento 2.2.x this command alone will create a 'bug' where the reviews of the product won't show up, but the form will. To fix this issue we are gonna copy the following file:

vendor\magento\module-review\view\frontend\web\js\process-reviews.js

And place it in your custom theme in the following path:

 app\design\frontend\CustomVendor\theme-custom\Magento_Review\web\js\process-reviews.js

In this file go to line and comment those out 40-43 and 44-49 it should look as follows:

return function (config) {
    // var reviewTab = $(config.reviewsTabSelector),
    //     requiredReviewTabRole = 'tab';

    // if (reviewTab.attr('role') === requiredReviewTabRole && reviewTab.hasClass('active')) {
        processReviews(config.productReviewUrl);
    // } else {
    //     reviewTab.one('beforeOpen', function () {
    //         processReviews(config.productReviewUrl);
    //     });
    // }

    $(function () {
        $('.product-info-main .reviews-actions a').click(function (event) {
            var acnchor;

            event.preventDefault();
            acnchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
            $('.product.data.items [data-role="content"]').each(function (index) { //eslint-disable-line
                if (this.id == 'reviews') { //eslint-disable-line eqeqeq
                    $('.product.data.items').tabs('activate', index);
                    $('html, body').animate({
                        scrollTop: $('#' + acnchor).offset().top - 50
                    }, 300);
                }
            });
        });
    });
};

We are telling Magento not to check if the reviews are in a tab but just render them either way.

Don't forget to recreate the symlinks in pub static by doing the following command in your CLI in the root of your Magento 2 store:

rm -rf pub/static/*

Always be careful with the rm -rf command because if you type the path incorrectly you might remove the entire directory!

That should do the trick!

have you recreated the symlinks in the pub static directory? — Pascal Wientjes, Jun 18, 2018 at 8:04
@PascalWientjes, I want to move the review tab in product page but it's not working as expected. Could you please look into this magento.stackexchange.com/questions/281376/… and help me? — Siva, Jul 10, 2019 at 12:45

Vivek Barot · Accepted Answer · 2019-04-22 08:27:56Z

After moved reviews from tab

Magento_Review/web/js/process-reviews.js

 $(function () {
    $('.product-info-main .reviews-actions a').click(function (event) {
        var anchor;

        event.preventDefault();
        anchor = $(this).attr('href').replace(/^.*?(#|$)/, '');

         $('html, body').animate({
                    scrollTop: $('#' + anchor).offset().top - 50
                }, 300);
        //comment out default code
       /* $('.product.data.items [data-role="content"]').each(function (index) { 
     //eslint-disable-line
            if (this.id == 'reviews') { //eslint-disable-line eqeqeq
                $('.product.data.items').tabs('activate', index);
                $('html, body').animate({
                    scrollTop: $('#' + anchor).offset().top - 50
                }, 300);
            }
        });*/
    });
});

Prince Patel · Accepted Answer · 2018-02-11 15:06:58Z

4

You only need to create catalog_product_view.xml and move reviews.tab block after product.info.details block

If you have a custom theme, create catalog_product_view.xml at

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

If you have a custom module, create catalog_product_view.xml at

app/code/Vendor/Module/view/frontend/layout/catalog_product_view.xml

Now add this code in xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
      <move element="reviews.tab" destination="content" after="product.info.details" />
    </body>
</page>

Now flush cache

edited Feb 11, 2018 at 15:06

answered Jul 25, 2017 at 5:20

Prince Patel

22.5k10 gold badges95 silver badges118 bronze badges

I tried but layout file is not called only. catalog_product_view.xml file is not being called. No effect. Tab remains there. I also want to modify list.phtml file also.
– jassi
Jul 26, 2017 at 1:07
I tried same in my setup it's working fine. Please make sure file path is correct and flush cache.
– Prince Patel
Jul 26, 2017 at 3:17
1

This is not working in 2.2.2
– Wasiq Shahrukh
Jan 12, 2018 at 11:40

Add a comment |

Rajkumar .E · Accepted Answer · 2017-07-26 05:27:58Z

why edit magento core file vendor\magento\theme-frontend-luma\Magento_Theme\layout\default.xml , if you want edit code luma theme, create a new theme(use parenet thme as a luma) and add your content. Also no need to add this content for this process.

Create a Custom theme.

Then Create app\design\frontend\Test\review\Magento_Catalog\layout\catalog_product_view.xml

   <?xml version="1.0"?>
    <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <move element="reviews.tab" destination="content" after="-"/>
        </body>
    </page>

Clear the cache and Test it, its works for me.

EDIT:

Are mentioned for local you used luma theme, if you want to edit core luma theme to move review to bottom of the page.

try below code:

Go to this file <magento2-root>/vendor/magento/theme-frontend-luma/Magento_Catalog/layout/catalog_product_view.xml Add below line to this file.

    <?xml version="1.0"?>       
    <page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <move element="reviews.tab" destination="content" after="-"/>
        </body>
    </page>

Clear the cache and try it.

But, Core File Edit is not a right way, please create a custom theme and apply this change.

for time being in local I have used luma theme. In staging I will do it it newly created theme. — jassi, Jul 25, 2017 at 16:00
catalog_product_view.xml file is not being called. No effect. Tab remains there. I also want to modify list.phtml file also. — jassi, Jul 26, 2017 at 1:09
@jassi i updated my answer.let me know if you have any error. — Rajkumar .E, Jul 26, 2017 at 5:28
When use below code than review form moved but review lists not showing — himansu, Oct 28, 2018 at 18:09

Stack Exchange Network

Magento 2: How to move Product page Review Section from tabs to Bottom of page?

4 Answers 4

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento2
tabs
luma-theme
product-review
or ask your own question.

Linked

Hot Network Questions

Magento 2: How to move Product page Review Section from tabs to Bottom of page?

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

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

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento2
tabs
luma-theme
product-review
or ask your own question.