WordPress.org

Ready to get started?Download WordPress

Forums

Styling the WooCommerce "Quantity Buttons" (4 posts)

  1. Kraim88
    Member
    Posted 6 months ago #

    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

  2. caseyfriday
    Member
    Posted 4 months 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:

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

  3. caseyfriday
    Member
    Posted 4 months 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
    Member
    Posted 4 months 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.

Reply

You must log in to post.

About this Topic