WooCommerce Blog: Tips, PHP Snippets, Q&A, Plugin & Theme Reviews

WooCommerce: Exclude Hidden Products from Mini-Cart Counter

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

WooCommerce + Storefront Theme: Hide Homepage Title

The Storefront theme displays the homepage H1 title by default, no matter if you use the “Default” or the “Homepage” page template.

Of course, you could do it via CSS, with a simple “display:none”. Even better, you could completely avoid loading the homepage title by using PHP (SEOs out there: better not to load an H1 than hiding it via CSS, right?).

So, how do they do it? Here’s the quick fix!

WooCommerce + Jetpack: Exclude Image From “Lazy Load”

If you don’t use an “Image Lazy Load” plugin, it’s time you install one. And if you happen to pick Jetpack’s free Lazy Load module, you probably did the right thing.

However, since I installed Jetpack Lazy Load, I noticed a little “jump” in my Storefront theme header section, where in fact there is an image – my Business Bloomer logo. The same might apply to any WooCommerce image: a category thumbnail, a single product featured image, a cart icon in the header, a homepage hero image, and so on.

Thankfully Jetpack has a useful “filter” you can tap into in order to exclude image classes from lazy loading (yes, I found this out today, it’s not that I know everything!). So, here’s the fix. Enjoy 🙂

WooCommerce: Display “In Stock” Products First @ Shop

We’ve already seen how to add a custom “Product Sorting” option to the “Default Sorting” dropdown in the WooCommerce Shop page.

The task I was presented with, however, was to display items based on a custom “meta key”. Now, if you have no idea what a “meta key” is, don’t worry too much. For example, “_stock_status” is one of these keys, and therefore you can sort products by that key as opposed to product name, date, price, etc.

So, let’s see how to show all out of stock products as last in the shop, category and loop pages. As usual, simply copy/paste this little plugin in your functions.php and you’ll get the wanted result 🙂

WooCommerce: Add Checkout Fees Based on Custom Radio Button

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.

WooCommerce: Display Global Short Description When Empty @ Single Product Page

The WooCommerce product short description is that piece of content that appears on the right hand side of the featured image above the add to cart button. This is, of course, unless you forgot to enter the short description under Product > Edit Product > Short Description!

In case you forgot to enter it or you want to display a global short description, here’s a quick PHP snippet for you. Enjoy!

WooCommerce: Add Column to Orders Table @ WP Dashboard

The WooCommerce Orders Table, which can be found under WP Dashboard > WooCommerce > Orders, provides us with 7 default columns: Order Number – Date – Status – Bill To – Ship To – Total – Actions. This is used by shop managers to have an overview of all orders, before eventually clicking on a specific one.

So the question is: how can we display additional columns to that same orders table, so that we can immediately visualize an order custom field, a specific product contained in the order, or anything order-related that can be “calculated” once we have access to the $order variable?

WooCommerce: Hide Checkout Fields if Virtual Product @ Cart

If you sell downloadable/virtual products and need to simplify your WooCommerce checkout when such product type is in the Cart, you’ve come to the right place!

Here’s a simple snippet, as well as a handy mini-plugin, that checks if there are only “virtual” products in the Cart and hides all the billing fields and order notes (except name and email).

The mini-plugin also allows you to enable this for free virtual orders only, and to move the relevant billing fields under a toggle instead of removing them all together.

Enjoy!

WooCommerce: Display Custom Filters @ WP Dashboard > Products

If you go to WordPress Dashboard > Products you will find default product admin filters such as “Select a category”, “Filter by product type”, “Filter by stock status”. What if you want to add more custom filters to let your shop managers find products easily?

For example, you could add “Filter by product tag” (“product tags” are one of the two default WooCommerce “taxonomies” together with “product categories”). Or, if you use custom taxonomies such as product brands, you could add a “Filter by product brand” dropdown.

Thankfully this is super easy – and here comes the proof 🙂

WooCommerce: How to Add a Custom Order Status

All WooCommerce orders go to either “processing“, “completed“, “on-hold” and other default order statuses based on the payment method and product type.

Sometimes these statuses are not enough. For example, you might need to mark certain orders in a different way for tracking, filtering, exporting purposes. Or you might want to disable default emails by bypassing the default order status changes.

Either way, creating a custom order status is quite easy. And today we’ll see which PHP snippet you need in order to make this work!

WooCommerce: Get Currently Selected Variation ID

We’ve seen a lot of PHP so far on Business Bloomer – WooCommerce after all is a bunch of PHP files! However, sometimes PHP is just not enough, mostly when you need to work with variable products and the “currently selected variation”.

In fact, WooCommerce uses jQuery (a JavaScript Library) to handle variations on the frontend and show conditional content (variation price, description, add to cart) based on the dropdown selection. So, to detect the current variation ID we must use jQuery as well. Here’s how!

WooCommerce: Remove Mini-Cart Widget Dropdown

Less is more (sometimes). On this same website, I’m already forcing max 1 product in the Cart and automatically redirecting users to Checkout upon add to Cart. On top of that, I’ve disabled WooCommerce cart fragments for performance reasons.

As a result, I definitely don’t need the whole “Mini-Cart Widget Dropdown Content”. To test, try to “hover” onto the shopping cart icon on the top right, and you’ll notice there is no cart dropdown.

Well, this is how it’s done – I love when a complex thing is fixed with one simple line of PHP!

WooCommerce: Rename “Place Order” Button @ Checkout

The “Place Order” button is the call to action you want ALL customers to take, right? Well, changing its label to a more specific, custom message could mean a small increase in sales conversion.

Thankfully, you can try this with as low as 4 lines of PHP, even if you don’t know coding. Just copy and paste the snippet by following the instructions below and give your unique store a unique checkout message 🙂

WooCommerce: Add Product to Cart When Visiting a Specific Page

We’ve already seen how to add a product to cart automatically when a user enters your website. However, I needed a different functionality on this same website, and specifically I wanted a product added to cart only when a user like you visits a specific WordPress page ID.

If you wish to test, go to my free video tutorial page called “How to Customize the WooCommerce Single Product Page“. As soon as the page loads a product is magically added to cart, so that the WooCommerce Checkout on that same page is populated with the hidden item. If you go to my Cart page right after visiting that landing page, you can verify there is a product in there.

So, how did I do it? Continue reading WooCommerce: Add Product to Cart When Visiting a Specific Page