0

Greetings Stack community - I'd like to move the first custom option group under the main image (see image). Separating the options is probably not that simple, so I think that moving the "Options with add-to-cart button" to its own row before the main description tabs will be the solution (then I could just use CSS to style it after).

Moving a group of custom options under main image

How would I do this in the catalog_product_view.xml file?

<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="sidebar.additional">
        <block class="Smartwave\Porto\Block\Template" name="product_view_custom_block" before="-" template="Magento_Catalog::product/view/custom_block.phtml"/>
    </referenceContainer>
    <move element="product.info.stock.sku" destination="product.info.price" after="product.price.final"/>
    <move element="product.info.review" destination="product.info.main" before="product.info.price"/>
    <move element="catalog.product.related" destination="sidebar.additional" after="product_view_custom_block"/>
    <!--<referenceBlock name="catalog.product.related" remove="true"/>-->
    <move element="product.info.overview" destination="product.info.main" after="product.info.review"/>
    <referenceContainer name="after.body.start">
        <block class="Magento\Catalog\Block\Product\View" name="product_custom" template="Magento_Catalog::product/view/product_custom.phtml" before="-"/>
        <block class="Smartwave\Porto\Block\Template" name="product_view_config" after="-" template="Magento_Catalog::product/view/config.phtml"/>
    </referenceContainer>
    <referenceContainer name="columns.top">
        <block class="Magento\Catalog\Block\Product\View" name="prev_next_products" template="Magento_Catalog::product/view/prev_next.phtml" before="-"/>
    </referenceContainer>
    <move element="prev_next_products" destination="product.info.main" before="-"/>
    <move element="page.main.title" destination="product.info.main" before="-"/>
    <referenceContainer name="product.info.social">
        <block class="Smartwave\Porto\Block\Template" name="product_view_addthis_links" after="-" template="Magento_Catalog::product/view/addthis.phtml"/>
    </referenceContainer>
    <referenceContainer name="content">
        <block class="Smartwave\Porto\Block\RickSnippet" name="rich_snippet" template="Magento_Catalog::product/view/rich_snippet.phtml" before="-"/>
        <block class="Smartwave\Porto\Block\Template" name="product_view_main_custom_block" ifconfig="porto_settings/product/main_custom_block" before="product.info.main" template="Magento_Catalog::product/view/main_custom_block.phtml"/>
        <block class="Smartwave\Porto\Block\Template" name="product_view_main_custom_block2" after="-" template="Magento_Catalog::product/view/main_custom_block2.phtml"/>
        <block class="Smartwave\Porto\Block\Template" name="product.clearer" after="product.info.media" template="Magento_Catalog::product/view/clearer.phtml"/>
    </referenceContainer>
    <move element="product_view_main_custom_block2" destination="product.info.main" after="product.info.overview"/>
    <move element="product.info.main" destination="content" after="product.info.media"/>
    <referenceContainer name="columns">
        <block class="Smartwave\Porto\Block\Template" name="side_popup" after="-" template="Magento_Catalog::product/view/side_popup.phtml"/>
    </referenceContainer>
</body>

Thanks in advance for any help.

0

You can move remove components in this xml file , as per you requirement refer here -https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-instructions.html

0

case 1: custom theme add.

Update the file YOUR-MAGENTO ROOT/app/design/frontend/Vendor/yourtheme/Magento_Catalog/layout/catalog_product_view.xml as below

File : catalog_product_view.xml

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.form.options">
            <move element="product.info.options" destination="product.info.media"  />
        </referenceBlock>
  </body>
</page>

Case 2: Custom Module add.

Update the file YOUR-MAGENTO-ROOT/app/code/Company/MyMyModule/view/frontend/layout/catalog_product_view.xml with below

File : 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>        
<referenceBlock name="product.info.form.options">
            <move element="product.info.options" destination="product.info.media"  />
        </referenceBlock>                        
    </body>
</page>

Please clear Mageto cache to view the updated layout changes in front end

enter image description here

2
  • This doesn't work - creates the following error Element 'move': This element is not expected., and shouldn't there be an after="" or before="" in the move tag? Apr 13 '20 at 15:39
  • Please post your xml code Apr 13 '20 at 17:32

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.