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

WooCommerce: How to Create a Custom Product Type

Ever wondered how you could add a new product type to WooCommerce admin (on top of the default Simple, Variable, Grouped and External)?

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.

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 🙂

WooCommerce: Display Custom Product Badge (Conditionally)

There are many plugins out there to show custom badges, notices, messages… but as usual a few lines of PHP can help you achieve the same result!

Today we take a look at how to add a checkbox to the product edit page, so that you can display a conditional badge based on whether the checkbox is checked or not.

Have fun 🙂 Continue reading WooCommerce: Display Custom Product Badge (Conditionally)

WooCommerce: Display Prices as “Was $$$ – Now $$$ – Save $$$”

Many retailers use this price tag strategy quite successfully. And displaying the amount of savings can increase your ecommerce store conversion rate as well 🙂

So, turning simple product default pricing from “~~$30~~ $20″ to “Was $30 – Now $20 – Save $10” is quite easy. With a little CSS you can also style the display and customize it according to your brand guidelines! Continue reading WooCommerce: Display Prices as “Was $$$ – Now $$$ – Save $$$”

WooCommerce: Add Custom Field to Product Variations

Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page.

Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable product). So the question is: how do we add, save and display a custom field for each single variation?

WooCommerce: Automatically Update Cart on Quantity Change

There is a lot of literature online that solves this UX problem – so in this article let’s see if I can give you a simplified, working, updated version.

So, do you hate the “Update Cart” button too? Yes, the one you have to click after you update the quantity of a product in the cart…

Well, you’re in the right place: a simple PHP function, two lines of JQuery, one line of CSS (or a mini-plugin) and the result is pretty straight forward!

WooCommerce: Display Out of Stock Products (Shortcode)

A client of mine wanted to show out of stock products on a separate page – so I coded a simple shortcode for you all!

You can use this shortcode for different goals. For example, you might want to display what products you’ve sold to enhance customer trust / social proof.

So let’s see (1) how to create a shortcode and (2) how to take advantage of the existing [products] WooCommerce shortcode and its “ids” parameter to pass just those product IDs that are out of stock!

Storefront Theme: How to Install and Configure It

Storefront is one of the most flexible and extensible theme when it comes to launching a WooCommerce store using WordPress.

Due to its clean code architecture it became hugely popular among users and currently more than 100,000 online stores uses Storefront as their WordPress theme.

Storefront Theme: How To Add A Full Width Slider

Storefront is great theme for launching an online store. It’s getting popular due to its simplicity and compatibility with WooCommerce. But one of the major drawback is it does not have a built-in slider section. Since it’s one of the most requested features of support forums in this tutorial we will demonstrate how to add a full-width slider to the StoreFront homepage using Storefront Add Slider plugin.

Using Storefront Add Slider you can add any slider shortcode (Meta Slider, Smart Slider 3, Soliloquy, Revolution Slider, LayerSlider shortcode) to your Storefront theme Frontpage. Let’s see how we can add a full width homepage slider. We will use the Meta Slider but the same process will apply to any slider plugin.

WooCommerce: “Is This a Gift?” Checkbox @ Single Product Page

A client of mine asked me to code a checkbox on the single product page called “Is this a gift?”. They noticed that their customers who want to gift the product to a friend get confused with the “Shipping to a different address” form in the WooCommerce checkout.

So, what about renaming “Shipping to a different address” into “Who is this gift for?” if a “gift” is in the cart? Well, this snippet does just that and you can adapt it / customize it to your specific case. Continue reading WooCommerce: “Is This a Gift?” Checkbox @ Single Product Page

WooCommerce: Turn Checkout Field Into a Drop-down

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!

WooCommerce: Display YITH Wishlist Buttons @ Shop Page

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

WooCommerce: Send Checkout User Info to Email Recipient

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

WooCommerce: Add an Icon to the Add to Cart Buttons

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!

WooCommerce: Display “FREE” Instead of $0.00 Price

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.

WooCommerce: Hide or Rename a My Account Tab

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!

WooCommerce: Check if Product Category is in the Order

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!

WooCommerce: Disable Zoom, Slider & Lightbox @ Single Product

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 🙂

WooCommerce: Check if Product Category is in the Cart

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.