Styling the WooCommerce "Quantity Buttons"

  • Hy,

    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="+">
</div>

    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' ); ?>

			 	<?php
			 		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.

    Kevin

Viewing 4 replies - 1 through 4 (of 4 total)

  • 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:

    https://gerhardpotgieter.com/2013/09/09/woocommerce-product-quantity-dropdown/

    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.

    Thread Starter Kraim88

    (@kraim88)

    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.

    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.

    page:
    https://upursleeve.com/product/geris-hamburgers-instant-services-freshly-made

    thanks for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Styling the WooCommerce "Quantity Buttons"’ is closed to new replies.