Ajaxify your WooCommerce shopping cart widget
Filed in Tutorials & Resources
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 | <a class="cart-contents" title="<?php _e('View your shopping cart', 'woothemes'); ?>" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><!--?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 | <!--?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" title="<?php _e('View your shopping cart', 'woothemes'); ?>" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><!--?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; } ?--> |
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.
Nice article it’s working fine.
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.
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.
Thank you, you just saved me a huge amount of time. Thanks again
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
Thank you. Saved lots of time.
Thank you. Incredibly simple, clean and useful.
Thanks. You just saved me some hours.
Has anyone written any code to get ajax add to cart working on the single product page?
Doesn’t work.. no matter what I try. Maybe something’s change in Wooc 2.3.10?
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,
Hello, in which file should I put the first code ?
Hi Slim, You need to add this to your functions.php – should be in the root of your theme.
Excellent thank you! Have been looking everywhere for a way to fix this
[…] Ajaxify your WooCommerce shopping cart widget […]
[…] https://www.boshanka.co.uk/web-design-tutorials-resources/ajaxify-woocommerce-shopping-cart-widget/ […]