I would like my Magento 2.2.6 store to have two grouped product pages. For some grouped products I would like to use the existing default grouped product layout that ships with Magento 2. For other grouped products I would like to use my own custom grouped product layout. For this question, lets say that I would like my custom grouped product layout to simply move the list of grouped products from the default position (at the right side of the gallery) as shown here:

Grouped products displayed to the right of the gallery

to display them below the gallery as shown here:

Grouped products displayed below the gallery

To attempt to do this I have created the following layout app/code/[COMPANY]/[MODULE]/view/frontend/layout/catalog_product_view_type_grouped.xml to extend the existing vendor/magento/module-grouped-product/view/frontend/layout/catalog_product_view_type_grouped.xml:

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

With this file alone, the list of grouped products (the product.info block) is correctly moved to below the gallery. However, it is moved for all grouped products, not just my specific grouped products.

I believe (I acknowledge that I could be wrong) that what I need to do is specify a custom page layout for the grouped product under the product design section:

Selecting the page layout in the product admin

To do this I created the following layouts.xml file:


<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="custom_grouped_product">
        <label translate="true">Custom Grouped Product</label>

And added the corresponding app/code/[COMPANY]/[MODULE]/view/frontend/page_layout/custom_grouped_product.xml page layout file:

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">

I have selected the page layout against the product in the product admin page but this is about as far as I have got.

How do I connect the catalog_product_view_type_grouped.xml layout file to the extended custom_grouped_product.xml page layout file so that the page layout file is only displayed when the custom_grouped_product.xml is selected in the product admin?

And as an aside (and I appreciate this could be another question entirely), should I be using a module or theme to achieve the above? I have used a module here as I understand that themes are mainly for styling so would greatly appreciate any advice regarding this also.


It seems that I was going about trying to achieve this the wrong way by using layouts rather than themes.

Instead, to resolve this issue I have created a theme that only contains the changes I would like for the product page. I didn't realize before but Magento 2 allows you to specify a theme to use against an individual product:

enter image description here

It also allows you to specify a theme to use against a product category and assign it to use against its products (so you don't have to apply the theme to each individual product):

enter image description here

However, this being said, there are currently several known bugs in Magento 2.2.6 and also in the latest release of 2.3.0 where this is not applying the themes as it should. There is some on-going discussion around this so I am hopeful this will be resolved in the next release of 2.3.1.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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