{"id":1887,"date":"2021-08-30T10:37:28","date_gmt":"2021-08-30T10:37:28","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/move-product-price-block-after-add-to-cart-button-in-magento-2-product-page\/"},"modified":"2025-05-22T10:03:41","modified_gmt":"2025-05-22T04:33:41","slug":"move-product-price-block-after-add-to-cart-button-in-magento-2-product-page","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/move-product-price-block-after-add-to-cart-button-in-magento-2-product-page\/","title":{"rendered":"How to Move Product Price Block After Add to Cart Button in Magento 2 Product Page"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The default Magento 2 CMS offers features that prompt customers to make the purchase.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, sometimes as per the business requirements, the developer may need to customize the layout of the Magento 2 storefront.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example,&nbsp;<em><strong>move product price block after add to cart button in Magento 2 product page<\/strong><\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default Magento 2 displays the price as shown below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/08\/display-price-in-default-Magento-2.png\" alt=\"display price in default Magento 2\" class=\"wp-image-16139\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, with the below method, you can customize the price position below the \u201cAdd to Cart\u201d button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Move Product Price Block After Add to Cart Button in Magento 2 Product Page:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For simple products:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to app\/design\/frontend\/Vendor\/theme\/Magento_Catalog\/layout\/catalog_product_view.xml<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;move element=\"product.info.price\" destination=\"product.info.addtocart\"\/><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">For configurable products:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to app\/design\/frontend\/Vendor\/theme\/Magento_Catalog\/layout\/catalog_product_view_type_configurable.xml<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;move element=\"product.info.price\" destination=\"product.info.addtocart.additional\" \/><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, the product price is displayed as shown below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/08\/display-price-in-custom-Magento-2-1024x519.png\" alt=\"display price in custom Magento 2\" class=\"wp-image-16140\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Another amazing thing you can do while customizing the product page is to use&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/how-to-use-a-custom-price-template-in-magento-2\/\">custom price template in Magento 2<\/a>&nbsp;to change the way prices are displayed to the customers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, do share the solution with the Magento community via social media.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1887","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1887"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1887\/revisions"}],"predecessor-version":[{"id":14241,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1887\/revisions\/14241"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}