1

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?

Improve this question

4 Answers 4

Reset to default
4

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'.

Improve this answer
2

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>
Improve this answer
2
  • It does work the configurable prices are not updating, how did you overcome that?
    – Goose84
    Sep 21, 2020 at 20:05
  • I did not have to deal with configurables, so I did not pay attention to that. Maybe you would have to adjust the configurable blocks to work with "product.info.main" instead of "product.info"?! Although it was the solution for me, it is probably not the best idea to do it like this.
    – EssGee
    Sep 29, 2020 at 7:46
0

Try this.

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

'Add to cart' button will lose it's functionality: For this you have to try this.

 <move element="product.info.options.wrapper.bottom" destination="product.info.main" after="product.info.addto"/>
Improve this answer
1
  • try this <move element="product.info.options.wrapper.bottom" destination="product.info.main" after="product.info.addto"/>
    – user93082
    Dec 1, 2020 at 9:47

Your Answer

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

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