Add Quantity Field to Shop Page in WooCommerce

The code in this download folder adds the quantity field to the shop page in WooCommerce. The quantity field is added after the price field and before the add to cart button. You can change the position using any WooCommerce shop page hook. Includes support for ajax.

The code also includes a solution to add the quantity text vertically aligned with the quantity field.

Demo Video

THe video shows the quantity field added above the add to cart button on the shop page.

Note : You can simply change the conditional tag from is_shop to anything else like is_product_category() to display or remove the quantity field from display on different shop archive page types.

Quantity Field Inline With Add to Cart Button

Use this CSS instead to add the quantity field inline with the add to cart button on shop pages in WooCommerce.

.cart {
    display: inline-flex;
    align-items: center;
}

.cart .quantity {
    margin-right: 10px; 
}

.cart input[type=number] {
    width: 5em;
}

Installation

There’s 2 steps :

1. Step 1 : Copy and paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions file or custom functionality/code snippets plugin.
2. Step 2 : Upload the folder named css to your child theme folder and clear caching.