If you’re here it’s because your WooCommerce website is slow and you’re wondering why the “/?wc-ajax=get_refreshed_fragments” URL generates delays and server loads (spikes).
Besides, there is too much online literature about WooCommerce Ajax Cart Fragments (including specific plugins and performance plugin options), and you want to learn quickly what they are before understanding if and how you should disable them.
Performance optimization tools like Pingdom and GTMetrix often put the blame on this little WooCommerce functionality. And disabling it carefully can give you a boost in speed, page load and ultimately sales conversion rate.
This becomes a little complex – while adding an item to cart requires just its product ID, removing it from the cart forces you to know the “cart item key”. Japanese, I know, but just copy the snippet and you’re done!
If you want to increase your AOV (Average Order Value), you can definitely start from the WooCommerce Checkout page.
A client asked me to place a “Donation Area” close to the “Place Order” button (so at the bottom of the page, once customers are ready to pay) to drive more awareness around this add-on. All I had to do was creating hidden products with a donation value, use my own “Custom Add to Cart URL” guide to create add to cart links and print an HTML box right above the checkout button by using my WooCommerce Visual Hook Guide for the Checkout Page. Enjoy!
WooCommerce product add-ons are custom input fields that show on the single product page. They’re called “add-ons” as you can add a product personalization or an upsell (at a cost of course).
For example, you can display a text input to print something on the product. Or radio buttons to select different kinds of product upgrades. Or a checkbox to upsell gift wrapping.
Either way, and of course, there are plugins for that. But first, I want to give you a tutorial to code this by yourself (case study: global custom input text field and no surcharge), so that you can learn something new. Enjoy!
Coupons: the good, the bad and the ugly. WooCommerce coupon codes are great to convert more sales – but sometimes they get users to pause / stop placing the order until they find a coupon code online (you did it too, I know).
One good workaround that the internet giants such as Amazon and eBay have implemented is to hide the coupon form until an email is entered, or alternatively to move the coupon code to the bottom of the Cart page. This is a very smart move, and gets the user to concentrate on the Cart / Checkout details before entering or searching for a coupon.
We’ve already seen how to remove the product permalink from the “order table” (the one you see on the Thank you page, My account pages and emails). Thsi time, we’re looking at doing the same thing on the Cart page, which uses different “hooks” than the order pages and therefore requires its own snippet.
This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same page.
But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell approximately one product per order), if you want to save an additional step (two steps convert better than three: “Add to Cart” > “Cart Page” > “Checkout Page” – and this is not rocket science), if your custom workflow and ecommerce objectives require you to manage Cart and Checkout all together, well, this tutorial is for you.
There is a mix of shortcodes, settings and PHP snippets you can use to make this work out of the box. And trust me, this is easier than you think.
While many developers decide to turn the checkout process into a “Multi-Step Checkout” (ehm, not sure why – the more steps the more likely it is to have a cart abandonment), in here we’ll see the exact opposite.
When you add a hidden product to Cart, either manually or programmatically, this will be displayed in the Cart, Checkout and Order details pages (I’m not sure why a hidden product behaves like that… but thankfully you can hide hidden products from the Cart/Checkout/Order page with this snippet).
Problem is, even if you hide hidden products from the Cart page, the “Mini-Cart” product counter icon or text (it depends on your theme) will still count them as products (see the screenshot below). So the question is: in conjunction with the snippet aforementioned, how do I exclude hidden products from being counted in the “menu cart” (also called Mini-Cart Widget)? Continue reading WooCommerce: Exclude Hidden Products from Mini-Cart Counter
This is a great WooCommerce snippet (or plugin, if you wish to call it like that) for those who want to provide conditional checkout fees. For example, you might need to display custom checkout radio buttons to pick premium packaging types, gift wrapping options, specific services or whatever can increase your AOV (Average Order Value).
Radio button selection must work with “Ajax” – which means as soon as the radio button is chosen, checkout must refresh in order to display the updated fees and totals.
Something similar (and also more complex, such as offering additional products) is achieved by the WooCommerce Checkout Add-Ons Plugin sold on the official WooCommerce.com marketplace. But in this case, we want to take a look at custom coding so you’ve got something to play with! Enjoy.
As a result, I definitely didn’t need the whole “Mini-Cart Widget Dropdown Content” either. To test, try to “hover” onto the shopping cart icon on the top right, and you’ll notice there is no cart dropdown 🙂
The “Shipping Calculator” can be enabled via the WooCommerce settings in order to give the user a way to calculate their shipping fees before getting to the Checkout Page. Usually they fill out the country, state, city and postcode form fields and click on “Update Totals” in order to calculate the shipping.
However, what if you only calculate shipping based on country? Or what if you only charge by zip code / postcode? In this case, you will need to hide the input fields you don’t need, and make UX better.
Your WooCommerce shopping cart might look messy when it contains many products. Your specific business, besides, might require you buy “Part 1” first and “Part 2” after.
A way to tidy up the WooCommerce shopping basket is – for example – to sort products based on their title, from A to Z. As usual, this can be done with a few lines of PHP, even if you have no clue about coding… feel free to copy, paste, and enjoy the snippet 🙂
Easy, yes. Unfortunately, the above only applies to products without variations (or the parent product only if it’s a variable product). So the question is: how do we add, save and display a custom field for each single variation?
Talking about UX optimization, the WooCommerce checkout is where you should focus most of your time. The checkout page of an ecommerce website is one of the main reasons for shopping cart abandonment – additional hidden charges, lack of trust, confusion and also, too many fields to fill out.
While working for a freelance client I had to “detect” the cart item categories in order to apply some PHP customization. So I thought – why not sharing with you how to display product categories in the Cart? This adds a nice touch to the Cart page 🙂