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

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

题

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?

有帮助吗？

解决方案

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>

其他提示

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"/>
许可以下： CC-BY-SA 和 归因
scroll top