How to move the add to cart section under the short description on product view page

magento.stackexchange https://magento.stackexchange.com/questions/327222

Question

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?

Était-ce utile?

La solution

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>

Autres conseils

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

Try this.

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

'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"/>
Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange
scroll top