The default Magento 2 CMS offers features that prompt customers to make the purchase.
The layout of the online store plays an important role in the conversion rate. The default Magento 2 layout is designed in the same way.
However, sometimes as per the business requirements, the developer may need to customize the layout of the Magento 2 storefront.
For example, move product price block after add to cart button in Magento 2 product page.
The default Magento 2 displays the price as shown below:
Now, with the below method, you can customize the price position below the “Add to Cart” button.
Method to Move Product Price Block After Add to Cart Button in Magento 2 Product Page:
For simple products:
Go to app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml
<move element="product.info.price" destination="product.info.addtocart"/>
For configurable products:
Go to app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view_type_configurable.xml
<move element="product.info.price" destination="product.info.addtocart.additional" />
That’s it.
Now, the product price is displayed as shown below:
Another amazing thing you can do while customizing the product page is to use custom price template in Magento 2 to change the way prices are displayed to the customers.
Also, do share the solution with the Magento community via social media.
Thank you.
