{"id":8942,"date":"2024-06-06T02:36:52","date_gmt":"2024-06-06T02:36:52","guid":{"rendered":"https:\/\/www.magetop.com\/blog\/?p=8942"},"modified":"2024-06-06T02:46:56","modified_gmt":"2024-06-06T02:46:56","slug":"how-to-get-add-to-cart-button-on-phtml-magento-2","status":"publish","type":"post","link":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/","title":{"rendered":"How to get Add to Cart button on phtml Magento 2"},"content":{"rendered":"\n<p>In Magento 2, the &#8220;Add to Cart&#8221; button plays a crucial role in the e-commerce shopping experience. It allows customers to conveniently add products to their shopping carts. By default, Magento provides this button on product detail pages, but there may be instances where you need to add it to a custom PHTML file. In this blog post, we will explore the steps to add the &#8220;Add to Cart&#8221; button on a PHTML file in Magento 2.<\/p>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Add the &#8220;Add to Cart&#8221; Button on the PHTML File in Magento 2<\/h2>\n\n\n\n<p>Within the PHTML file, find the appropriate location to insert the &#8220;Add to Cart&#8221; button.<\/p>\n\n\n\n<p>To create the &#8220;Add to Cart&#8221; button, use the following code:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; auto-links: false; title: ; notranslate\" title=\"\">\n&lt;?php \n    $objectManager = \\Magento\\Framework\\App\\ObjectManager::getInstance(); \n    $productRepository = $objectManager-&gt;get('\\Magento\\Catalog\\Model\\ProductRepository');\n    $productSku = 'SKU-01';\n    $product = $productRepository-&gt;get($productSku);\n    $productId = $product-&gt;getId();\n    $listBlock = $objectManager-&gt;get('\\Magento\\Catalog\\Block\\Product\\ListProduct');\n    $addToCartUrl =  $listBlock-&gt;getAddToCartUrl($product);\n\n    $postDataHelper = $this-&gt;helper('Magento\\Framework\\Data\\Helper\\PostHelper');\n    $postData = $postDataHelper-&gt;getPostData($block-&gt;getAddToCartUrl($product), &#x5B;'product' =&gt; $productId]);\n?&gt;\n\n&lt;form data-role=&quot;tocart-form&quot; action=&quot;&lt;?php echo $addToCartUrl; ?&gt;&quot; method=&quot;post&quot;&gt; \n    &lt;?php echo $block-&gt;getBlockHtml('formkey')?&gt;\n    &lt;div class=&quot;btn&quot;&gt;\n        &lt;button type=&quot;submit&quot; title=&quot;Add to Cart&quot; class=&quot;action tocart primary&quot;&gt;\n            &lt;span&gt;Add to Cart&lt;\/span&gt;\n        &lt;\/button&gt;\n    &lt;\/div&gt;   \n&lt;\/form&gt;\n<\/pre><\/div>\n\n\n<p>You can replace the value of $productSku with a fixed SKU value, or you can getSku() from the current product or from the product list.<\/p>\n\n\n\n<p>Once completed, to ensure the changes take effect, save the file and clear the Magento cache. You can do this by running the following command in the terminal:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; auto-links: false; title: ; notranslate\" title=\"\">\nphp bin\/magento cache:clean\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Adding the &#8220;Add to Cart&#8221; button to a PHTML file in Magento 2 is a simple yet powerful customization that can greatly enhance the <a href=\"https:\/\/www.magetop.com\/blog\/improve-the-user-experience-when-using-your-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">shopping experience<\/a> on your online store. By following the step-by-step instructions provided in this blog post, you can create unique shopping experiences tailored to your specific business needs. Whether you want to display the button in a prominent position alongside product information, within a custom-designed section, or even on pages beyond the default product detail pages, Magento 2 offers the flexibility to achieve your desired layout.<\/p>\n\n\n\n<p>Remember to thoroughly test the changes you make to ensure that the &#8220;Add to Cart&#8221; button functions correctly and that it harmonizes with the overall design and responsiveness of your website. Pay attention to factors such as compatibility across different devices and browser types to ensure a seamless shopping experience for all customers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog post, we will explore the steps to add the &#8220;Add to Cart&#8221; button on a PHTML file in Magento 2.<\/p>\n","protected":false},"author":108,"featured_media":9065,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[2124,125,107],"class_list":["post-8942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento-2-tutorials","tag-how-to-get-add-to-cart-button-on-phtml-magento-2","tag-magento-2","tag-magento-2-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to get Add to Cart button on phtml Magento 2 - Magetop Blog<\/title>\n<meta name=\"description\" content=\"In this blog post, we will explore the step by step of adding the &quot;Add to Cart&quot; button on a PHTML file in Magento 2.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to get Add to Cart button on phtml Magento 2 - Magetop Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog post, we will explore the step by step of adding the &quot;Add to Cart&quot; button on a PHTML file in Magento 2.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Magetop Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MagetopStore\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-06T02:36:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-06T02:46:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"684\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Callula Huy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MagetopStore\" \/>\n<meta name=\"twitter:site\" content=\"@MagetopStore\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Callula Huy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/\"},\"author\":{\"name\":\"Callula Huy\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/a2bf0aa38cec01bc41197b9ec4b3e8c9\"},\"headline\":\"How to get Add to Cart button on phtml Magento 2\",\"datePublished\":\"2024-06-06T02:36:52+00:00\",\"dateModified\":\"2024-06-06T02:46:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/\"},\"wordCount\":318,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1\",\"keywords\":[\"How to get Add to Cart button on phtml Magento 2\",\"magento 2\",\"magento 2 tutorials\"],\"articleSection\":[\"Magento 2 Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/\",\"url\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/\",\"name\":\"How to get Add to Cart button on phtml Magento 2 - Magetop Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1\",\"datePublished\":\"2024-06-06T02:36:52+00:00\",\"dateModified\":\"2024-06-06T02:46:56+00:00\",\"description\":\"In this blog post, we will explore the step by step of adding the \\\"Add to Cart\\\" button on a PHTML file in Magento 2.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1\",\"width\":684,\"height\":360,\"caption\":\"How to get Add to Cart button on phtml Magento 2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.magetop.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to get Add to Cart button on phtml Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#website\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"name\":\"Magetop Blog\",\"description\":\"Exploring Magento Tips, Tricks, and Trends\",\"publisher\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.magetop.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#organization\",\"name\":\"Magetop.com\",\"url\":\"https:\/\/www.magetop.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1\",\"width\":475,\"height\":475,\"caption\":\"Magetop.com\"},\"image\":{\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/MagetopStore\",\"https:\/\/x.com\/MagetopStore\",\"https:\/\/www.linkedin.com\/company\/magetop\",\"https:\/\/www.pinterest.com\/magetop\",\"https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/a2bf0aa38cec01bc41197b9ec4b3e8c9\",\"name\":\"Callula Huy\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/321e837578b99a75c9d7f5c884e62e11b3b6df2b5934726e98fd365f580393c7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/321e837578b99a75c9d7f5c884e62e11b3b6df2b5934726e98fd365f580393c7?s=96&d=mm&r=g\",\"caption\":\"Callula Huy\"},\"description\":\"Callula is the Marketing Executive at Magetop. With more than 5 years of copywriting under his belt, Callula is into creating valuable content that is straight to the point. Life student. Workaholic. Foreign languages and traveling aficionado.\",\"sameAs\":[\"http:\/\/magetop.com\"],\"url\":\"https:\/\/www.magetop.com\/blog\/author\/callula-huy\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to get Add to Cart button on phtml Magento 2 - Magetop Blog","description":"In this blog post, we will explore the step by step of adding the \"Add to Cart\" button on a PHTML file in Magento 2.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How to get Add to Cart button on phtml Magento 2 - Magetop Blog","og_description":"In this blog post, we will explore the step by step of adding the \"Add to Cart\" button on a PHTML file in Magento 2.","og_url":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/","og_site_name":"Magetop Blog","article_publisher":"https:\/\/www.facebook.com\/MagetopStore","article_published_time":"2024-06-06T02:36:52+00:00","article_modified_time":"2024-06-06T02:46:56+00:00","og_image":[{"width":684,"height":360,"url":"https:\/\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg","type":"image\/jpeg"}],"author":"Callula Huy","twitter_card":"summary_large_image","twitter_creator":"@MagetopStore","twitter_site":"@MagetopStore","twitter_misc":{"Written by":"Callula Huy","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#article","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/"},"author":{"name":"Callula Huy","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/a2bf0aa38cec01bc41197b9ec4b3e8c9"},"headline":"How to get Add to Cart button on phtml Magento 2","datePublished":"2024-06-06T02:36:52+00:00","dateModified":"2024-06-06T02:46:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/"},"wordCount":318,"commentCount":0,"publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1","keywords":["How to get Add to Cart button on phtml Magento 2","magento 2","magento 2 tutorials"],"articleSection":["Magento 2 Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/","url":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/","name":"How to get Add to Cart button on phtml Magento 2 - Magetop Blog","isPartOf":{"@id":"https:\/\/www.magetop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1","datePublished":"2024-06-06T02:36:52+00:00","dateModified":"2024-06-06T02:46:56+00:00","description":"In this blog post, we will explore the step by step of adding the \"Add to Cart\" button on a PHTML file in Magento 2.","breadcrumb":{"@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#primaryimage","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1","width":684,"height":360,"caption":"How to get Add to Cart button on phtml Magento 2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.magetop.com\/blog\/how-to-get-add-to-cart-button-on-phtml-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.magetop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to get Add to Cart button on phtml Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/www.magetop.com\/blog\/#website","url":"https:\/\/www.magetop.com\/blog\/","name":"Magetop Blog","description":"Exploring Magento Tips, Tricks, and Trends","publisher":{"@id":"https:\/\/www.magetop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.magetop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.magetop.com\/blog\/#organization","name":"Magetop.com","url":"https:\/\/www.magetop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/11\/logo.png?fit=475%2C475&ssl=1","width":475,"height":475,"caption":"Magetop.com"},"image":{"@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MagetopStore","https:\/\/x.com\/MagetopStore","https:\/\/www.linkedin.com\/company\/magetop","https:\/\/www.pinterest.com\/magetop","https:\/\/www.youtube.com\/channel\/UCXoiJsz88OfPmwa8QpUkwOA"]},{"@type":"Person","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/a2bf0aa38cec01bc41197b9ec4b3e8c9","name":"Callula Huy","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.magetop.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/321e837578b99a75c9d7f5c884e62e11b3b6df2b5934726e98fd365f580393c7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/321e837578b99a75c9d7f5c884e62e11b3b6df2b5934726e98fd365f580393c7?s=96&d=mm&r=g","caption":"Callula Huy"},"description":"Callula is the Marketing Executive at Magetop. With more than 5 years of copywriting under his belt, Callula is into creating valuable content that is straight to the point. Life student. Workaholic. Foreign languages and traveling aficionado.","sameAs":["http:\/\/magetop.com"],"url":"https:\/\/www.magetop.com\/blog\/author\/callula-huy\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2024\/06\/How-to-get-Add-to-Cart-button-on-phtml-Magento-2.jpg?fit=684%2C360&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/paOdw5-2ke","jetpack-related-posts":[{"id":10118,"url":"https:\/\/www.magetop.com\/blog\/how-to-add-back-to-top-button-in-magento-2\/","url_meta":{"origin":8942,"position":0},"title":"How To Add Back To Top Button In Magento 2","author":"Aaron LX","date":"April 29, 2025","format":false,"excerpt":"A \"Back to Top\" button enhances the user experience by allowing customers to quickly scroll back to the top of the page. In this guide, you'll learn how to add a fully customizable button to your Magento 2 store using only admin panel features\u2014no code deployment or theme file editing\u2026","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Add Back To Top Button In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1200%2C667&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1200%2C667&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1200%2C667&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1200%2C667&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2025\/04\/How-To-Add-Back-To-Top-Button-In-Magento-2.png?fit=1200%2C667&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5722,"url":"https:\/\/www.magetop.com\/blog\/fix-add-to-cart-button-not-working-in-magento-2\/","url_meta":{"origin":8942,"position":1},"title":"How To Fix Add To Cart Button Not Working In Magento 2","author":"Aaron LX","date":"June 18, 2021","format":false,"excerpt":"The add cart button stops working suddenly without knowing the reason. In this post, I will guide you on\u00a0How To Fix Add To Cart Button Not Working In Magento 2.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"How To Fix Add To Cart Button Not Working In Magento 2","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/06\/How-To-Fix-Add-To-Cart-Button-Not-Working-In-Magento-2.png?fit=1200%2C711&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":790,"url":"https:\/\/www.magetop.com\/blog\/top-magento-2-ajax-cart-extensions\/","url_meta":{"origin":8942,"position":2},"title":"Top 10 Magento 2 Ajax Cart Extensions","author":"Adam Roger","date":"December 7, 2019","format":false,"excerpt":"Magento 2 Ajax Cart is an extension allows customers can add products from the shopping page to the cart without reloading the page. With optimized pop-up, information about the product in your cart will be displayed along with related products and you can customize it. This extension will be a\u2026","rel":"","context":"In &quot;Magento News&quot;","block_context":{"text":"Magento News","link":"https:\/\/www.magetop.com\/blog\/magento-news\/"},"img":{"alt_text":"Top 10 Magento 2 Ajax Cart Extensions","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2019\/12\/Top-10-Magento-2-Ajax-Cart-Extensions.png?fit=700%2C450&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2019\/12\/Top-10-Magento-2-Ajax-Cart-Extensions.png?fit=700%2C450&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2019\/12\/Top-10-Magento-2-Ajax-Cart-Extensions.png?fit=700%2C450&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2019\/12\/Top-10-Magento-2-Ajax-Cart-Extensions.png?fit=700%2C450&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1664,"url":"https:\/\/www.magetop.com\/blog\/how-to-get-items-to-storefront-magento\/","url_meta":{"origin":8942,"position":3},"title":"How To Get Items To Storefront In Magento 2","author":"Aaron LX","date":"April 1, 2020","format":false,"excerpt":"In the previous lesson, we learned together How To Use Model In Magento 2. Continuing that lesson, I will introduce How To Get Items To Storefront In Magento 2. You should read the Magento 2 Extension Tutorial step by step to be able to understand this lesson.","rel":"","context":"In &quot;Magento 2 Tutorials&quot;","block_context":{"text":"Magento 2 Tutorials","link":"https:\/\/www.magetop.com\/blog\/magento-2-tutorials\/"},"img":{"alt_text":"Magento 2 How To Get Items To Storefront","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/04\/Magento-2-How-To-Get-Items-To-Storefront.png?fit=813%2C450&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3166,"url":"https:\/\/www.magetop.com\/blog\/top-magento-2-quick-view-extensions\/","url_meta":{"origin":8942,"position":4},"title":"Top 10 Magento 2 Quick View Extensions","author":"Aaron LX","date":"November 11, 2020","format":false,"excerpt":"Magento 2 Quick View Extensions allows viewing product information in pop-up window without leaving the current viewing page. Customers can also add them to the cart right at that pop-up. This helps customers to have more diversified choices, increasing the experience of their store website. In this blog, We will\u2026","rel":"","context":"In &quot;Magento News&quot;","block_context":{"text":"Magento News","link":"https:\/\/www.magetop.com\/blog\/magento-news\/"},"img":{"alt_text":"Top Magento 2 Quick View Extensions","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/11\/Top-10-Magento-2-Quick-View-Extensions.jpg?fit=750%2C445&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/11\/Top-10-Magento-2-Quick-View-Extensions.jpg?fit=750%2C445&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/11\/Top-10-Magento-2-Quick-View-Extensions.jpg?fit=750%2C445&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2020\/11\/Top-10-Magento-2-Quick-View-Extensions.jpg?fit=750%2C445&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5362,"url":"https:\/\/www.magetop.com\/blog\/magetop-ajax-cart-extension-guide\/","url_meta":{"origin":8942,"position":5},"title":"Magetop Ajax Cart Extension Guide","author":"Aaron LX","date":"March 20, 2021","format":false,"excerpt":"Magetop Ajax Cart Extension Guide will give you a solid understanding of how to use Extension. These Magento 2 tutorials cover back-end and front-end development.","rel":"","context":"In &quot;Magento 2 Extension Guides &amp; Tech Tips&quot;","block_context":{"text":"Magento 2 Extension Guides &amp; Tech Tips","link":"https:\/\/www.magetop.com\/blog\/magento-2-extension-guides-tech-tips\/"},"img":{"alt_text":"Magetop Ajax Cart Extension Guide","src":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/03\/Magetop-Ajax-Cart-Extension-Guide.jpg?fit=750%2C444&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/03\/Magetop-Ajax-Cart-Extension-Guide.jpg?fit=750%2C444&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/03\/Magetop-Ajax-Cart-Extension-Guide.jpg?fit=750%2C444&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.magetop.com\/blog\/wp-content\/uploads\/2021\/03\/Magetop-Ajax-Cart-Extension-Guide.jpg?fit=750%2C444&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/8942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/users\/108"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/comments?post=8942"}],"version-history":[{"count":6,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/8942\/revisions"}],"predecessor-version":[{"id":9064,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/posts\/8942\/revisions\/9064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media\/9065"}],"wp:attachment":[{"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/media?parent=8942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/categories?post=8942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.magetop.com\/blog\/wp-json\/wp\/v2\/tags?post=8942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}