0

I am customizing the Magento2 Blank theme, by using a custom child theme. On the product page, I want the custom options and add to cart section to appear below the short description. All products will have custom options.

I have created the file: app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml with the following content:

<?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="product.info" destination="product.info.price" after="product.price.final"/>
    </body>
</page>

But it doesn't work. Where is my fault?

1

For some reason it seems the product.info block can't be moved (also see product.info block does not move in magento 2).

My solution was to create a new container with the same content of the product.info block and then remove the product.info block:

<?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>
        <referenceContainer name="product.info.main">
            <container name="product.options.wrapper.new" htmlTag="div" htmlClass="product-options-wrapper" after="product.info.overview">
                <block class="Magento\Catalog\Block\Product\View" name="product.info.new" template="product/view/form.phtml" after="alert.urls">
                    <container name="product.info.form.content" as="product_info_form_content">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="product/view/addtocart.phtml"/>
                    </container>
                    <block class="Magento\Framework\View\Element\Template" name="product.info.form.options" as="options_container">
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper" as="product_options_wrapper" template="product/view/options/wrapper.phtml">
                            <block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="product/view/options.phtml">
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType" as="default" template="product/view/options/type/default.phtml"/>
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\Text" as="text" template="product/view/options/type/text.phtml"/>
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\File" as="file" template="product/view/options/type/file.phtml"/>
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\Select" as="select" template="product/view/options/type/select.phtml"/>
                                <block class="Magento\Catalog\Block\Product\View\Options\Type\Date" as="date" template="product/view/options/type/date.phtml"/>
                            </block>
                            <block class="Magento\Framework\View\Element\Html\Calendar" name="html_calendar" as="html_calendar" template="Magento_Theme::js/calendar.phtml"/>
                        </block>
                        <block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="product/view/options/wrapper/bottom.phtml">
                            <block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="product/view/addtocart.phtml"/>
                        </block>
                    </block>
                </block>
            </container>
        </referenceContainer>

        <referenceContainer name="product.info" remove="true"/>
    </body>
</page>
0

Try this.

<move element="product.info.addto" destination="product.info.main" after="product.info.overview"/>
0

This worked for me (while keeping all functionality). It moves the description before the Add to cart button instead of the Add to cart button after the description:

<move element="product.info" destination="product.info.main" before="product.info.addtocart"/>

The following also works, but the 'Add to cart' button will lose it's functionality:

<move element="product.info.addtocart" destination="product.info.main" after="-"/>

Hope this will help others who search for this 'problem'.

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.