How to add products to your WooCommerce cart with PHP and ajax
This tutorial explains how to add products to your Woocommerce cart programatically with PHP and ajax.
Add to cart in WooCommerce via URL
In case you’re looking for a simple solution without ajax and PHP, there is a custom add to cart URL in WooCommerce:
|
1 2 3 |
https://example.com/?add-to-cart=25&quantity=3 |
The quantity parameter is optional, the default value is 1. The add-to-cart parameter is required and contains the product ID for simple products and the variation ID for variable products.
Add to cart in Woocommerce PHP method
There is a prebuilt method in WooCommerce to handle add to cart programatically:
|
1 2 3 |
WC()->cart->add_to_cart( $product_id = 0, $quantity = 1, $variation_id = 0, $variation = array(), $cart_item_data = array() ); |
The only required paramater is the $product_id, in case of variations you should also set your $variation_id and the $variation variable with the variation attributes:
|
1 2 3 4 5 6 7 8 9 10 11 |
$product_id = 65; $quantity = 1; $variation_id = 88; $variation = array( 'Size' => 'Big', 'Color' => 'Blue', ); WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variation ); |
For example to add a product automatically in your cart create a custom method in your functions.php:
|
1 2 3 4 5 6 7 8 9 10 |
function add_my_custom_product_to_cart(){ $cart_item_key = WC()->cart->add_to_cart( 65 ); if(!$cart_item_key){ return false; else return $cart_item_key; } |
Don’t forget to hook the method to a WooCommerce action of your choice.
Add to cart in WooCommerce with ajax and PHP
The advanced solution is to use ajax and PHP. There is a method predefined in WooCommerce. Let’s create a custom method in our functions.php to add a product with the ID of 65 to our WooCommerce cart via ajax:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function add_my_custom_product_to_cart(){ $cart_item_key = WC()->cart->add_to_cart( 65 ); if(!$cart_item_key){ wp_send_json(['status' => 'error', 'message' => 'Add to cart failed']); } wp_send_json(['status' => 'ok', 'cart_item_key' => $cart_item_key, 'message' => 'Add to cart success']); } // hook for logged out users add_action('wp_ajax_nopriv_add_my_custom_product_to_cart_action', 'add_my_custom_product_to_cart'); // hook for logged in users add_action('wp_ajax_add_my_custom_product_to_cart_action', 'add_my_custom_product_to_cart'); |
As the last step you will need to include a small javascript code. This part depends on what you want to achieve. In the example I’m going to include a short javascript code on every page and the add to cart is triggered on button click. Make sure the action parameter in your ajax call matches the WordPress action name without the wp_ajax or wp_ajax_nopriv prefix (add_my_custom_product_to_cart_action and wp_ajax_add_my_custom_product_to_cart_action in our example):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function include_custom_js_in_footer(){ ?> <script type="text/javascript"> (function($){ $('.add-to-cart-button').click(function(e){ $.ajax({ url: "<?= admin_url( 'admin-ajax.php' ); ?>", method: 'post', data: { action: 'add_my_custom_product_to_cart_action' }, success: function(response){ alert('Added to cart'); }, error: function(){ alert('Add to cart error'); } }); }); })(jQuery); </script> <?php } add_action( 'wp_footer', 'include_custom_js_in_footer' ); |
Happy coding!