Hide or Remove the Quantity Field from WooCommerce Product Page

Looking for a way to hide or remove the quantity field from WooCommerce products in your WooCommerce store?

This post will guide you on how to remove the quantity field from the WooCommerce product page. This is an illustrated and detailed guide on how to hide or remove the quantity field from WooCommerce products.

WooCommerce is one of the best platforms that allow you to sell anything that you want.

This eCommerce solution has been widely used because it has many features and endless customization options.

This means that if you choose this option for your online store you can customize it to fit the requirements of your business model.

Moreover, users who are not that too technical can also do customization in WooCommerce without knowing the technical side of things. This can be done through plugins or the use of available code snippets.

Let us look at the simple steps you need to take to hide or remove the number of items field from WooCommerce Product.

This can be done when you want your customers to order or buy only one item at a time. This means that users cannot add or subtract the quantity.

a) Using the Sold Individually option that is found in the edit product page

When you enable this option, it means that users will only be allowed to buy one item in a single order. To do this, you need to follow these simple steps:

Steps to enable the Sold Individually option

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on This will open a list of all the products that you have in your store. However, for this option, you need to do it for an individual product.
3. On the Product Data section, click on inventory and you will see the Sold individually You need to click on the checkbox for you to add this feature as shown in the image below:
4. Remember to save the changes that you make.

b) Using hooks and filters to hide or remove the quantity when you already added many products.

This code will help you to hide or remove the quantity when there are lots of products. It is very simple to do this, as you need to follow these easy steps. You will only need a few minutes.

Steps to hide or remove the quantity when you already added many products.

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will hide or remove the quantity when you already added many products.
3. Add the following code to the PHP file and remember to save the changes that you make:

/** * @desc Remove in all product type */

function woo_remove_all_quantity_fields( $return, $product ) {

  return true;

}

add_filter( 'woocommerce_is_sold_individually', 'woo_remove_all_quantity_fields', 10, 2 );

4. To see the changes that you have made, simply try to add one product twice and you will see this notification on the top as shown below:

c) Hide or remove the quantity field from a particular type of product

This code makes it impossible to have a single product more than once in your cart. This means that when you click on the “Add to cart” button, it will trigger a warning. You will see this in practice if you follow these simple steps.

Steps to hide or remove the quantity field from a particular type of product

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will hide or remove the quantity field from a particular type of product
3. Add the following code to the PHP file and remember to save the changes that you make:

/** @Hide from different product type group */

function woo_remove_all_quantity_fields( $return, $product ) {

switch ( $product->product_type ) :

case "variable":

return true;

break;

case "grouped":

return true;

break;

case "external":

return true;

break;

default: // simple product type

return true;

break;

endswitch;

}

add_filter( 'woocommerce_is_sold_individually', 'woo_remove_all_quantity_fields', 10, 2 );

4. To see the changes that you have made, simply try to add one product twice and you will see this notification on the top as shown below:

d) Hide the WooCommerce quantity field using CSS

When viewing a product, you automatically see the quantity of the product as shown below:

However, you can hide this option by following these simple steps.

Steps to hide WooCommerce quantity field using CSS

1. Log into your WordPress site and access the Dashboard as the admin user.
2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will hide the WooCommerce quantity field using CSS.
3. Add the following code to the PHP file and remember to save the changes that you make:

/** @Hide quantity using CSS */

function hide_quantity_using_css() {

if ( is_product() ) {

?>

<style type="text/css">.quantity, .buttons_added { width:0; height:0; display: none; visibility: hidden; }</style>

<?php

}

}

add_action( 'wp_head', 'hide_quantity_using_css' );

4. To see the changes that you have made, simply refresh the page and you will see this:

Conclusion

In this post, we have highlighted how you can hide or remove product quantity. This can be done for a specific product or all the products.

We have also shown you how to completely disable this feature in your WooCommerce store. I hope you can now hide or remove the quantity field from your site.

Similar Articles

1. How to Sell Digital Products With WooCommerce
2. How to Sort WooCommerce Categories for Better User Experience