How to Display Quantity Selector and Product Variations on WooCommerce Shop/Archive Pages for Free

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:

  1. A quantity selector for simple products.
  2. 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:

  1. Most plugins only support quantity selectors for simple products on the shop page.
  2. Variable product functionality (e.g., displaying variation dropdowns) was locked behind a paywall.
  3. 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:

  1. Add a quantity selector for simple products directly to the shop/archive page.
  2. Display variation dropdowns alongside quantity selectors for variable products.
  3. Ensure seamless integration with WooCommerce’s AJAX add-to-cart functionality.

Let’s dive into the implementation.

Source Code

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.

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.

Key Points

  1. Variation Form: The custom form includes WooCommerce’s default variation-handling hooks.
  2. Quantity Selector: Added above the variation dropdown for better usability.
  3. 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:

Key Features of the Script

  1. Simple Products:
    • Updates the data-quantity attribute dynamically based on user input.
  2. 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:

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:

  1. Help others save money on premium plugins.
  2. Enable developers to customize their WooCommerce stores more effectively.
  3. 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.

Receive Updates about WordPress

Join over 10k subscribers

By submitting above, you agree to our privacy policy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Weekly Newsletter

Get notified of new and latest WordPress Updates!

Unsubscribe anytime you want.