s Ajaxify your WooCommerce shopping cart widget - Boshanka

Ajaxify your WooCommerce shopping cart widget

Ajaxify your WooCommerce shopping cart widget

WooCommerce is probably one of the most valuable and useful plugins in any WordPress designer’s arsenal. Offering amazingly simple integration and a plethora of features and bolt-ons. Truly you can create a hugely complex e-commerce solution that’s elegant and lightening fast.

I’ve been adding e-commerce to this site using the wonderful WooCommerce, and had set the “add items to the cart via AJAX when on a product page” in WooCommerce settings. Problem is, the cart widget, also shown on that same page, wasn’t updating at the same time.

Well i found the answer, and it’s incredibly simple.

First up – add this to your theme wherever you want your cart to display (you could even use a text widget – with extended PHP functionality.)

1
2
3
<?php global $woocommerce; ?>

<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>

Then just add this to your “functions.php” file and your cart widget will magically become ajaxed – so when you add items from the category page, your cart total will update on the fly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');

function woocommerce_header_add_to_cart_fragment( $fragments ) {
global $woocommerce;
ob_start();
?>
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
<?php

$fragments['a.cart-contents'] = ob_get_clean();

return $fragments;

}

?>

13 Responses to "Ajaxify your WooCommerce shopping cart widget"

  1. Akhileshwar  December 28, 2012 at 7:05 am

    Nice article it’s working fine.

  2. Luck Luke  January 29, 2013 at 8:06 pm

    I would love to know if it is possible to Ajaxify the add to cart on the single product page? For some reason I cannot get any Ajax to work on any Woocommerce installation? Should it be working from a Single Product page? At the moment it refreshes the page with the $_GET[‘add-to-cart’] set to the ID of the product.

  3. Ben  January 31, 2013 at 3:49 pm

    Hey Luke, the code above is really about ajaxing the widget to work on category pages. However it is possible to get it working on product pages too. Send me a link to your site and I’ll take a look.

    Ben.

  4. Hooman Askari (@CapitalH_Press)  March 31, 2013 at 11:40 am

    Thank you, you just saved me a huge amount of time. Thanks again

  5. Nick  November 5, 2013 at 5:26 pm

    It is impossible for me to work! I have tried to add it to the functions and theme but no success. What I actually want is to make visible the “Add to cart” button to all product pages. For example in my main page (www.brandz.se) I have a shortcode appearing the Products on Sale. And in my links (Kvinnor, barn) I also have related products based on the category. I want to make it appear to all those pages. I guess woocommerce is all about coding, I have worked quite much myself without knowing programming but it worked so far. I just stacked in that “add to cart quick button” Any help would be appreciated

  6. serkan  January 2, 2014 at 11:40 pm

    Thank you. Saved lots of time.

  7. Carlos  March 4, 2014 at 10:02 am

    Thank you. Incredibly simple, clean and useful.

  8. Kurt Avish  May 3, 2014 at 7:08 pm

    Thanks. You just saved me some hours.

  9. Andrew  May 14, 2015 at 2:00 pm

    Has anyone written any code to get ajax add to cart working on the single product page?

  10. bevels  June 4, 2015 at 2:52 am

    Doesn’t work.. no matter what I try. Maybe something’s change in Wooc 2.3.10?

  11. amir  September 27, 2015 at 3:58 pm

    Hi,
    super simple. thanks for that! In addition, do you have any idea how I can enable a hover effect that shows the content of the mini-cart?
    thanks for you help!
    Cheers,

  12. Slim  January 16, 2016 at 12:28 am

    Hello, in which file should I put the first code ?

  13. Ben  January 19, 2016 at 11:36 am

    Hi Slim, You need to add this to your functions.php – should be in the root of your theme.

Leave a Reply

Enjoyed this article?

If you enjoyed this article please rate & share.

You Might Also Like