Skip to content

Magento 2 How to move custom product options under the custom container on Product page

I am customizing the Magento2 Blank theme, by using a custom child theme. I want the custom options,product prices add to cart section to appear in my custom container.
I have created the file:

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml  

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <!-- Define the container -->
        <container name="product.view.column3" htmlTag="div" htmlClass="product-view-column3"/>

        <!-- Move product options wrapper into the custom container -->
        <move element="product.info.options.wrapper" destination="product.view.column3" before="-"/>
        <!-- Move product prices into the custom container -->
        <move element="product.info.price" destination="product.view.column3" after="product.info.options.wrapper"/>
        <!-- Move product options bottom into the custom container -->
        <move element="product.info.options.bottom" destination="product.view.column3" after="product.info.price"/>
        <!-- Move add to cart block into the custom container -->
        <move element="product.info.addtocart" destination="product.view.column3" after="product.info.options.bottom"/>
    </body>
</page>

Blocks are moved as per my requirements in the code above but, product options validations and add-to-cart functionalities don’t work..