How to add WooCommerce product quantity option in product listing page – Learn WordPress from a to z

How to add WooCommerce product quantity option in product listing pages

Some of you have asked me about adding the WooCommerce product quantity option. Therefore, today I am going to share some code snippets you can try. Be aware though that there are themes that override the WooCommerce layout and as such there is no solution that might not work for you.

The code snippets you are about to use will go to your sub-theme’s functions.php file, or better yet, use the Code Snippets plugin for it.

It only works with simple products, not with variable products.

How to add WooCommerce product quantity option in Blocksy theme product listing pages

I will give you three different code snippets but the one that works best for the Blocksy theme is the one below.

add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $html, $product ) {
	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
		$html = wc_get_template_html( 'single-product/add-to-cart/simple.php' );
	}
	return $html;
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span>
</div>

It’s better with product listing page type 1 though (look in Customizer >> WooCommerce >> Product catalog). This is the final result.

How to add WooCommerce product quantity option in Kadence theme product listing pages

Now this gets interesting because the code above works with the Kadence theme but after clicking the “add to cart” button it redirects you to the single product page.

You probably won’t like this solution, so I’ll use a different code. If you want to add WooCommerce product quantity option in Kadence theme product listing pages then use this snippet here below.

add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // Embedding the quantity field to Ajax add to cart button
        $html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
            woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product-&gt;add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product-&gt;get_id() ),
            esc_attr( $product-&gt;get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            esc_html( $product-&gt;add_to_cart_text() )
        );
    }
    return $html;
}

add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
    ?&gt;
    <?php }
<div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span><span>39</span><span>40</span><span>41</span><span>42</span><span>43</span><span>44</span><span>45</span>