How to Move Product Price Block After Add to Cart Button in Magento 2 Product Page
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
1 | <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
1 | <move element="product.info.price" destination="product.info.addtocart.additional" /> |
That’s it.
Now, the product price is displayed as shown below:
Any doubts? If so, feel free to mention them in the Comments section below.
I’d be happy to help you asap.
Also, do share the solution with the Magento community via social media.
Thank you.
