Changing the number of mini carts in Woocommerce
I've read like every woocommerce thread, but can't seem to figure out how to add a minus button that decreases the cart item count (preferably with ajax) in MiniCart Woocommerce.
I was able to add a button that increases the quantity using the woocommerce shortcode and through a few other code samples. However, I cannot find how to decrease the quantity anywhere.
There are several questions about this, no one answered. Or I was looking for the wrong directory.
However, can anyone give me some sample code on how to reduce the cart quantity for an out of the box product? I have already tried my own php file with these lines of code:
$cartKey = $_POST['cart_item_key']; //The cart key required by set_quantity method
$cartQty = $_POST['cart_item_qty']; //the quantity I provide in my post
global $woocommerce;
echo $woocommerce->cart->set_quantity($cartKey,$cartQty);
But calling this through an AJAX post gives me an error (internal server error). I also tried adding to cart with negative quantity, also didn't work.
UPDATE: Adding this code to the WP page template and calling that page no longer gives me an error. However, after calling the code, it doesn't update the cart.
What can I do? Thanks a lot, I hope someone can help here!
source to share
Ok so I figured it out. What I've done:
1: Create a WP page responsible for handling the AJAX update cart. I think you can do it with a simple PHP file, but I just created a custom WP template. So I added a page template named "template-setquantity.php" with the following content:
<?php
/**
* Template Name: Request template for Set Quantity
* This page updates mini cart quantity for a product based on the post value
*/
//I dont think this line is needed
global $woo_options;
?>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
//the cart key stores information about cart
$cartKeySanitized = filter_var($_POST['cart_item_key'], FILTER_SANITIZE_STRING);
//the new qty you want for the product in cart
$cartQtySanitized = filter_var($_POST['cart_item_qty'], FILTER_SANITIZE_STRING);
//update the quantity
global $woocommerce;
ob_start();
$woocommerce->cart->set_quantity($cartKeySanitized,$cartQtySanitized);
ob_get_clean();
wp_footer(); ?>
<?php woo_foot(); ?>
</body>
</html>
-
Create a Wordpress page using this template. For this tutorial, the url should be: updatecart
-
Now copy the mini-cart.php file from woocommerce to your own theme. So I created a woocommerce / cart dir in my custom theme and copied the mini-cart.php file to that folder
-
Update the mini-cart.php template to add your own plus and minus buttons to update the mini cart quantity. For me, this meant adding the following code, somewhere in each product's loop:
<?php //btn add echo do_shortcode('[add_to_cart id="'.$cart_item['product_id'].'" show_price="false" btn_text="+" class="btnAdd" ]'); //btn minus, the cart_item_key and $cart_item['.. is available already in scope. echo '<a class="btnMinus" onClick="updateQty(\''.$cart_item_key.'\','.($cart_item['quantity']-1).')"> - </a>'; ?>
-
So now we've set up a page that catches quantity update requests, and we've added or added a plus or minus to each product in the mini cart. As a final step, we need to create a JS function that does 2 things: an AJAX call to our refresh template page, and an AJAX call to visually update the contents of cart 1 .
-
In my case, I added these features to the footer. As you read in step 4, the minus buttons function for onClick is updateQty, so that should be our JS function name. Paste the following JS code, for example, into the footer (note that I am using JQuery):
<script type="text/javascript"> function updateQty(key,qty){ url = 'http://yourdomain.com/updatecart/'; data = "cart_item_key="+key+"&cart_item_qty="+qty; jQuery.post( url, data ) .done(function( data ) { //function updateCartFragment updateCartFragment(); }); } function updateCartFragment() { $fragment_refresh = { url: woocommerce_params.ajax_url, type: 'POST', data: { action: 'woocommerce_get_refreshed_fragments' }, success: function( data ) { if ( data && data.fragments ) { jQuery.each( data.fragments, function( key, value ) { jQuery(key).replaceWith(value); }); if ( $supports_html5_storage ) { sessionStorage.setItem( "wc_fragments", JSON.stringify( data.fragments ) ); sessionStorage.setItem( "wc_cart_hash", data.cart_hash ); } jQuery('body').trigger( 'wc_fragments_refreshed' ); } } }; //Always perform fragment refresh jQuery.ajax( $fragment_refresh ); } </script>
Hope this helps!
NOTE that in later versions of Woocommerce I would be better off replacing the global $ woocommerce with a WC () function ( http://docs.woothemes.com/wc-apidocs/function-WC.html )
source to share