As a WordPress developer, I often come across unique client requirements that push me to explore beyond the standard features of WooCommerce. Recently, a client wanted their WooCommerce shop page to display:
- A quantity selector for simple products.
- A dropdown for product variations alongside the quantity selector for variable products.
While this may seem like a common feature, achieving it without plugins or with free plugins can be surprisingly challenging. Most of the available plugins only provide quantity selectors for simple products, while offering support for variable products in their premium versions, often costing upwards of $13/month.
For this project, my client needed me to replicate the design of a competitor’s shop page, which included these features. The competitor was paying for a premium solution, but I decided to achieve the same functionality using custom code—completely free of cost. If you’re facing a similar challenge, this article will guide you step-by-step to implement a quantity selector and product variations dropdown on your WooCommerce shop or archive page using custom code.
Out of the box, WooCommerce does not display quantity selectors or variation dropdowns on shop or archive pages. This can be a limitation if your client or project requires users to quickly select quantities or variations before adding products to their cart.
Related: How to Create a Custom Theme WordPress using HTML5
I explored several plugins, but here’s what I found:
- Most plugins only support quantity selectors for simple products on the shop page.
- Variable product functionality (e.g., displaying variation dropdowns) was locked behind a paywall.
- Even the paid versions often lacked full customization options to match the required design.
Instead of relying on paid solutions, I decided to write custom code to implement this feature—and the results were impressive. Not only did I save my client from recurring plugin costs, but I also created a reusable solution for future projects.
By writing custom code, we can:
- Add a quantity selector for simple products directly to the shop/archive page.
- Display variation dropdowns alongside quantity selectors for variable products.
- Ensure seamless integration with WooCommerce’s AJAX add-to-cart functionality.
Let’s dive into the implementation.
Source Code
// Add quantity selector for both simple and variable products on archive pages
add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $html, $product ) {
if ( $product->is_purchasable() && $product->is_in_stock() ) {
// Handle Simple Products
if ( $product->is_type( 'simple' ) && ! $product->is_sold_individually() ) {
$class = implode( ' ', array_filter( array(
'button',
'product_type_' . $product->get_type(),
'add_to_cart_button',
$product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
) ) );
// Add quantity input to simple product
$html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( $class ),
esc_html( $product->add_to_cart_text() )
);
}
// Handle Variable Products
if ( $product->is_type( 'variable' ) ) {
$html = '<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="' . esc_attr( $product->get_id() ) . '">';
$html .= woocommerce_quantity_input( array(), $product, false );
// Get variations dropdown
$html .= woocommerce_variable_add_to_cart();
// Add the add to cart button
$html .= '<button type="submit" class="button add_to_cart_button">Add to cart</button>';
$html .= '</form>';
}
}
return $html;
}
// Enqueue script to handle quantity fields for both simple and variable products
add_action( 'wp_footer', 'archives_quantity_fields_script' );
function archives_quantity_fields_script() {
?>
<script type='text/javascript'>
jQuery(function($) {
// Update data-quantity for simple products
$(document.body).on('click input', 'input.qty', function() {
$(this).closest('form').find('a.ajax_add_to_cart').attr('data-quantity', $(this).val());
$(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
});
// Handle variable product add-to-cart
$(document.body).on('submit', '.variations_form.cart', function(e) {
e.preventDefault();
var form = $(this);
var product_id = form.data('product_id');
var quantity = form.find('input.qty').val();
var variation_id = form.find('select').val(); // Adjust if using multiple variations
// Perform AJAX add-to-cart
$.ajax({
url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
type: 'POST',
data: {
product_id: product_id,
quantity: quantity,
variation_id: variation_id
},
success: function(response) {
// Optionally handle success (update cart fragments, show messages, etc.)
$(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, form]);
},
error: function() {
alert('There was an issue adding the product to the cart.');
}
});
});
});
</script>
<?php
}
Step By Step Guide: Display Quantity Selector and Product Variations on Shop/ Category Page
Step 1: Add Quantity Selector for Simple Products
First, we’ll modify the “Add to Cart” button for simple products to include a quantity selector. This is achieved using the woocommerce_loop_add_to_cart_link
filter.
add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $html, $product ) {
if ( $product->is_purchasable() && $product->is_in_stock() ) {
if ( $product->is_type( 'simple' ) && ! $product->is_sold_individually() ) {
$class = implode( ' ', array_filter( array(
'button',
'product_type_' . $product->get_type(),
'add_to_cart_button',
$product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
) ) );
// Quantity input for simple product
$html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="1" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( $class ),
esc_html( $product->add_to_cart_text() )
);
}
}
return $html;
}
How It Works
woocommerce_loop_add_to_cart_link
: This filter allows us to modify the HTML for the “Add to Cart” button on shop pages.woocommerce_quantity_input()
: Generates the quantity input field for simple products.- The modified HTML includes the quantity selector and dynamically updates the
data-quantity
attribute.
Step 2: Add Variation Dropdowns for Variable Products
For variable products, we need to display a dropdown for selecting variations alongside the quantity selector. Since WooCommerce doesn’t support this by default, we’ll create a custom form for variable products.
if ( $product->is_type( 'variable' ) ) {
ob_start();
?>
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="<?php echo esc_attr( $product->get_id() ); ?>">
<?php
woocommerce_quantity_input( array(), $product, false );
do_action( 'woocommerce_before_add_to_cart_button' );
?>
<button type="submit" class="button add_to_cart_button">Add to cart</button>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
</form>
<?php
$html = ob_get_clean();
}
Key Points
- Variation Form: The custom form includes WooCommerce’s default variation-handling hooks.
- Quantity Selector: Added above the variation dropdown for better usability.
- Submit Button: A custom “Add to Cart” button handles the form submission.
Related: WooCommerce Themes Development: A Complete Guide [2025]
Step 3: Handle Quantity and Variations with AJAX
To ensure smooth functionality, we’ll use AJAX to add products (including selected quantities and variations) to the cart. Here’s the JavaScript code:
add_action( 'wp_footer', 'archives_quantity_fields_script' );
function archives_quantity_fields_script() {
?>
<script type='text/javascript'>
jQuery(function($) {
// Update data-quantity for simple products
$(document.body).on('input change', 'input.qty', function() {
var qty = $(this).val();
$(this).closest('.product').find('a.ajax_add_to_cart').data('quantity', qty);
});
// Handle variable product form submission
$(document.body).on('submit', '.variations_form.cart', function(e) {
e.preventDefault();
var $form = $(this);
var product_id = $form.data('product_id');
var quantity = $form.find('input.qty').val();
var variation_data = $form.serialize();
// Perform AJAX request
$.ajax({
url: wc_add_to_cart_params.wc_ajax_url.replace('%%endpoint%%', 'add_to_cart'),
method: 'POST',
data: variation_data + '&quantity=' + quantity + '&product_id=' + product_id,
success: function(response) {
$(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $form]);
},
error: function() {
alert('Failed to add the product to the cart.');
}
});
});
});
</script>
<?php
}
Key Features of the Script
- Simple Products:
- Updates the
data-quantity
attribute dynamically based on user input.
- Updates the
- Variable Products:
- Handles form submissions via AJAX.
- Ensures selected variations and quantities are passed correctly to the server.
Related: How to Create WordPress Themes to Sell on ThemeForest in 2025
Step 4: Styling and Customization
To match the design requirements, you may need to style the quantity selectors and variation forms. Use custom CSS to ensure they integrate seamlessly with your theme.
Example:
.variations_form.cart {
display: flex;
flex-direction: column;
gap: 10px;
}
.quantity input {
width: 60px;
text-align: center;
}
.add_to_cart_button {
background-color: #0071a1;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
}
.add_to_cart_button:hover {
background-color: #005580;
}
Final Result
With this solution, I successfully:
- Added quantity selectors and variation dropdowns to the shop/archive page.
- Matched the competitor’s design—for free.
- Avoided using paid plugins, saving my client $13/month in recurring costs.
Why Share This?
I realized that many developers and store owners face similar challenges. By sharing this custom solution, I hope to:
- Help others save money on premium plugins.
- Enable developers to customize their WooCommerce stores more effectively.
- Promote the idea of solving problems with custom code rather than relying solely on plugins.
If you find this helpful, feel free to leave a comment or share your feedback. Together, we can create more efficient and cost-effective WooCommerce stores.
Happy coding! 😊
If you have any queries in your mind or need to discuss any project with me related to web development and content writing, I will be available to help you out.
Contact Me at saqlain@webmarkpro.com or Linkedin.