Here is a collection of tips, snippets, customizations and how-to tutorials to answer your biggest WooCommerce questions, curated by Rodolfo Melogli.
Please remember feedback is vital and that your social media shares, blog comments and WooWeekly newsletter sign ups help me understand which WooCommerce content works and which not, so that I can fine-tune my writing :)
Thank you in advance and enjoy!
Talking about UX optimization, the WooCommerce checkout is where you should focus most of your time. Shopping cart abandonment is a huge issue – think about hidden charges, lack of payment methods, checkout bugs and, also, too many checkout fields to fill out manually.
Today, we will see how to turn a checkout text field into a select dropdown. Why not let customers pick from a list instead of typing in? Enjoy!
Continue reading WooCommerce: Turn Checkout Field Into a Drop-down
This week’s snippet is about one of the most popular WooCommerce plugins on the WordPress repository: YITH WooCommerce Wishlist developed by YITHEMES.
With over 500,000+ active installations, you can probably understand why this is extremely on demand. Having a “wishlist” on your WooCommerce website is a great idea: customers can save their desired products and get back later to complete the purchase.
One of the most requested customizations of such plugin is to display the wishlist buttons on the shop (also called product archive or product loop) pages, under each product’s add to cart button. And the fix is extremely simple! Continue reading WooCommerce: Display YITH Wishlist Buttons @ Shop Page
When my blog readers become official Business Bloomer supporters, a few custom fields are conditionally displayed on the WooCommerce checkout (thanks to this snippet or this other snippet).
For example I show a custom user Twitter field. Thanks to the snippets, this is automatically saved into the WordPress User Profile page. But as I love to thank each Business Bloomer supporter on Twitter, I wanted to generate an additional email reminder (to myself, or to an assistant’s email address for example) with the Twitter username I should be thanking. You might need something like this if you need to send a new customer email address to a coworker. Or maybe a new address to a dropshipper…
So, how do you send a custom email with some user information, after such user completes the checkout and a new WooCommerce order is created? Continue reading WooCommerce: Send Checkout User Info to Email Recipient
Ecommerce is all about user experience, and making it easier for people to add to cart and checkout smoothly. Reducing the number of checkout fields is a great idea for example – as well as graphically communicating your number 1 objective: “please add to cart now!”.
So, how do you add an icon (or an HTML symbol) to the add to cart buttons in WooCommerce? This can be done in two ways – via CSS if you want to show Fontawesome Icons or via PHP if you prefer to use a simple HTML unicode symbol.
Let’s take a look at both methods!
Continue reading WooCommerce: Add an Icon to the Add to Cart Buttons
In older versions of WooCommerce free prices used to display as “FREE!” and products with empty prices were not publishable/purchasable. Now they’ve changed this around, but I still believe “FREE” looks much better than “$0.00”. It’s much more enticing, isn’t it?
Well, here’s how you restore the old WooCommerce functionality – as usual it’s as simple as using a PHP filter provided by WooCommerce and overriding the default behavior.
Continue reading WooCommerce: Display “FREE” Instead of $0.00 Price
Many WooCommerce websites don’t need the “Downloads” tab in the My Account page. Or maybe the “Addresses” tab needs to be renamed into something more user-friendly 🙂
Well, here are 2 super simple snippets to hide or rename any tabs you have in the My Account page, including custom tabs that are added by plugins such as Account Funds, Subscriptions, and so on.
Simply note down the URL of the tab e.g. “edit-account” (see image) and edit the snippets accordingly. Enjoy!
Continue reading WooCommerce: Hide or Rename a My Account Tab
We already saw how to check if a product category is in the cart, if a product ID is in the cart, and if a product ID is in the order… now it’s time to complete the series with the latest addition!
For this client, the scope was to do something on the “Thank You” page if a certain product category was purchased. For example, echo a “Thank you for becoming a member!” image in case the category “membership” was in the order.
Here’s the snippet, together with PHP comments so that you can understand how this is done. Enjoy!
Continue reading WooCommerce: Check if Product Category is in the Order
Sometimes, cool things don’t apply to certain businesses. Also, keeping the default WooCommerce behaviour might slow down your website, should you not need to use a specific functionality.
For example, I’m talking about the new “Featured Image Zoom”, introduced by WooCommerce a while ago. What if your customers don’t need this? How can you disable it?
Well, as usual, this can be done with a few PHP lines! Now go and disable all the stuff you don’t need 🙂
Continue reading WooCommerce: Disable Zoom, Slider & Lightbox @ Single Product
We already studied how to detect if a product ID is in the cart – but if you take a look at the comments many of you were asking how to detect product categories.
So, today we’ll do exactly that. You can disable shipping rates, payment gateways, you can print messages, you can apply coupon programmatically… there are lots of things you can do “conditionally”, based on whether a given product category is in the Cart or not.
Continue reading WooCommerce: Check if Product Category is in the Cart
This is a nice follow up from last week’s snippet “WooCommerce: Slashed Cart Subtotal if Coupon @ Cart“, where I showed how to display original/discounted cart total on the same totals table row.
This time, I want to let users know the original and discounted cart item (product) amount after a certain coupon is applied. Who knows – this might improve your Cart U/X 🙂 Continue reading WooCommerce: Display Cart Item Subtotal With Coupon Discount
This is a nice snippet to let users know what the original cart amount was by slashing the cart subtotal and showing the cart subtotal after discounts on the same line (Cart totals > subtotal).
You can then hide the coupon code line if you wish!
Continue reading WooCommerce: Slashed Cart Subtotal if Coupon @ Cart
In the past, WooCommerce Cart and Checkout pages used to show “$0.00” beside each free shipping rate. Now, this is gone and WooCommerce only shows the shipping rate name, without the 0 amount.
But given that many freelance clients requested this customization, today we’re bringing this back to life with just a few lines of PHP. Enjoy!
Continue reading WooCommerce: Display $0.00 Amount For Free Shipping Rates
You’re filing your tax returns and need to know how much you earned in each state… but then find out WooCommerce doesn’t give you this calculation by default within its reports!
Don’t worry – today I’ll share a quick snippet so that you can calculate the amount you need in a second. Feel free to change the year, the country and the states in the snippet.
Continue reading WooCommerce: Calculate Sales by State
Storefront is a free theme (with 100,000+ active install), developed & designed by WooCommerce Core Developers. I’ve put together a list of snippets so that you can quickly and easily customize your Storefront Homepage.
Continue reading Storefront Theme: How to Customize Homepage Layout
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 share with you how to display product categories in the Cart and Checkout? This adds a nice touch to those two vital pages, and prints a list of product categories under each cart item.
Also, I’m glad to introduce you to the amazing world of “wc_get_product_category_list“, a very handy WooCommerce PHP function!
Continue reading WooCommerce: Display Product Categories @ Cart & Checkout Pages