Add Quantity Inputs to Simple Products on the WooCommerce Shop Page

Please consider leaving a donation if you appreciate this information. Lightning network now available

- +

Donate Bitcoin

In an earlier post I provided a code snippet to allow you to add variation selections to products on the WooCommerce Shop page. That snippet also adds a quantity input to simple products as well as variable products. What if you only want to add the quantity input to simple products? Oddly, doing that is a bit more tricky and involved. Since this customization will be conditional to simple products, then there needs to be conditional logic. The easiest way that I can think of to do this is through our good friend template overrides. There’s some documentation about how that works here: Template Structure + overriding templates via a theme.

Just to be clear, the template override that I am about to introduce will change this:

This is the default shop page output

Into this:

This is a screen shot of what the template override does

The template that you will be overriding is called content-product.php and its default location is wp-content/plugins/woocommerce/templates – to override it, copy it to wp-content/themes/YOUR-THEME/woocommerce/ – from there you can make the changes needed. Your theme may already be overriding that file, so be cautious here, if there already is an override in place don’t overwrite it and take care when editing it. I can’t possibly know all of the different customizations that may have been done to that file. The edits I have done are applicable to the default template, you may need to adjust to fit the customizations already in place.

Essentially, the default template hooks in to the action called woocommerce_after_shop_loop_item and adds either the “Add to cart” button or “Select Options” (or others, depending on what product types you have). I have added conditional logic to change what is hooked. If it is a simple product, I will use the woocommerce_template_single_add_to_cart as a callback rather than the default woocommerce_template_loop_add_to_cart if the product is a simple product. You can see the changes I have made beginning on line 75 here:

You will probably need to use some custom CSS to make this look a little better. The following will work in most cases, but may need to be adjusted for your theme. This is an example only:

If you would like to download the template file, Register or Login

Please consider leaving a donation if you appreciate this information. Lightning network now available

- +

Donate Bitcoin