WooCommerce

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.

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.

How to Add Extra Fields to Registration Form

By default WooCommerce registration form is kind of minimal and contains only Email address field. Well, depending on the shop settings there also could be privacy policy text or a password field.

In this tutorial I will show how you how to add a phone number field with validation and mask.

how to add phone number field in woocommerce registration form

My Account Fields

In this tutorial I would like to dive deep into the topic of input fields in My Account > Account details section.

I am going to discuss with you what is possible to do with these fields, we will try to remove them, to make required or not required and even add our custom field there.

Our goal is to have Account Details page to look like:

Add a field to WooCommerce edit account page
If you remember how the default Account Details page looks like, you will notice that I removed Last name and Display name fields and also added a Phone field.

How to Remove Add to Cart Button

Before answering this question, let’s answer another question “why should we remove add to cart or read more buttons anyway?”

There are could be different situations:

  • Maybe it is just a part of an idea of your website design – so you would like to hide add to cart buttons only on shop page.
  • Maybe you would like to disable add to cart buttons everywhere – both in archive and single product pages, in that case you’re turning your shop into a catalog.
  • Or probably you may want to remove add to cart button for specific products only.

Make Products Non-Purchasable

When you would like to turn your WooCommerce shop into a catalog for example, there could be different options how to do it. Or maybe you would like to make non-purchasable just some specific products – I don’t know, but I hope this tutorial will cover everything.

In the first chapter I will show how you can do it just in your WooCommerce admin, but then we will dive deep into using woocommerce_is_purchasable filter hook and then play with some conditions.

It is worth mentioning that the ways described here are the most correct ones, because, if let’s say, you just removed “Add to Cart” button (I hope not with CSS at least), the products will still be available for purchase in some way.