Ajaxify your WooCommerce shopping cart widget

Bish
Bash
Boshanka
Let's get it done!

0 Shares

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;

}

?>
0 0 vote
Article Rating
Subscribe
Notify of
guest
14 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Akhileshwar
8 years ago

Nice article it’s working fine.

Luck Luke
Luck Luke
8 years ago

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.

Hooman Askari (@CapitalH_Press)
8 years ago

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

Nick
7 years ago

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

serkan
serkan
7 years ago

Thank you. Saved lots of time.

Carlos
Carlos
7 years ago

Thank you. Incredibly simple, clean and useful.

Kurt Avish
6 years ago

Thanks. You just saved me some hours.

Andrew
5 years ago

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

bevels
5 years ago

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

amir
amir
5 years ago

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,

Slim
Slim
5 years ago

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

Joe
Joe
2 years ago

Excellent thank you! Have been looking everywhere for a way to fix this

Phew.
You've made it this far.

I am good at managing my schedule, so I can usually get projects booked in without much lead time. Let’s get our heads together and get your project done.

Get a Quote
Bish
Bash
Boshanka
Let's get it done!

Based in London, Working Everywhere

I’m a Freelance Web Designer and WordPress developer, I’m based in London but work with client’s in the UK and all over the world.

Creative Web Design & WordPress Development Services

Contact Me