Styling the WooCommerce "Quantity Buttons" (5 posts)

  1. Kraim88
    Posted 1 year ago #


    I'm making my own the for the Woocommerce plugin with the Zurb Foundation Framework CSS.

    I am looking for a way to styling the "quantity buttons".
    The woocommerce plugin generate this code HTML :

    <div class="quantity buttons_added">
    <input class="minus" type="button" value="-">
    <input class="input-text qty text" type="number" size="4" title="Qté" value="1" name="quantity" min="1" step="1">
    <input class="plus" type="button" value="+">

    But I want to override it with my own HTML code.

    The only code I found it is this one:

    <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
    			 		if ( ! $product->is_sold_individually() )
    			 			woocommerce_quantity_input( array(
    			 				'min_value' => apply_filters( 'woocommerce_quantity_input_min', 1, $product ),
    			 				'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->backorders_allowed() ? '' : $product->get_stock_quantity(), $product )
    			 			) );

    But there are no HTML in there. Only PHP.
    Where can I find the HTML code to put my own CSS class?

    Thanks for your help.


  2. caseyfriday
    Posted 1 year ago #

    You can find it in wp-content/plugins/woocommerce/templates/global/quantity-input.php. You just need to add a folder hierarchy within your theme starting with 'woocommerce' in the aforementioned folder tree, and you'll be good to go.

    Edit: Sorry, it appears the buttons are not in that file. You can edit it by creating a woocommerce_quantity_input function, as seen in this tutorial:


  3. caseyfriday
    Posted 1 year ago #

    Actually, what I'm ending up doing is styling them myself. It requires quite a bit of overriding, but you can find the original button styles in /woocommerce/assets/css/woocommerce.less starting on line 693. Just take a look at what WooCommerce is doing, and override as necessary in your own styles.

  4. Kraim88
    Posted 1 year ago #

    Ok thanks. I gave up to find a solution to my problem.
    I was too difficult to override.

    Thanks again for your solution. It would help me in my next project.

  5. akakacey
    Posted 1 year ago #

    I updated my woocommerce plugin and now the quantity button is not viewable, I thought maybe its white text on white background? I tried adding in some custom css to overwrite and have been unsuccessful.

    Can someone help me with the correct css that needs to be added to overwrite the output of the color of the quantity so it shows? Currently you cannot see how many products your adding to the cart.


    thanks for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic