How to create a quantity field for WooCommerce shop pages
Adding the quantity field on the shop page for WooCommerce improves your website's user experience (UX) and influences customers to buy from your store. WooCommerce doesn't include that option by default. However, there's a simple solution for this - and that's what I'll show you in this tutorial.
WooCommerce store owners who sell products that customers usually buy in multiple quantities often ask this question: "How can I add the quantity field on the WooCommerce shop page?" That's precisely what we'll look at today.
In this step-by-step tutorial, I'll show you how to allow customers to select product quantities from your WooCommerce "shop" and "category" pages using the WooCommerce Express Shop Page plugin.
WooCommerce Express Shop Page is a lightweight and powerful WooCommerce plugin. It lets you easily add quantity fields and variation dropdowns to the main WooCommerce "shop" and "category" pages.
Don't worry, you won't have to add code snippets to your theme’s functions.php file. You don't need to know custom code either. The process is pretty straightforward, and the plugin is super easy to use for new and experienced WordPress users.
The end result will look like this:
Showing the quantity selector and variation fields on the WooCommerce shop page reduces the number of clicks to make a purchase. It's a key practice in e-commerce conversion optimization and helps make your customers' shopping experience faster and a thousand times easier.
First get the plugin, and then I'll show you how to add quantity fields to the WooCommerce shop page:
Limitations of the default WooCommerce shop page
WooCommerce is the preferred eCommerce platform for thousands of online stores. However, the default WooCommerce "shop" page is not ideal for all stores. Especially ones that sell products usually bought in multiple quantities and products with many variations. Here are the two key default WooCommerce "shop" page limitations:
- Customers can't change the quantity of the product: The add-to-cart button on the default WooCommerce shop page allows customers to quickly add the desired products to their cart as long as it's a single quantity. However, if they want to increase the quantity of the product, they have to click through to open up the individual product page.
- Customers can't select product variations: The same goes for variable products. Customers can't add them to their cart directly from the shop page either. The 'select options' button on the WooComerce shop page links to the individual product page. This forces customers to click through to the product page to choose their preferred options before selecting the add-to-cart button.
As a WooCommerce store owner, you can see how these limitations can be frustrating and time-consuming for customers. Especially if they want to buy multiple products or variations of a product and checkout quickly.
WooCommerce Express Shop Page solves these problems by adding the quantity picker and variation selector fields to your WooCommerce shop page. Not to mention, the plugin integrates flawlessly with any WordPress or WooCommerce theme. To make things even better, it inherits your theme's design elements. This ensures that it looks natural on your WordPress site and gives your customers a better shopping experience.
Why add a quantity field for WooCommerce shop pages?
Adding a quantity button to the shop page has several benefits. Here are the top ones:
- Improved customer convenience Customers will be able to quickly select custom quantities of the products they want to purchase before heading to the cart page without having to navigate to separate pages. This makes the purchasing process smoother and more convenient for customers.
- Increased opportunities for sales Customers are more likely to purchase products in multiple quantities when they can easily select custom quantities on the shop page and easily navigate to the cart page. This leads to increased sales and revenue for your eCommerce store.
- Higher average order value When customers are encouraged to buy multiple quantities of each product, their average order value increases. Again, this leads to increased sales and revenue for eCommerce stores.
- Better overall user experience Adding the quantity picker field to your WooCommerce shop page streamlines the shopping process and enhances the overall user experience (UX), giving customers a better overall buying experience.
What types of products benefit from quantity fields on the shop page?
Adding the quantity selector field to the WooCommerce shop page can benefit virtually any product type. Here are a few examples:
- Bulk products and wholesale stores: Stores that sell products in bulk are probably the most typical example of stores that need the quantity button on the shop page.
- Food and beverage items: Customers tend to buy multiple quantities of foodstuff and beverages, such as a six-pack of beer or a dozen cookies.
- Clothing and accessories with different sizes and colors: Apparel stores are another typical example. Customers usually order multiple quantities of the same product in various colors and sizes.
- Subscription box services: Quantity buttons are essential for stores that sell subscription box services, as customers often need to purchase boxes in several variants and sizes.
- Office supplies: It's quite common for customers to order multiple supplies of pens, pencils, paper, and other admin supplies.
- Home decor: Customers may want to order multiple quantities of home decor items, such as pillows, throw blankets, etc.
How the WooCommerce Express Shop Page plugin works
With WooCommerce Express Shop Page, you can easily add a quantity picker field and variation dropdown to the WooCommerce "shop" and "category" pages. This helps your customers get to the checkout page faster.
In this section, I'll walk you through the steps to add the quantity picker field to your WooCommerce shop and category pages using the plugin:
Step 1: Plugin installation and activation
- Purchase the plugin.
- Download the plugin's zip files to your computer.
- Log into your WordPress admin dashboard and navigate to "Plugins" → "Add New" → "Upload Plugin".
- Finally, select the plugin zip file, then click "Install" → "Activate".
Step 2: Plugin configuration
When you activate the plugin, the page automatically redirects to the setup wizard containing its configuration settings.
Alternatively, you can navigate to "WooCommerce" → "Settings" → "Products" → "Express shop page" to configure the plugin's settings.
- Enter your plugin license key from the order confirmation email.
- Tick the checkboxes for the "Quantity field" section, as appropriate:
- Display on shop page — This adds the quantity picker field to the main WooCommerce shop page.
- Display on category pages — This adds the quantity picker field to the "Category" pages as well as pages that use the archive-product.php template.
That's it! Now, head to the front-end view of your WordPress site. You can now view the new quantity picker field on your main WooCommerce shop page.
You can see that WooCommerce Express Shop Page streamlines the shopping experience for customers by allowing them to select their preferred product quantity directly on the shop page and checkout faster. Not to mention, reducing the number of clicks helps you increase your store's conversion rate and revenue.
Product category and tag archive pages
Apart from adding the quantity picker field to your shop page, WooCommerce Express Shop Page also works on any page of your store that lists products. For example, product category pages, tag archives, etc. Just select the 'Category page' option when you set up the plugin.
Support for product add-ons
In addition to adding the quantity picker field, you can further customize your WooCommerce store using the WooCommerce Product Options plugin.
WooCommerce Product Options adds product add-on functionality to your online store. It lets you easily create additional fields, such as checkboxes, radio buttons, date pickers, text fields, clickable images, measurement price calculator fields, etc., to add extra options to your WooCommerce product pages.
When you use Express Shop Page and Product Options together, you can show extra product options and add-ons on your WooCommerce product and shop pages. Here's a screenshot showing how these plugins transform the WooCommerce storefront:
Pairing the WooCommerce Shop Page and WooCommerce Product Options plugins helps increase your store's conversions and revenue. Not to mention, it improves the shopping experience for your customers.
Ready to add quantity fields to your WooCommerce shop page?
Adding the quantity field to your WooCommerce shop page is an excellent way to boost your store's sales, revenue, and user experience (UX).
WooCommerce Express Shop Page is the best plugin for adding the quantity field and product variation dropdown to your WooCommerce shop, category and archive-product.php template pages.
The WooCommerce Express Shop Page plugin is super easy to set up. Plus, you don't need to add custom code to your WordPress site. It integrates naturally with any WordPress and WooCommerce theme, so you can be sure it will look great on your store.
Get the WooCommerce Express Shop Page plugin today!