A frequent question we receive from WooCommerce store owners is “how do I add a quantity field on the shop page for WooCommerce”?
In this article, we are going to show you the step-by-step process (and give you the code snippet) on how to easily accomplish this task.
Now you’ll be able to give your shoppers an easy way to add multiple items of the same product right on the shop page of your eCommerce store.
Table of Contents
Install & activate the Code Snippets WordPress Plugin
The Code Snippets WordPress plugin is a super simple way to run code on your WordPress website.
With this plugin, you will no longer need to add custom code to your theme’s functions.php file, which makes it way easier to add functionality to your website.
What is a code snippet?
A code snippet is a small chunk of code that you can use to add functionality to your WordPress website. The Code Snippets plugin gives you an easy-to-use interface to add different snippets, run them on your website, and manage them easily.
Create a new code snippet called “Add Quantity Field On Shop Page for WooCommerce”
Once you have the Code Snippets WordPress plugin installed and activated, open the plugin from the left-side menu, and add a new snippet.
Once you have the new code snippet created, we are going to add our desired PHP function (PHP is the coding language used to build WordPress).
Copy & paste this PHP code into the snippet
Copy this code to your computer’s clipboard and paste it into your snippet.
/**
* Add Quantity Field On Shop Page for WooCommerce.
*/
function custom_quantity_field_archive() {
$product = wc_get_product( get_the_ID() );
if ( ! $product->is_sold_individually() && 'variable' != $product->product_type && $product->is_purchasable() ) {
woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
}
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_quantity_field_archive', 15, 9 );
function custom_add_to_cart_quantity_handler() {
wc_enqueue_js( '
jQuery( "body" ).on( "click", ".quantity input", function() {
return false;
});
jQuery( "body" ).on( "change input", ".quantity .qty", function() {
var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
// For AJAX add-to-cart actions
add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );
// For non-AJAX add-to-cart actions
add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
});
' );
}
add_action( 'init', 'custom_add_to_cart_quantity_handler' );
Save & activate the snippet, then test
You should be all set now!
Now that you have the code function running on your website, your store page should have the quantity picker next to the add to cart buttons!
If you have any questions and/or comments, please leave a comment below.
Additionally, if you don’t have the time or resources to build, manage, and grow your website, learn about Chairlift’s outsourced web design & development services. We help businesses grow better and faster online with a simple membership.
