Blog

My Experience as a Lead Organizer of WordCamp Saint Petersburg

Create a Custom Product Tab

In this tutorial I will show you how to add a new tab on WooCommerce product page. We are going to do it without plugins because it is really easy. Well, it depends on what you are going to display inside your tab, but in general it is simple.

You may also be interested in how to remove default tabs or rename them or change their order.

Now let’s take a look at the screenshot what we are going to achieve in this tutorial.

woocommerce add product tab
The product tabs may look differently depending on a theme you’re using. I am using WooCommerce default theme – Storefront.

Change Product Tabs Order

The good news is that we do not have to deal with sorting arrays like we did with my account menu or admin columns for example.

Each of the tabs has its own priority value:

  • Description – 10,
  • Additional information – 20,
  • Reviews – 30.

Change Product Tab Titles and Headings

In this tutorial I will show you how to rename WooCommerce product tabs. Each tab has a title which is the link text you click in order to change the tab and also each tab has its <h2> heading which is displayed just before the tab content. By default appropriate titles and headings are the same. In this tutorial I will show you how to rename all of them.

Remove Product Tabs

In this tutorial I will show you different ways how you can remove product tabs from WooCommerce product pages.

Update Cart Automatically on Quantity Change

In this tutorial we are going to remove the “Update cart” button in WooCommerce and to do auto-update cart when quantity changes.

Also check my lightweight plugin for WooCommerce that allows to do the same.

Below on the screenshot you can see how it is going to look like:

Update WooCommerce cart automatically on quantity change
When you change any product quantity, the cart will be immediately updated.

The code we need in order to achieve that is quite simple, we just have a couple CSS lines and a couple JavaScript (jQuery) lines of code.

First of all we have to hide the button. And yes – we shouldn’t remove it, just to hide! Because it is connected to the trigger in JavaScript and if you remove it, nothing will ever happen on quantity change.

Billing and Shipping Address Fields

There are two type of fields in WooCommerce – billing and shipping fields (sorry for being so obvious). Some of the fields are presented in both of these categories, like a first name field or a country field. Some – may be presented in one of the categories only, like phone or email.

And now read carefully:

  • We can make changes in the fields using hook woocommerce_default_address_fields – in this case the changes will affect everything – both edit billing and shipping fields pages in “My account” and the Checkout page as well.
  • woocommerce_shipping_fields – the same, but affects only shipping fields
  • woocommerce_billing_fields – the same, but affects only billing fields
  • woocommerce_checkout_fields – affects only the checkout page, nothing else, this hook is already described in details in a separate tutorial.