Add Quantity Label Before Quantity field

Would you like to add an Add quantity label before quantity field in woocommerce?

Hah… that’s easy,

Add the following snippet in your theme’s functions.php file make sure you are using a child theme or use code snippet plugin.

add_action( 'woocommerce_before_add_to_cart_quantity', 'wp_echo_qty_front_add_cart' );
 
function wp_echo_qty_front_add_cart() {
 echo '<div class="qty">Quantity </div>'; 
}

After you add the above snippet the label may appear on top of Quantity field instead right next to it, but you can fix that with a little bit of CSS.

Something like this will do.

div.qty {
    float: left;
    padding: 10px;
}

Where to add the code snippet

You need to add this code to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code snippets plugin.

Please don’t add custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update the theme.

Why add Quantity Label in front of Quantity field?

There is no direct benefit of adding ‘Quantity’ label on the single product page. It’s all about what little things you care about and think can make a difference in the overall design of your website.

Though it’s not necessary but could look cook in many theme design scenarios. So, it’s up to you to decide if it will be helpful for your users or look good on your product page.

---

If you liked this article, then please follow us on Facebook for more WooCommerce and WordPress tutorials. You can also find us on Twitter.

What are your thoughts, Do you think to add Quantity label before the quantity field is a good idea or not?