Add label to quantity woocommerce shop page

[monger]

I am trying to add text label on shop page for quantity field

This is what has been placed in functions.php child theme

add_action( ‘init’, ‘webroom_quantity_handler’ );
add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘webroom_add_quantity_fields’, 10, 2 );
add_action( ‘woocommerce_before_add_to_cart_quantity’, ‘wp_echo_qty_front_add_cart’ );

The label shows on single product page but not on shop page. Also would like to know how to make selection arrows visable

[tristup]

Hi George,

Thanks for reaching out.
To add the quantity with the label, please add the following code into your child theme funstions.php.

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) 
{
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
    $html .= '<label>Quantity';
    $html .= woocommerce_quantity_input( array(), $product, false );
    $html.='</label>';
        $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}

You may need to add a few custom CSS to adjust the style as per your website.
Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[monger]

@tristup

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) 
{
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
    $html .= '<label>Quantity';
    $html .= woocommerce_quantity_input( array(), $product, false );
    $html.='</label>';
        $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}

This code worked perfectly thanks so much

[monger]

Is there a way to show the selector arrows or is that a browser issue?

[christian]

Hey George,

That is a browser default. You will need more custom code to style Select HTML element. You will need to consult with a developer for that or signup to One where we can answer customization questions.

Thanks.