{"id":116796,"date":"2024-09-29T07:34:30","date_gmt":"2024-09-29T07:34:30","guid":{"rendered":"\/tutorials\/?p=116796"},"modified":"2025-04-27T19:20:50","modified_gmt":"2025-04-27T19:20:50","slug":"how-to-add-woocommerce-add-to-cart-button","status":"publish","type":"post","link":"\/in\/tutorials\/how-to-add-woocommerce-add-to-cart-button\/","title":{"rendered":"How to add a WooCommerce add-to-cart button"},"content":{"rendered":"<p>The add-to-cart button is a key element for any online store, including those built on WooCommerce.<\/p><p>Without the add-to-cart button, customers won&rsquo;t be able to check out any items. It&rsquo;s also important to place it strategically to ease the customers&rsquo; buying process and increase sales.<\/p><p>In this guide, we&rsquo;ll explain three methods to add the WooCommerce add-to-cart button: with a <strong>plugin<\/strong>, <strong>shortcode<\/strong>, and <strong>custom code<\/strong>. We&rsquo;ll also share the best practices for placing the add-to-cart button and troubleshooting tips in case you encounter errors.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-three-ways-to-add-the-add-to-cart-button-in-woocommerce\">Three ways to add the add-to-cart button in WooCommerce<\/h2><p>We will show you three ways to add a WooCommerce add-to-cart button. Feel free to follow the method that best suits your needs and technical expertise.<\/p><figure class=\"wp-block-image size-full\"><a href=\"\/in\/woocommerce-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/Woocommerce-hosting-x-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-111779\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/Woocommerce-hosting-x-WP_in-text-banner.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/Woocommerce-hosting-x-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/Woocommerce-hosting-x-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/Woocommerce-hosting-x-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/Woocommerce-hosting-x-WP_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/06\/Woocommerce-hosting-x-WP_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-using-the-woocommerce-custom-add-to-cart-button-plugin\">Using the WooCommerce Custom Add To Cart Button plugin<\/h3><p>Activating a plugin is the easiest way to add and customize a WooCommerce add-to-cart button. It&rsquo;s the best option for beginners because you don&rsquo;t have to know any coding.<\/p><p>We&rsquo;ll show you how to include an add-to-cart button using the <a href=\"https:\/\/wordpress.org\/plugins\/woo-custom-add-to-cart-button\" target=\"_blank\" rel=\"noopener\">WooCommerce Custom Add To Cart Button<\/a> plugin:<\/p><ol class=\"wp-block-list\">\n<li>In your WordPress dashboard, navigate to <strong>Plugins &rarr; Add New<\/strong>.<\/li>\n\n\n\n<li>Search for <strong>WooCommerce Custom Add To Cart Button<\/strong> and click <strong>Install Now<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe3a40\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe3a40\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1999\" height=\"996\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-add-plugins-install-now-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"The Install Now button next to the WooCommerce Custom Add To Cart button plugin in the WordPress dashboard\" class=\"wp-image-116798\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-add-plugins-install-now-highlighted.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-add-plugins-install-now-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-add-plugins-install-now-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-add-plugins-install-now-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-add-plugins-install-now-highlighted.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-add-plugins-install-now-highlighted.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Hit <strong>Activate<\/strong> to enable the plugin on your site.<\/li>\n\n\n\n<li>Once activated, go to <strong>Appearance &rarr; Customize &rarr; WooCommerce &rarr; Add To Cart Buttons<\/strong>. Here, you can configure several settings, such as customizing the button text, adding or hiding the cart icon, and adjusting the button and text color.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe437d\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe437d\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1999\" height=\"955\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-customizing-woocommerce-add-to-cart-buttons-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"The Add To Cart Buttons options in WordPress' Theme Customizer menu\" class=\"wp-image-116800\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-customizing-woocommerce-add-to-cart-buttons-highlighted.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-customizing-woocommerce-add-to-cart-buttons-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-customizing-woocommerce-add-to-cart-buttons-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-customizing-woocommerce-add-to-cart-buttons-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-customizing-woocommerce-add-to-cart-buttons-highlighted.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-customizing-woocommerce-add-to-cart-buttons-highlighted.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Click <strong>Publish <\/strong>to apply the changes. The customizations will apply to all product and shop pages site-wide.<\/li>\n<\/ol><p>Visit your eCommerce store and test the new button to make sure it works as expected.<\/p><p>However, some users might find the customization options on this add-to-cart button plugin limiting. In that case, we recommend trying the other two methods.<\/p><h3 class=\"wp-block-heading\" id=\"h-using-the-woocommerce-shortcode\">Using the WooCommerce shortcode<\/h3><p>Shortcodes are code snippets that lets you insert dynamic content into posts, pages, or widgets. WooCommerce has a built-in shortcode to add an add-to-cart button for any product in your store.<\/p><p>Here&rsquo;s how to use the<a href=\"\/in\/tutorials\/woocommerce-shortcodes\/\"> WooCommerce shortcode<\/a> to add an add-to-cart button:<\/p><ol class=\"wp-block-list\">\n<li>Find the product ID by going to <strong>Products &rarr; All Products<\/strong>. Hover over a product, and you&rsquo;ll see its ID listed below its name.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe4d8d\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe4d8d\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1999\" height=\"951\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-products-id-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"The product ID in WooCommerce's Products page of the WordPress dashboard\" class=\"wp-image-116801\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-products-id-highlighted.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-products-id-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-products-id-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-products-id-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-products-id-highlighted.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-products-id-highlighted.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Use the following shortcode to add an add-to-cart button. Replace <strong>PRODUCT_ID<\/strong> with the actual product ID:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">[add_to_cart id=\"PRODUCT_ID\"]<\/pre><ol start=\"3\" class=\"wp-block-list\">\n<li>Insert the shortcode into any post, page, or widget where you want the add-to-cart button to appear. For the WordPress block editor, go to the page or post, add a <strong>Shortcode<\/strong> block, and paste the shortcode in it.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe5972\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe5972\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1999\" height=\"1302\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-block-editor-shortcode-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"The add-to-cart shortcode in the WordPress block editor\n\" class=\"wp-image-116802\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-block-editor-shortcode-highlighted.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-block-editor-shortcode-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-block-editor-shortcode-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-block-editor-shortcode-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-block-editor-shortcode-highlighted.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-block-editor-shortcode-highlighted.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>If you use the <a href=\"\/in\/tutorials\/wordpress-classic-editor\/\">classic editor<\/a>, paste the shortcode directly into the visual editor.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe61d8\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe61d8\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1694\" height=\"1182\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-classic-editor-shortcode-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"The add-to-cart shortcode in the WordPress classic editor\" class=\"wp-image-116803\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-classic-editor-shortcode-highlighted.png\/w=1694,fit=scale-down 1694w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-classic-editor-shortcode-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-classic-editor-shortcode-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-classic-editor-shortcode-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-classic-editor-shortcode-highlighted.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-classic-editor-shortcode-highlighted.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1694px) 100vw, 1694px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>To add the button as a widget, navigate to <strong>Appearance &rarr; Widgets<\/strong>, choose a <strong>Paragraph<\/strong> widget, and paste the shortcode.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe68a5\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe68a5\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1770\" height=\"814\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-widget-shortcode-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"The add-to-cart shortcode in WordPress' widget area\" class=\"wp-image-116804\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-widget-shortcode-highlighted.png\/w=1770,fit=scale-down 1770w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-widget-shortcode-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-widget-shortcode-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-widget-shortcode-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-widget-shortcode-highlighted.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-widget-shortcode-highlighted.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1770px) 100vw, 1770px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p><strong>Customize the WooCommerce shortcode parameters<\/strong><\/p><p>To customize the button&rsquo;s behavior and appearance, you can add the following parameters to the shortcode:<\/p><ul class=\"wp-block-list\">\n<li><strong>quantity<\/strong>. Sets the number of items customers can add to the cart when they click the button. For example, to add <strong>2<\/strong> items of the product ID <strong>25<\/strong>:<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">[add_to_cart id=\"25\" quantity=\"2\"]<\/pre><ul class=\"wp-block-list\">\n<li><strong>show_price<\/strong>. Chooses whether to display the product price next to the button. Set <strong>show_price<\/strong> to <strong>true<\/strong> to show the price or <strong>false<\/strong> to hide it.<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">[add_to_cart id=\"25\" show_price=\"false\"]<\/pre><ul class=\"wp-block-list\">\n<li><strong>style<\/strong>. Customizes the button&rsquo;s appearance. You can define styles like <strong>border<\/strong>, <strong>background-color<\/strong>, or <strong>font-size<\/strong>.<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">[add_to_cart id=\"25\" style=\"border: 2px solid #ff6600; background-color: #ff6600; color: #fff;\"]<\/pre><ul class=\"wp-block-list\">\n<li><strong>sku<\/strong>. Uses the product&rsquo;s stock-keeping unit (SKU) instead of a specific product ID.<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">[add_to_cart sku=\"SKU123\"]<\/pre><ul class=\"wp-block-list\">\n<li><strong>class<\/strong>. Adds custom CSS classes to the button for advanced styling and functionality. For instance, adding the <strong>custom-add-to-cart-button <\/strong>class lets you style the button further in your theme&rsquo;s CSS file.<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">[add_to_cart id=\"25\" class=\"custom-add-to-cart-button\"]<\/pre><ul class=\"wp-block-list\">\n<li><strong>button_text<\/strong>. Customizes the cart button text.<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">[add_to_cart id=\"25\" button_text=\"Buy Now!\"]<\/pre><ul class=\"wp-block-list\">\n<li><strong>redirect<\/strong>. Redirects users to a different page, such as the cart or checkout page, after adding the product to the cart. Replace <strong>your_store_url<\/strong> with the destination page URL:<\/li>\n<\/ul><pre class=\"wp-block-preformatted\">[add_to_cart id=\"25\" redirect=\"true\" url=\"your_store_url\"]<\/pre><p>Once you&rsquo;ve applied customizations to the shortcode, publish or update the page or post.<\/p><h3 class=\"wp-block-heading\" id=\"h-using-code-in-the-theme-s-file\">Using code in the theme&rsquo;s file<\/h3><p>If you&rsquo;re comfortable with editing code, you can tweak your theme&rsquo;s <a href=\"\/in\/tutorials\/functions-php-wordpress\/\">functions.php file<\/a> to customize how the add-to-cart button looks and works on your WooCommerce store.<\/p><p>For this method, we suggest <a href=\"\/in\/tutorials\/how-to-create-wordpress-child-theme\/\">using a child theme<\/a> to prevent losing your theme customizations.<\/p><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Important!<\/strong> Please be aware that this method requires caution, as incorrect changes can break your site. Be sure to <a href=\"\/in\/tutorials\/backup-wordpress\/\">create a WordPress backup<\/a> before proceeding.\n            <\/p><\/div>\n\n\n\n<\/p><p>Open the <strong>functions.php<\/strong> file based on your theme type:<\/p><ul class=\"wp-block-list\">\n<li><strong>Via the Theme File Editor menu<\/strong>. If you use a classic theme, head to <strong>Appearance &rarr; Theme File Editor<\/strong>. From the right-hand sidebar, select the <strong>functions.php<\/strong> file of your active theme.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe79cf\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe79cf\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1999\" height=\"1074\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-theme-functions-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"The functions.php file in the Theme File Editor menu of the WordPress dashboard\" class=\"wp-image-116805\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-theme-functions-highlighted.png\/w=1999,fit=scale-down 1999w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-theme-functions-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-theme-functions-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-theme-functions-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-theme-functions-highlighted.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-theme-functions-highlighted.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Via file manager or FTP<\/strong>. For block themes that don&rsquo;t have the <strong>Theme File Editor<\/strong> option, use your hosting provider&rsquo;s file manager or an<a href=\"\/in\/tutorials\/ftp\/filezilla-ftp-configuration\/\"> FTP client like FileZilla<\/a> to edit the file. It&rsquo;s located under <strong>public-html\/wp-content\/themes\/your-theme\/functions.php<\/strong>.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe85e0\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe85e0\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1350\" height=\"1154\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/hostinger-file-manager-functions-php-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"The functions.php file under the theme's folder in the file manager\" class=\"wp-image-116807\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/hostinger-file-manager-functions-php-highlighted.png\/w=1350,fit=scale-down 1350w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/hostinger-file-manager-functions-php-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/hostinger-file-manager-functions-php-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/hostinger-file-manager-functions-php-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/hostinger-file-manager-functions-php-highlighted.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1350px) 100vw, 1350px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>Next, add the following code snippet at the end of the file to display an add-to-cart button after each product on the shop page. You can customize the HTML and CSS to change the button&rsquo;s style and placement.<\/p><pre class=\"wp-block-preformatted\">function custom_add_to_cart_button() {<br>echo '&lt;a href=\"' . esc_url( get_permalink() ) . '?add-to-cart=' . get_the_ID() . '\" class=\"button add_to_cart_button\"&gt;Add to Cart&lt;\/a&gt;';<br>}<br>add_action('woocommerce_after_shop_loop_item', 'custom_add_to_cart_button', 10);<\/pre><p>Finally, save the changes to the <strong>functions.php<\/strong> file. If you use the <strong>Theme File Editor<\/strong>, click the <strong>Update File<\/strong> button. If you&rsquo;re editing via a file manager or FTP client, save your edits and re-upload the file.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe8f82\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe8f82\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1784\" height=\"762\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-update-file-highlighted.png\/w=1024,h=1024,fit=scale-down\" alt=\"The Update File button in the Theme File Editor menu of the WordPress dashboard\" class=\"wp-image-116808\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-update-file-highlighted.png\/w=1784,fit=scale-down 1784w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-update-file-highlighted.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-update-file-highlighted.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-update-file-highlighted.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-update-file-highlighted.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/wordpress-edit-themes-update-file-highlighted.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1784px) 100vw, 1784px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-tips-for-an-effective-woocommerce-add-to-cart-button\">Tips for an effective WooCommerce add-to-cart button<\/h2><p>Now that you know how to add a WooCommerce add-to-cart button, let&rsquo;s talk about how to maximize its potential to boost your sales. Here are our top six tips for an effective add-to-cart button:<\/p><p><strong>Make the add-to-cart button stand out<\/strong><\/p><p>The add-to-cart button should be easily recognizable to encourage customers to buy products.<\/p><p>Use a bold, contrasting color that aligns with your brand but stands out from the rest of the page. For instance, if your website uses a predominantly neutral color scheme, a bright, contrasting color like red or green can make the button more noticeable.<\/p><p>Take Uniqlo&rsquo;s add-to-cart button as an example. The red pops on the predominantly white page while also matching the brand&rsquo;s color palette.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebe99a5\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebe99a5\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1887\" height=\"702\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-add-to-cart-button-in-uniqlo-website.png\/w=1024,h=1024,fit=scale-down\" alt=\"The Uniqlo eCommerce site's checkout page\" class=\"wp-image-116809\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-add-to-cart-button-in-uniqlo-website.png\/w=1887,fit=scale-down 1887w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-add-to-cart-button-in-uniqlo-website.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-add-to-cart-button-in-uniqlo-website.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-add-to-cart-button-in-uniqlo-website.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-add-to-cart-button-in-uniqlo-website.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-add-to-cart-button-in-uniqlo-website.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1887px) 100vw, 1887px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>You should also find a sweet spot when it comes to the add-to-cart button&rsquo;s size. Make sure it is large enough to be easily clickable but not too large that it takes up too much space.<\/p><p><strong>Place the button strategically<\/strong><\/p><p>Your WooCommerce add-to-cart button should be visible and easy to access. Ideally, it should be the first element your customers see when they visit a product page.<\/p><p>We recommend placing the add-to-cart button near key elements like the product title, price, and image. If you need to have a detailed product description, consider having a sticky add-to-cart button that stays visible even when users scroll the page.<\/p><p><strong>Write a clear call to action<\/strong><\/p><p>The text on your add-to-cart button should be simple, clear, and action-driven.<\/p><p>Instead of vague words like <strong>Proceed <\/strong>or <strong>Continue<\/strong>, use direct language that represents the desired actions, such as <strong>Add to Cart<\/strong> or <strong>Buy Now<\/strong>.<\/p><p>You can also be creative with the text and personalize it to your target audience. For instance, write <strong>Add to Bag<\/strong> for online fashion stores or <strong>Order Now<\/strong> for limited-stock items.<\/p><p>Also, consider adding a shopping cart icon next to the text. This way, the add-to-cart button is more intuitive for your customers.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebea3d6\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebea3d6\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1826\" height=\"817\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-hnm-product-page-with-a-cart-icon-in-the-add-to-cart-button.png\/w=1024,h=1024,fit=scale-down\" alt=\"The HnM's product page showing an add-to-cart button with a cart icon\" class=\"wp-image-116810\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-hnm-product-page-with-a-cart-icon-in-the-add-to-cart-button.png\/w=1826,fit=scale-down 1826w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-hnm-product-page-with-a-cart-icon-in-the-add-to-cart-button.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-hnm-product-page-with-a-cart-icon-in-the-add-to-cart-button.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-hnm-product-page-with-a-cart-icon-in-the-add-to-cart-button.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-hnm-product-page-with-a-cart-icon-in-the-add-to-cart-button.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-hnm-product-page-with-a-cart-icon-in-the-add-to-cart-button.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1826px) 100vw, 1826px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p><strong>Maintain a consistent design<\/strong><\/p><p>Make sure that the add-to-cart button&rsquo;s design aligns with the rest of your site. If a button looks off or out of place, it can confuse customers and make them less likely to click on it.<\/p><p>Use colors and fonts from your brand palette, and make sure that the buttons look the same wherever you place them on your WooCommerce store.<\/p><p><strong>Add interactive elements<\/strong><\/p><p>Visual feedback boosts the user experience by letting customers know their actions were successful. It makes shopping more intuitive and helps prevent any confusion.<\/p><p>You can implement a subtle animation, like a slight color change, a confirmation pop-up, or a cart icon that updates in real-time when customers add an item to the cart.<\/p><p>That said, keep it simple. You don&rsquo;t want to overwhelm users with too many animations.<\/p><p><strong>Make sure the button is mobile-responsive<\/strong><\/p><p><a href=\"https:\/\/www.statista.com\/statistics\/568684\/e-commerce-website-visit-and-orders-by-device\/\" target=\"_blank\" rel=\"noopener\">Nearly 80% of shoppers<\/a> access online stores from mobile devices. So, it&rsquo;s important that your add-to-cart button functions well on any screen size.<\/p><p>The rule of thumb is to make the button large enough to tap easily. Also, give sufficient space around it to prevent accidental clicks on nearby elements.<\/p><p>Try accessing your online store from devices with different screen sizes to see if the button works perfectly. This will allow you to immediately fix any errors.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-fix-a-missing-add-to-cart-button-in-woocommerce\">How to fix a missing add-to-cart button in WooCommerce<\/h2><p>A missing WooCommerce add-to-cart button is an issue that could happen from time to time. Here are some ways to troubleshoot the error:<\/p><p><strong>Check your WooCommerce settings<\/strong><\/p><p>The add-to-cart button won&rsquo;t show if your WooCommerce setup is incomplete.<\/p><p>In this case, you should check whether your online store&rsquo;s currency, shipping options, and payment methods are properly configured.<\/p><p>Refer to our <a href=\"\/in\/tutorials\/woocommerce-tutorial\/\">WooCommerce tutorial<\/a> to ensure you&rsquo;ve followed all the essential steps.<\/p><p><strong>Check your WooCommerce product data<\/strong><\/p><p>WooCommerce may hide the add-to-cart button if a product is out of stock or missing any required details like the image, price, product type, stock keeping unit (SKU), and shipping rules.<\/p><p>If this is the case, filling in the missing information for your WooCommerce products might fix the problem. Alternatively, consider removing sold-out products to prevent them from appearing on your pages and searches.<\/p><p><strong>Clear your WordPress cache<\/strong><\/p><p>Your <a href=\"\/in\/tutorials\/website-cache\/\">website cache<\/a> may be showing an outdated version of your product page without the add-to-cart button.<\/p><p>Clearing your WordPress cache using a caching plugin could fix this issue. Here&rsquo;s how to do it with <a href=\"https:\/\/wordpress.org\/plugins\/litespeed-cache\/\" target=\"_blank\" rel=\"noopener\">LiteSpeed Cache<\/a>:<\/p><ol class=\"wp-block-list\">\n<li>Install and activate the plugin from your WordPress admin dashboard.<\/li>\n\n\n\n<li>Navigate to <strong>LiteSpeed Cache<\/strong> &rarr; <strong>Toolbox<\/strong>.<\/li>\n\n\n\n<li>The <strong>Purge <\/strong>tab will open by default. Choose <strong>Purge All<\/strong> to clear the entirety of your website cache.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a58c6ebeb233\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a58c6ebeb233\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1726\" height=\"638\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-purge-all-menu-in-litespeed-cache-toolbox-purging-option.png\/w=1024,h=1024,fit=scale-down\" alt=\"The Purge All menu is highlighted on the LiteSpeed Cache plugin dashboard\" class=\"wp-image-116811\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-purge-all-menu-in-litespeed-cache-toolbox-purging-option.png\/w=1726,fit=scale-down 1726w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-purge-all-menu-in-litespeed-cache-toolbox-purging-option.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-purge-all-menu-in-litespeed-cache-toolbox-purging-option.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-purge-all-menu-in-litespeed-cache-toolbox-purging-option.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-purge-all-menu-in-litespeed-cache-toolbox-purging-option.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/52\/2024\/09\/the-purge-all-menu-in-litespeed-cache-toolbox-purging-option.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1726px) 100vw, 1726px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p><strong>Run a malware scan on your website<\/strong><\/p><p>Malware can corrupt or modify WordPress core files, your site&rsquo;s JavaScript or PHP code, plugins, or themes. This can possibly stop the add-to-cart button from functioning.<\/p><p>Use WordPress security plugins like <strong>Wordfence<\/strong> or <strong>Sucuri<\/strong> to scan and remove malware from your website files.<\/p><p>You can also consider <a href=\"\/in\/tutorials\/restore-wordpress-from-backup\/\">restoring your website from a backup<\/a> taken before the malware infection.<\/p><p><strong>Check for any conflicting plugins or themes<\/strong><\/p><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Important!<\/strong> We recommend trying this troubleshooting method in a <a href=\"\/in\/tutorials\/wordpress-staging-environment\/\">staging environment<\/a>, as it might affect your live site&rsquo;s functionality.\n            <\/p><\/div>\n\n\n\n<\/p><p>Installing multiple <a href=\"\/in\/tutorials\/best-woocommerce-plugins\/\">WooCommerce plugins<\/a> lets you build a highly functioning eCommerce site. However, incompatibility between plugins may cause WooCommerce add-to-cart buttons to fail.<\/p><p>To troubleshoot this problem, try deactivating all plugins except WooCommerce and check if the add-to-cart button appears on the live site.<\/p><p>If it does, re-enable plugins one by one to identify the source of the conflict. Then, try updating the plugin in question if it&rsquo;s outdated. If not, remove it or try to find a replacement.<\/p><p>In case your plugin isn&rsquo;t causing the issue, try switching to a default <a href=\"\/in\/tutorials\/best-woocommerce-themes\/\">WooCommerce theme<\/a> like <strong>Storefront<\/strong> and see if the add-to-cart button appears. If it does, your active theme is most likely causing the error.<\/p><p>If you&rsquo;d rather not <a href=\"\/in\/tutorials\/change-a-theme-in-wordpress\/\">change your WordPress theme<\/a>, check if the current theme is up-to-date. If it is, try to consult with the theme&rsquo;s support team to solve the issue.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>In this tutorial, you&rsquo;ve learned how to add a WooCommerce add-to-cart button using three different methods. Each method gives you a different level of control and flexibility, so choose the one that best fits your needs.<\/p><p>Strategically placing an add-to-cart button can really make your customers&rsquo; shopping experience smoother and more enjoyable. When that happens, you&rsquo;ll likely see more sales.<\/p><p>It&rsquo;s also important to regularly check if your online store&rsquo;s add-to-cart button is properly functioning so you can fix any issues immediately.<\/p><p>We hope this guide helps you optimize your store&rsquo;s add-to-cart button and shows you how to troubleshoot any errors if they arise. Good luck!<\/p><h2 class=\"wp-block-heading\" id=\"h-woocommerce-add-to-cart-button-faq\">WooCommerce add-to-cart button FAQ<\/h2><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1727593842844\"><h3 class=\"schema-faq-question\">How do I add a link to the add-to-cart button in WooCommerce?<\/h3> <p class=\"schema-faq-answer\">You can use plugins like <strong>WooCommerce Custom Add to Cart Button <\/strong>to easily add a custom link to the button. If you&rsquo;re comfortable editing code, add the <strong>redirect<\/strong> parameter to the <strong>[add_to_cart]<\/strong> shortcode, or edit your theme&rsquo;s <strong>functions.php<\/strong> file.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1727593865290\"><h3 class=\"schema-faq-question\">What is the shortcode for the add-to-cart button in WooCommerce?<\/h3> <p class=\"schema-faq-answer\">The shortcode for the add-to-cart button in WooCommerce is <strong>[add_to_cart]<\/strong>. The basic syntax is <strong>[add_to_cart id=&rdquo;PRODUCT_ID&rdquo;], <\/strong>where you should replace <strong>PRODUCT_ID<\/strong> with the product&rsquo;s actual ID number.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1727593866320\"><h3 class=\"schema-faq-question\">How do I edit the WooCommerce cart button?<\/h3> <p class=\"schema-faq-answer\">The <strong>WooCommerce Custom Add to Cart Button<\/strong> plugin lets you make simple changes to the button. For more advanced tweaks, add the <strong>style <\/strong>and <strong>class <\/strong>parameters to the WooCommerce <strong>[add_to_cart] <\/strong>shortcode or add custom CSS to your theme&rsquo;s <strong>functions.php<\/strong> file. But remember to create a child theme or back up your site before making changes to its code.<\/p> <\/div> <\/div><h3 class=\"wp-block-heading\" id=\"h-\"><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>The add-to-cart button is a key element for any online store, including those built on WooCommerce. Without the add-to-cart button, customers won&rsquo;t be able to check out any items. It&rsquo;s also important to place it strategically to ease the customers&rsquo; buying process and increase sales. In this guide, we&rsquo;ll explain three methods to add the [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/in\/tutorials\/how-to-add-woocommerce-add-to-cart-button\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":257,"featured_media":107348,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","footnotes":""},"categories":[22634,22633],"tags":[],"class_list":["post-116796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-woocommerce-add-to-cart-button","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-ajouter-un-bouton-ajouter-au-panier-woocommerce","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-woocommerce-add-to-cart-button","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/woocommerce-add-to-cart-button","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/woocommerce-add-to-cart-button","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-woocommerce-add-to-cart-button","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-woocommerce-add-to-cart-button","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-woocommerce-add-to-cart-button","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-woocommerce-add-to-cart-button","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/116796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/users\/257"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/comments?post=116796"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/116796\/revisions"}],"predecessor-version":[{"id":126070,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/116796\/revisions\/126070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/media\/107348"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/media?parent=116796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/categories?post=116796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/tags?post=116796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}