Category: WooCommerce Code Snippets

Here’s a collection of tips, snippets and articles to answer your biggest WooCommerce customization questions. You can use the search button above to refine your search, or alternatively click on one of these popular WooCommerce customization tags: Checkout page, Single product page, Cart pageYou might also want to visualize the WooCommerce “hooks” in case you’re a little more familiar with coding – here’s the link to the popular “Visual Hook Guide Series“, where you can find all the WooCommerce PHP actions in a user-friendly way :)If you wish to subscribe to our weekly WooCommerce email roundup, click here. Otherwise, enjoy the latest articles on this page!

WooCommerce: Add Content Below Single Product Gallery

If your products have multiple images and use the product gallery, you may have encountered issues when trying to add content below the gallery using the usual hook method.

If you’re familiar with WooCommerce customization and Single Product Page hooks, you’ve likely noticed that adding content under the images is no longer possible with the woocommerce_product_thumbnails hook.

This is because WooCommerce now includes a JavaScript-powered product gallery slider and lightbox on the single product page. Previously, the gallery was entirely managed by PHP.

As a result, the script fully replaces the default content, including that hook, making it more challenging to insert additional content.

Here’s a workaround. Be sure to test how it behaves on mobile, as this has only been tested on desktop—you may even want to hide it on smaller screens.

WooCommerce: How to Hide “Shipping Calculator” Fields @ Cart

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.

Well, here are some WooCommerce filters you can use from WooCommerce version 3.4 onwards to hide the fields you like (apart from country, which is mandatory).

WooCommerce: Detect if Current Category is a Subcategory

A client of mine had to style a WooCommerce product category page but ONLY if it was a subcategory. So I decided to add a “subcategory” class to the HTML body, so that they could target this in their custom CSS.

As usual, the PHP is quite easy: I check if the current page is a product category, then if the category has “parents” – and only in this case – add a body class. Pretty easy!

WooCommerce: Don’t Send Emails for Free Orders

There are times when you sell free products to give customers access to a membership, an online course, or for other reasons. In these cases, you might not want to send the “Order Completed” email or get the “New Order” transactional notification, so that you can avoid sending and receiving hundreds of emails.

Of course, you’d still want to keep the order emails for amounts above $0. Here’s the fix.

WooCommerce: Save “Terms & Conditions” Acceptance @ Checkout

When going legal… you need proof. Accepting the “Terms and Conditions” on the checkout is required in order to place an order – but how can you, WooCommerce store admin, “prove” that the Terms and Conditions were actually ticked by the customer?

One of the solutions might be to save such acceptance in the database and print the acceptance on the order admin (and maybe on the customer invoice as well). So, here’s a quick PHP snippet you can simply copy and paste in your child theme’s functions.php file in order to (1) save and (2) print the choice on the Single Order Admin page. Enjoy!

WooCommerce: Change Autofocus Field @ Checkout

If you decide to delete or reorder checkout fields, you probably also need to change the checkout field with “autofocus”. In plain English, this is the checkout field where the keyboard cursor goes automatically to on checkout page load (by default, this is the Billing First Name).

As usual, changing this default behavior is very easy, even if you’re not familiar with PHP. In the example below, I’m removing the autofocus from Billing First Name and assigning it to the Billing Email field instead.

Copy the snippet, test it on your development environment and only then push it to your live website. Enjoy! Continue reading WooCommerce: Change Autofocus Field @ Checkout

WooCommerce: Rename “Add to Cart” Button if Product Already @ Cart

When talking about UX, or for very specific WooCommerce shops, you might need to tell the user a product is already in the Cart before re-adding it or increasing its quantity from the Shop/Category/Loop and Single Product pages.

The “Add to Cart” button label comes with a filter (actually 2 filters, one for the Single Product page and another for the other pages such as Shop), so all we need to do is targeting those two hooks. We will “filter” the label text in case the product is already in the Cart, and return that back to WooCommerce. If this sounds like Japanese to you (hey, unless you’re from Japan!) don’t worry – simply copy/paste the snippet below as per below instructions.

Enjoy!

WooCommerce: Sort Cart Items Alphabetically A>Z

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 🙂

WooCommerce: Add Content Under “Place Order” Button @ Checkout

Adding content to the WooCommerce Classic Checkout page is very easy. First, identify the desired position for your content using my WooCommerce Checkout Visual Hook Guide) and then create a short PHP function to output the necessary content.

Adding content to the WooCommerce Checkout Block is even simpler. You can directly insert a paragraph block at your chosen location.

In this example, we’ll demonstrate how to add content below the “Place Order” button on both the WooCommerce Classic Checkout page and the WooCommerce Checkout Block. This can be particularly useful for displaying testimonials, badges, or reassuring text to reinforce customers’ purchasing decisions.

WooCommerce: Hide Related Products @ Single Product Page

Adding content to the WooCommerce Single Product Page is super easy – but what if you wish to remove / hide a default element?

Well, in this case it gets even easier. All you need to know is the default hook used by WooCommerce – so that you can remove it with one line of PHP in your functions.php. You can find a list of default hooks here: (https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/)

For example, how do we hide the Related Products? Well, here’s one line of code that will help you! Continue reading WooCommerce: Hide Related Products @ Single Product Page

WooCommerce: How to Create a Custom Product Type (Simple, Variable, etc.)

Ever wondered how you could add a new product type to the WooCommerce admin (on top of the default Simple, Variable, Grouped and External) – and conditionally display product data tabs such as “General”, “Shipping”, “Linked Products”, “Advanced” whenever this is selected?

Well, while I was coding this for a client I found a lot of literature online – but nothing really worked for the latest WooCommerce release, especially in regard to the JS that is necessary to hide/show the Product data tabs and options.

So, here’s the working fix!

WooCommerce: How to Merge My Account Tabs

The default WooCommerce My Account tabs are many. Sometimes, they’re too many. In this post, we will see how to “merge” two tabs into a single one.

For example, how can we move the content of the “Edit Address” tab into the “Edit Account” tab – and save users some navigation time?

WooCommerce: Display Order Delivery Date @ Checkout

Here’s how you can add a “calendar” field on the WooCommerce checkout page, let people decide the delivery date, and save this value in the order.

It took me ages to implement this for a client (it was much more complex, with available dates, different calendars based on different shipping zones, max weight per day, etc) so I thought of sharing the basic snippet with you! Enjoy 🙂

Cart reminder?