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:

display price in default Magento 2

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

For configurable products:

Go to app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view_type_configurable.xml

That’s it.

Now, the product price is displayed as shown below:

display price in custom Magento 2

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.

5
(based on 2 Reviews)
How to Move Product Price Block After Add to Cart Button in Magento 2 Product Page

Dipak Vadher

Dipak is a Magento Developer at Meetanshi. Apart from work, he loves playing cricket with his friends. Traveling and exploring new places is something that he is passionate about.

Leave a Reply

Your email address will not be published. Required fields are marked *