{"id":88906,"date":"2019-11-19T11:02:16","date_gmt":"2019-11-19T14:02:16","guid":{"rendered":"http:\/\/quadlayers.com\/?p=88906"},"modified":"2021-02-16T08:11:14","modified_gmt":"2021-02-16T11:11:14","slug":"woocommerce-ajax-add-to-cart","status":"publish","type":"post","link":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/","title":{"rendered":"WooCommerce AJAX add to cart &#8211; Step-by-Step Tutorial"},"content":{"rendered":"<p>Some weeks ago we talked about <a href=\"https:\/\/quadlayers.com\/woocommerce-add-to-cart-function-programmatically\/\">how to add the cart function programmatically<\/a> to boost your sales. Today, we\u2019ll have a look at <strong>how to implement AJAX in the <em>Add to cart<\/em> button in WooCommerce products<\/strong>. This will improve user experience and the overall sales process, which will also help you optimize your store and <a href=\"https:\/\/quadlayers.com\/how-to-increase-woocommerce-sales-and-conversion\/\">increase your revenue.<\/a><\/p>\n<p>Nowadays, if you want to run a successful store, it\u2019s key that your site updates the cart dynamically. Otherwise, every time a user adds a product to the cart the page will reload making the buying process very slow and increasing the chances of customers dropping out. That\u2019s why <a href=\"https:\/\/quadlayers.com\/woocommerce-tips-to-optimize-your-online-store\/\">revamping your store<\/a> with the WooCommerce AJAX <em>add to cart<\/em> function is a must to reduce cart abandonment and increase your sales.<\/p>\n<p>In this guide, we&#8217;ll show you how to do it step-by-step.<\/p>\n<h3>Benefits of AJAX in WooCommerce<\/h3>\n<p>So to sum up, the benefits of using AJAX in your store are:<\/p>\n<ul>\n<li>Reduce server load and bandwidth<\/li>\n<li>Speed up the buying process<\/li>\n<li>Improve customer experience<\/li>\n<li><a href=\"https:\/\/quadlayers.com\/woocommerce-abandoned-cart\/\">Reduce cart abandonment<\/a><\/li>\n<li>Increase conversion rates<\/li>\n<\/ul>\n<h2>Tutorial: WooCommerce AJAX add to cart<\/h2>\n<p>To apply the<b>\u00a0AJAX <em>add to cart <\/em><\/b>function in <b><em>WooCommerce<\/em><\/b> there are two options:<\/p>\n<ol>\n<li>With a plugin<\/li>\n<li>Coding it yourself<\/li>\n<\/ol>\n<p>Let&#8217;s have a look at each method.<\/p>\n<h3><b>1) AJAX add to cart with a plugin<\/b><\/h3>\n<p>If you don\u2019t have experience coding or you prefer an easy solution, using a plugin is an excellent choice. Simply <a href=\"https:\/\/wordpress.org\/plugins\/woo-ajax-add-to-cart\/\">download our AJAX <em>add to cart<\/em> WooCommerce plugin<\/a>, install it and the software will do the rest.<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"210MyB9W3I\"><p><a href=\"https:\/\/wordpress.org\/plugins\/woo-ajax-add-to-cart\/\">Ajax add to cart for WooCommerce<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Ajax add to cart for WooCommerce&#8221; &#8212; Plugin Directory\" src=\"https:\/\/wordpress.org\/plugins\/woo-ajax-add-to-cart\/embed\/#?secret=210MyB9W3I\" data-secret=\"210MyB9W3I\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p><i>AJAX add to cart<\/i> for WooCommerce is one of the best plugins to add AJAX to the WooCommerce <em>add to cart<\/em> button. This tool allows shoppers to include single or variable products in their carts without having to reload the site every time. What\u2019s even better is that it runs smoothly in 99% of WordPress themes and it doesn\u2019t require any initial setup. Once you install it, it\u2019ll be ready to go.<\/p>\n<h3><b>2) Code it yourself<\/b><\/h3>\n<p>Do you have some coding skills and prefer to customize your WooCommerce AJAX <em>add to cart<\/em> button? In this guide, we\u2019ll show you how to do it step-by-step.<\/p>\n<h4>A) Install a child theme<\/h4>\n<p>The first thing you need to do is <a href=\"https:\/\/quadlayers.com\/create-a-child-theme-in-wordpress\/\">create a <strong>child theme<\/strong><\/a>. If you don\u2019t have one, you can use a plugin. <a href=\"https:\/\/quadlayers.com\/best-child-theme-plugins-wordpress\/\">There are several of them<\/a> so just pick the one you like best and install it in your store. Why should you install a child theme? Because if you directly customize the theme&#8217;s files, the next time you update the theme, the new files will replace your changes and all your customizations will be lost. However, if you customize the child theme, the modifications won&#8217;t be overridden.<\/p>\n<h4><b>B) Include JavaScript (JS) file<\/b><\/h4>\n<p>In the <strong><i>functions.php<\/i><\/strong> file of the child theme, include a JavaScript file by using the <i>wp_enqueue_script<\/i> hook. This is one of the most <a href=\"https:\/\/quadlayers.com\/how-to-use-woocommerce-hooks\/\">popular hooks<\/a> that WordPress offers to customize websites. Let\u2019s have a look at the script that includes the <i>ajax_add_to_cart.js<\/i> file below:<\/p>\n<pre>function ql_woocommerce_ajax_add_to_cart_js() {\r\n\u00a0\u00a0\u00a0\u00a0if (function_exists('is_product') &amp;&amp; is_product()) {\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') . '\/js\/ajax_add_to_cart.js', array('jquery'),'1.0' );\r\n\u00a0\u00a0\u00a0\u00a0}\r\n}\r\nadd_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');<\/pre>\n<p>With the conditional <em>if (function_exists(&#8216;is_product&#8217;) &amp;&amp; is_product())<\/em> <span style=\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\">in line 2, you make sure that the JQuery is only applied on a product page.<\/span><\/p>\n<h4><b>C) Create a JS file<\/b><\/h4>\n<p>Once you\u2019ve done that, create the file you included in the previous step. Just go to your <strong>cPanel<\/strong> and then to the <strong>child theme folder<\/strong>. After that, follow the route <strong><i>wp_content \/themes\/ folder<\/i><\/strong>. There, create a new folder in the child theme called <em>js<\/em>, and then a file inside it with the same name you used in the hook <i>ajax-add-to-cart.js<\/i>. Keep in mind that this step also works even if you use an FTP client. If your child theme already has a JS folder, you can use it without creating a new one.<\/p>\n<h4><b>D) The JQuery\/JS file<\/b><\/h4>\n<p>The next step is to work on the JQuery file that you\u2019ve uploaded in your child theme. That file is empty so you need to add scripts. First, prevent the <em>add to cart<\/em> button from reloading the page with the following script:<\/p>\n<pre>$('.single_add_to_cart_button').on('click', function(e) {\u00a0\r\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\r\n});<\/pre>\n<p>Please note that we use the <i>$(&#8216;.single_add_to_cart_button&#8217;)<\/i> selector to trigger the AJAX call when the button is clicked. You must understand this because all the following script will go inside this function.<\/p>\n<h4><b>E) JQuery WooCommerce AJAX add to cart on single products<\/b><\/h4>\n<p>So the full JQuery script for AJAX add to cart on single products is:<\/p>\n<pre>jQuery(document).ready(function($) {\r\n\u00a0\u00a0\u00a0\u00a0$('.single_add_to_cart_button').on('click', function(e){\u00a0\r\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\r\n\u00a0\u00a0\u00a0\u00a0$thisbutton = $(this),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$form = $thisbutton.closest('form.cart'),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id = $thisbutton.val(),\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0product_qty = $form.find('input[name=quantity]').val() || 1,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0product_id = $form.find('input[name=product_id]').val() || id,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0variation_id = $form.find('input[name=variation_id]').val() || 0;\r\n\u00a0\u00a0\u00a0\u00a0var data = {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0action: 'ql_woocommerce_ajax_add_to_cart',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0product_id: product_id,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0product_sku: '',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0quantity: product_qty,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0variation_id: variation_id,\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\u00a0\u00a0\u00a0\u00a0$.ajax({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'post',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: wc_add_to_cart_params.ajax_url,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: data,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0beforeSend: function (response) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thisbutton.removeClass('added').addClass('loading');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0complete: function (response) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$thisbutton.addClass('added').removeClass('loading');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (response) {\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (response.error &amp; response.product_url) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window.location = response.product_url;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0});\u00a0\r\n});<\/pre>\n<h4><b>F) The PHP script<\/b><\/h4>\n<p>Afterward, you need the PHP handler. The best way is to use some of the WooCommerce filter hooks to build your <em>add to cart<\/em>\u00a0function. This time you\u2019ll do it using AJAX. Simply copy and paste the following script in the <strong><i>functions.php<\/i><\/strong> file of the child theme below the previous script we used to include the JS file.<\/p>\n<pre>add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');\u00a0\r\nadd_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\r\nfunction ql_woocommerce_ajax_add_to_cart() {\u00a0\u00a0\r\n\u00a0\u00a0\u00a0\u00a0$product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));\r\n\u00a0\u00a0\u00a0\u00a0$quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);\r\n\u00a0\u00a0\u00a0\u00a0$variation_id = absint($_POST['variation_id']);\r\n\u00a0\u00a0\u00a0\u00a0$passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $quantity);\r\n\u00a0\u00a0\u00a0\u00a0$product_status = get_post_status($product_id);\u00a0\r\n\u00a0\u00a0\u00a0\u00a0if ($passed_validation &amp;&amp; WC()-&gt;cart-&gt;add_to_cart($product_id, $quantity, $variation_id) &amp;&amp; 'publish' === $product_status) {\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0do_action('ql_woocommerce_ajax_added_to_cart', $product_id);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ('yes' === get_option('ql_woocommerce_cart_redirect_after_add')) {\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wc_add_to_cart_message(array($product_id =&gt; $quantity), true);\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0WC_AJAX :: get_refreshed_fragments();\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$data = array(\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'error' =&gt; true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'product_url' =&gt; apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0echo wp_send_json($data);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_die();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/pre>\n<p>That\u2019s it! You\u2019ve just created your <b>WooCommerce AJAX add to cart<\/b><b> button<\/b>! But how do you know that you\u2019ve done everything correctly? You can check it easily. When you click on the <i>add to cart<\/i> button, the product should be added to the cart without reloading the page.<\/p>\n<h2>Conclusion<\/h2>\n<p>All in all, if you want to optimize your store, the WooCommerce AJAX <em>add to cart<\/em> function is a must. The easy way to apply it is by using the <a href=\"https:\/\/wordpress.org\/plugins\/woo-ajax-add-to-cart\/\">AJAX <em>add to cart<\/em> WooCommerce plugin<\/a>. However, if you have coding skills, you can code AJAX <em>add to cart<\/em> yourself with a child theme and a bit of PHP as described above.<\/p>\n<p>Both options are excellent so choose the one that better suits your needs and skills. This will help you improve user experience and increase your conversion rates. Please let us know your thoughts in the comments section below.<\/p>\n<p>Finally, for more guides about WooCommerce, we recommend you check out our guides on <a href=\"https:\/\/quadlayers.com\/add-products-woocommerce\/\">how to add WooCommerce products<\/a> and <a style=\"font-family: -apple-system, BlinkMacSystemFont, 'segoe ui', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'helvetica neue', sans-serif\" href=\"https:\/\/quadlayers.com\/default-product-attributes-woocommerce\/\">how to create default product attributes in WooCommerce<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Some weeks ago we talked about how to add the cart function programmatically to boost your sales. Today, we\u2019ll have [&hellip;]<\/p>\n","protected":false},"author":1465,"featured_media":88920,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2218],"tags":[1262,1261,1598],"coauthors":[1327,1328],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.1 (Yoast SEO v22.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WooCommerce AJAX add to cart - Step-by-Step Tutorial - QuadLayers<\/title>\n<meta name=\"description\" content=\"Learn how to implement WooCommerce AJAX add to cart on your eCommerce WordPress site step-by-step. Use a plugin or code it in a child theme.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce AJAX add to cart - Step-by-Step Tutorial\" \/>\n<meta property=\"og:description\" content=\"Learn how to implement WooCommerce AJAX add to cart on your eCommerce WordPress site step-by-step. Use a plugin or code it in a child theme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/\" \/>\n<meta property=\"og:site_name\" content=\"QuadLayers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/quadlayers\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/Sebastopolys\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-19T14:02:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-16T11:11:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png\" \/>\n\t<meta property=\"og:image:width\" content=\"997\" \/>\n\t<meta property=\"og:image:height\" content=\"696\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sebastopolys, german\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@quadlayers\" \/>\n<meta name=\"twitter:site\" content=\"@quadlayers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sebastopolys, german\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/\"},\"author\":{\"name\":\"Sebastopolys\",\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/person\/28b25316f47e770fe999a5f5c6cbccc4\"},\"headline\":\"WooCommerce AJAX add to cart &#8211; Step-by-Step Tutorial\",\"datePublished\":\"2019-11-19T14:02:16+00:00\",\"dateModified\":\"2021-02-16T11:11:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/\"},\"wordCount\":1010,\"commentCount\":38,\"publisher\":{\"@id\":\"https:\/\/quadlayers.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png\",\"keywords\":[\"woocommerce\",\"woocommerce plugins\",\"woocommerce tips\"],\"articleSection\":[\"WooCommerce\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/\",\"url\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/\",\"name\":\"WooCommerce AJAX add to cart - Step-by-Step Tutorial - QuadLayers\",\"isPartOf\":{\"@id\":\"https:\/\/quadlayers.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png\",\"datePublished\":\"2019-11-19T14:02:16+00:00\",\"dateModified\":\"2021-02-16T11:11:14+00:00\",\"description\":\"Learn how to implement WooCommerce AJAX add to cart on your eCommerce WordPress site step-by-step. Use a plugin or code it in a child theme.\",\"breadcrumb\":{\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#primaryimage\",\"url\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png\",\"contentUrl\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png\",\"width\":997,\"height\":696,\"caption\":\"Woocommerce ajax add to cart\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/quadlayers.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce AJAX add to cart &#8211; Step-by-Step Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/quadlayers.com\/#website\",\"url\":\"https:\/\/quadlayers.com\/\",\"name\":\"QuadLayers\",\"description\":\"Your WordPress starting point\",\"publisher\":{\"@id\":\"https:\/\/quadlayers.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/quadlayers.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/quadlayers.com\/#organization\",\"name\":\"QuadLayers\",\"url\":\"https:\/\/quadlayers.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2018\/11\/logo.jpg\",\"contentUrl\":\"https:\/\/quadlayers.com\/wp-content\/uploads\/2018\/11\/logo.jpg\",\"width\":285,\"height\":285,\"caption\":\"QuadLayers\"},\"image\":{\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/quadlayers\",\"https:\/\/x.com\/quadlayers\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/person\/28b25316f47e770fe999a5f5c6cbccc4\",\"name\":\"Sebastopolys\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/quadlayers.com\/#\/schema\/person\/image\/e6d335b93a694040bfeeaedabf5817c9\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/934f3dfdca304f0c621d969681017655?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/934f3dfdca304f0c621d969681017655?s=96&d=mm&r=g\",\"caption\":\"Sebastopolys\"},\"description\":\"Hey ! I\u00b4m experienced web editor with more than 1500 posts published in the web, guitar player and crafted beer lover. Thanks for being here !\",\"sameAs\":[\"https:\/\/www.facebook.com\/Sebastopolys\",\"https:\/\/www.instagram.com\/sebas.ross\/\",\"https:\/\/www.youtube.com\/channel\/UCORqPTDbWbn9ssi9PxqjjKQ\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WooCommerce AJAX add to cart - Step-by-Step Tutorial - QuadLayers","description":"Learn how to implement WooCommerce AJAX add to cart on your eCommerce WordPress site step-by-step. Use a plugin or code it in a child theme.","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:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/","og_locale":"en_US","og_type":"article","og_title":"WooCommerce AJAX add to cart - Step-by-Step Tutorial","og_description":"Learn how to implement WooCommerce AJAX add to cart on your eCommerce WordPress site step-by-step. Use a plugin or code it in a child theme.","og_url":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/","og_site_name":"QuadLayers","article_publisher":"https:\/\/www.facebook.com\/quadlayers","article_author":"https:\/\/www.facebook.com\/Sebastopolys","article_published_time":"2019-11-19T14:02:16+00:00","article_modified_time":"2021-02-16T11:11:14+00:00","og_image":[{"width":997,"height":696,"url":"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png","type":"image\/png"}],"author":"Sebastopolys, german","twitter_card":"summary_large_image","twitter_creator":"@quadlayers","twitter_site":"@quadlayers","twitter_misc":{"Written by":"Sebastopolys, german","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#article","isPartOf":{"@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/"},"author":{"name":"Sebastopolys","@id":"https:\/\/quadlayers.com\/#\/schema\/person\/28b25316f47e770fe999a5f5c6cbccc4"},"headline":"WooCommerce AJAX add to cart &#8211; Step-by-Step Tutorial","datePublished":"2019-11-19T14:02:16+00:00","dateModified":"2021-02-16T11:11:14+00:00","mainEntityOfPage":{"@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/"},"wordCount":1010,"commentCount":38,"publisher":{"@id":"https:\/\/quadlayers.com\/#organization"},"image":{"@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#primaryimage"},"thumbnailUrl":"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png","keywords":["woocommerce","woocommerce plugins","woocommerce tips"],"articleSection":["WooCommerce"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/","url":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/","name":"WooCommerce AJAX add to cart - Step-by-Step Tutorial - QuadLayers","isPartOf":{"@id":"https:\/\/quadlayers.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#primaryimage"},"image":{"@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#primaryimage"},"thumbnailUrl":"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png","datePublished":"2019-11-19T14:02:16+00:00","dateModified":"2021-02-16T11:11:14+00:00","description":"Learn how to implement WooCommerce AJAX add to cart on your eCommerce WordPress site step-by-step. Use a plugin or code it in a child theme.","breadcrumb":{"@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#primaryimage","url":"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png","contentUrl":"https:\/\/quadlayers.com\/wp-content\/uploads\/2019\/11\/ajax-add-to-cart.png","width":997,"height":696,"caption":"Woocommerce ajax add to cart"},{"@type":"BreadcrumbList","@id":"https:\/\/quadlayers.com\/woocommerce-ajax-add-to-cart\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/quadlayers.com\/"},{"@type":"ListItem","position":2,"name":"WooCommerce AJAX add to cart &#8211; Step-by-Step Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/quadlayers.com\/#website","url":"https:\/\/quadlayers.com\/","name":"QuadLayers","description":"Your WordPress starting point","publisher":{"@id":"https:\/\/quadlayers.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/quadlayers.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/quadlayers.com\/#organization","name":"QuadLayers","url":"https:\/\/quadlayers.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/quadlayers.com\/#\/schema\/logo\/image\/","url":"https:\/\/quadlayers.com\/wp-content\/uploads\/2018\/11\/logo.jpg","contentUrl":"https:\/\/quadlayers.com\/wp-content\/uploads\/2018\/11\/logo.jpg","width":285,"height":285,"caption":"QuadLayers"},"image":{"@id":"https:\/\/quadlayers.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/quadlayers","https:\/\/x.com\/quadlayers"]},{"@type":"Person","@id":"https:\/\/quadlayers.com\/#\/schema\/person\/28b25316f47e770fe999a5f5c6cbccc4","name":"Sebastopolys","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/quadlayers.com\/#\/schema\/person\/image\/e6d335b93a694040bfeeaedabf5817c9","url":"https:\/\/secure.gravatar.com\/avatar\/934f3dfdca304f0c621d969681017655?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/934f3dfdca304f0c621d969681017655?s=96&d=mm&r=g","caption":"Sebastopolys"},"description":"Hey ! I\u00b4m experienced web editor with more than 1500 posts published in the web, guitar player and crafted beer lover. Thanks for being here !","sameAs":["https:\/\/www.facebook.com\/Sebastopolys","https:\/\/www.instagram.com\/sebas.ross\/","https:\/\/www.youtube.com\/channel\/UCORqPTDbWbn9ssi9PxqjjKQ"]}]}},"_links":{"self":[{"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/posts\/88906"}],"collection":[{"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/users\/1465"}],"replies":[{"embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/comments?post=88906"}],"version-history":[{"count":0,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/posts\/88906\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/media\/88920"}],"wp:attachment":[{"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/media?parent=88906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/categories?post=88906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/tags?post=88906"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/quadlayers.com\/wp-json\/wp\/v2\/coauthors?post=88906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}