{"id":3702,"date":"2024-10-23T13:37:36","date_gmt":"2024-10-23T13:37:36","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-add-sticky-add-to-cart-to-magento-2\/"},"modified":"2025-03-17T04:37:30","modified_gmt":"2025-03-17T04:37:30","slug":"how-to-add-sticky-add-to-cart-to-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-sticky-add-to-cart-to-magento-2\/","title":{"rendered":"How to Add Sticky Add to Cart to Magento 2? (Manually)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Turn your customer interest into a purchase action with an add-to-cart button sticky.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog post, I will cover the basics and show how to add a sticky add-to-cart to Magento 2 using a code that will help you display the sticky button to boost your conversion rate.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is the Sticky Add to Cart button in Magento 2?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A sticky add to cart button stays on your product page when your customer scrolls down to explore product details and other recommendations.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example of it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/10\/sticky-add-to-cart-button-in-magento.png\" alt=\"Sticky Add to Cart Button in Magento 2\" class=\"wp-image-90537\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The main benefit of the Magento 2 sticky add-to-cart is that it reduces friction while a customer tries to buy the product, but here you all get other benefits like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Improves accessibility for mobile shoppers&nbsp;<\/li>\n\n\n\n<li>Acts as a consistent nudge for the customers&nbsp;<\/li>\n\n\n\n<li>Offers uninterrupted navigation without breaking the browsing flow<\/li>\n\n\n\n<li>Prompts customers to take quick action<\/li>\n\n\n\n<li>Always keep the purchase intent in mind<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Sticky Add to Cart to Magento 2?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You have two options here:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using a code:<\/strong> You can add this feature using a simple code. This method gives you more control over the process without any charges. This is one of the preferred methods as it doesn&#8217;t require any complex coding skills.<\/li>\n\n\n\n<li><strong>Using an extension: <\/strong>You can get a Magento 2 sticky add to cart button extension for this; you will have to incur the extension charges. Also, if the extension isn&#8217;t compatible with your store, it might cause performance issues.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Below, you will find a step-by-step way on how to add sticky add to cart in Magento 2 using code. You can use and access the code mentioned here \u2014 no need to create it by yourself.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Easily Add Sticky Add to Cart to Magento 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure you follow each step.&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Firstly, you will have to <strong>update the product layout<\/strong> to add the sticky add to cart button.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to your theme\u2019s directory:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">app\/design\/frontend\/Vendor\/theme-name\/Magento_Catalog\/layout<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And then, create or edit:&nbsp;<\/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=\"\">catalog_product_view.xml\n\n&lt;?xml version=\"1.0\"?>\n&lt;page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n    xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    &lt;body>\n        &lt;referenceContainer name=\"content\">\n            &lt;block class=\"Magento\\Framework\\View\\Element\\Template\" \n                   name=\"sticky.addtocart\" \n                   template=\"Magento_Catalog::product\/sticky-addtocart.phtml\" \/>\n        &lt;\/referenceContainer>\n    &lt;\/body>\n&lt;\/page><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now, <strong>create an HTML template file<\/strong> for your sticky Add to Cart button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this, navigate to:<\/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=\"\">app\/design\/frontend\/Vendor\/theme-name\/Magento_Catalog\/templates\/product\/\n\nCreate a new file called sticky-addtocart.phtml\n\n&lt;div class=\"sticky-add-to-cart\">\n    &lt;form action=\"&lt;?php echo $block->escapeUrl($block->getAddToCartUrl($_product)); ?>\" \n          method=\"post\" enctype=\"multipart\/form-data\">\n        &lt;input type=\"hidden\" name=\"product\" value=\"&lt;?php echo $_product->getId(); ?>\" \/>\n        &lt;button type=\"submit\" class=\"action primary tocart\">\n            &lt;?php echo __('Add to Cart'); ?>\n        &lt;\/button>\n    &lt;\/form>\n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now, to make the <strong>sticky visible to your customers <\/strong>when they scroll, you will need to add a CSS.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Head to app\/design\/frontend\/Vendor\/theme-name\/web\/css\/source\/<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, create or edit _extend.less and add the following styles:<\/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=\"\">.sticky-add-to-cart {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: #fff;\n    padding: 10px;\n    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n    z-index: 1000;\n    text-align: center;\n}\n\n.sticky-add-to-cart button {\n    background-color: #ff6600;\n    color: #fff;\n    padding: 10px 20px;\n    border: none;\n    cursor: pointer;\n    font-size: 16px;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Lastly, run the following commands to <strong>deploy static content and clear the cache:&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>php bin\/magento setup:static-content:deploy<\/li>\n\n\n\n<li>php bin\/magento cache:clean<\/li>\n\n\n\n<li>php bin\/magento cache:flush<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Now, test if the sticky button works correctly with different product types and if any customization needs to be done.&nbsp;It is always a good idea to align your sticky button with your branding.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Win More Sales With Your Sticky Add to Cart<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Following the above steps, you can easily add sticky add to cart on Magento 2 and encourage customers to take action while they continue to browse on your site&nbsp; \u2014 an easy technique to not break their flow and still get sales.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are some resources for you to improve your sales in Magento 2:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/meetanshi.com\/blog\/add-a-free-shipping-bar-to-magento-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add a Free Shipping Bar to Magento 2<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/meetanshi.com\/blog\/magento-extensions-to-boost-sales-in-holiday-season\/\" target=\"_blank\" rel=\"noreferrer noopener\">Top 5 Magento Extensions to Boost Sales in Holiday Season&nbsp;<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Turn your customer interest into a purchase action with an add-to-cart button sticky.&nbsp; In this blog post, I will cover the basics and show how&#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-3702","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3702","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=3702"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3702\/revisions"}],"predecessor-version":[{"id":9258,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3702\/revisions\/9258"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=3702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=3702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=3702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}