WooCommerce comes with various fields for storing product data. There's the product name, long and short description, price, images, stock, weight, dimensions, etc. But what happens if you want to store and display extra product data, such as WooCommerce custom taxonomies?
In this article, I walk you through creating WooCommerce custom taxonomies for products. We'll look at the difference between WooCommerce custom fields and taxonomies. Also, we'll consider the different types of product data. You will also learn how to add custom taxonomies to store extra information about WooCommerce products.
At the end of this guide, you will have mastered how to:
Add WooCommerce custom taxonomies to your products. We'll use the free Easy Post Types and Fields plugin for this.
Display products with their taxonomies in a structured table layout on your website. We’ll do this with the easy-to-use WooCommerce Product Table plugin.
And remember, you can do all this without writing a single line of code!
Ready to start displaying products with custom fields & taxonomies? But before we dive in, let's quickly examine how to create and display a WooCommerce custom product taxonomy.
What is product taxonomy?
A product taxonomy is a means of structuring products into different groups and subgroups based on their features, attributes, and characteristics. It enables customers to find the products they want without wasting time. It also helps you as a seller organise your products, which makes it easier to manage your inventory, sales and marketing effort.
The categorization can be based on size, colour, style, materials, target market, price range, or anything else.
What is a WooCommerce custom taxonomy?
In WooCommerce, a custom taxonomy organizes and classifies products to show advanced custom fields beyond the standard product categories and tags. It allows you to group products based on specific product attributes using hierarchical or non-hierarchical groupings.
To create a custom taxonomy in WooCommerce programmatically, you might have to use a new set of labels. Besides, you'll have to register the taxonomy with the WordPress core and associate the taxonomy you wish to classify.
An easier option is to create a WooCommerce taxonomy using a WordPress plugin. You can use a plugin to create custom taxonomies such as brands, sizes, seasons, materials, and other relevant product data. Keep reading to discover the best WooCommerce taxonomy plugins for creating, displaying, and filtering taxonomies.
What are the benefits of using WooCommerce custom taxonomies?
Using WooCommerce custom taxonomies provides many benefits. These include better product organization, enhanced filtering, improved navigation, flexibility, and higher visibility. Integrating relevant keywords in your custom taxonomy terms enables more laser-focused product pages for better SEO.
What's the difference between WooCommerce custom fields and taxonomies?
We usually use the phrases 'custom fields' and 'custom taxonomies' in relation to WooCommerce product data. However, many people don't know exactly what they are and their differences. WooCommerce custom fields are used to store arbitrary, one-off information about a product. On the other hand, custom taxonomy is used for grouping things together. This reflects in the way you add custom fields and custom taxonomies for products in the WordPress admin:
Custom fields appear in the main column of the Add/Edit Product screen. This is where you add other unique product data such as title, description, price, etc.
In contrast, custom taxonomies appear in the right-hand column under the product categories and tags. Each WooCommerce taxonomy term should be selected for multiple products like categories and tags.
When should I use custom fields & when should I use a WooCommerce taxonomy?
Once you understand the difference between a WooCommerce custom field and taxonomy, it becomes more obvious when to use each one.
As a rule of thumb, you can decide between custom fields and taxonomies by asking: "Is the data I am adding unique to each product, or does it apply to multiple products?" If the data is unique for each WooCommerce product, you need a custom field. However, if you want to select the same value for several products and use it to group them together (e.g., via a product filter), then you need a WooCommerce taxonomy.
Here are some examples to help you choose:
WooCommerce clothes store displaying the color of each product. If you're selling clothes in WooCommerce, you'll probably want customers to be able to find products by color. You'll have multiple products of each color. By creating a WooCommerce custom taxonomy called 'Colour', customers can filter the list of products to find the color they like. This wouldn't be possible with a custom field.
WooCommerce second-hand site storing 'condition' information about their used products. If you're selling used goods like eBay, you'll need a field to store details of any damage, etc. The description of each item's condition will be unique to that product, so you should create a WooCommerce custom field.
WooCommerce product directory with a large product database. WooCommerce directory-style websites with large numbers of products often list extra product data within the directory listings view. For example, a book directory might include data for author, publisher, and year.
Use custom fields and taxonomies together
To use the 2nd example above, a store selling used goods might want a WooCommerce taxonomy called 'Condition' AND a custom field called 'Condition Description'. The 'Condition' taxonomy would include the terms "New," "As New," and "Used," which apply to multiple products.
You could create product filters so customers can narrow their search based on the overall condition. The 'Condition Description' custom field would provide unique information about the exact condition of the product and any damage.
Easy Post Types and Fields is the best plugin for creating a custom taxonomy for WooCommerce products. It's 100% free and has everything you need to add extra taxonomies to your store.
WooCommerce products are custom post types in WordPress. That's why you need a plugin which lets you add taxonomies to a WordPress post type.
Other plugins like Advanced Custom Fields (ACF) let you create custom fields but not taxonomies. Easy Post Types and Fields lets you do both.
Next, I'll show you how to create WooCommerce custom taxonomies with the free Easy Post Types plugin. After that, you'll learn how to display them on the front end, and how to let customers filter by taxonomy.
Setup instructions
Here's how to use Easy Post Types as a WooCommerce custom taxonomy plugin:
Go to Plugins → Add New in the WordPress admin and search for 'Easy Post Types and Fields'.
Install and activate the plugin by Barn2. Skip through the setup wizard because you don't need to create a new post type.
Go to the 'Post Types' section on the left of the WordPress admin and click on the 'Existing Post Types' tab.
Find the 'Products' post type and click on the Taxonomies button for it.
Now set up your WooCommerce custom taxonomy:
Add the Taxonomy Slug (ideally 1 word, lowercase).
Add a plural and singular name (label). This will only appear in the WordPress admin.
Choose whether or not you want the custom taxonomy to be hierarchical. Hierarchical taxonomies are like product categories, where you can create multi-level nested structures with parent and child categories. Non-hierarchical taxonomies are like tags, which are flat and can't be structured.
Click to add the taxonomy to WooCommerce.
Now go to the Edit Product page, and you'll see the custom taxonomy on the right-hand side, under the categories and tags. Add one or more taxonomy terms for each product, just like standard product tags.
You'll also see a section for managing your new WooCommerce taxonomy under the 'Products' section of the WordPress admin. For example, if you created a taxonomy called 'Brand' then a 'Brands' link will appear there.
Displaying WooCommerce custom taxonomies on the front end
Editing the template files for your products' taxonomy archive pages is ideally the only way to display custom taxonomies for WooCommerce products. However, this involves a bit of coding knowledge.
But the good news is that there's a handy WordPress plugin to list products in a table and extra data, such as WooCommerce custom taxonomies. It's an ideal way to display products with extra information, as everything is presented in a structured tabular format. You can add product tables to any WordPress page, your main WooCommerce shop or product category pages, or even a single product page.
The WooCommerce Product Table WordPress plugin is one of the best for displaying custom taxonomies. This is because it supports all the usual WooCommerce product data, plus custom fields and custom taxonomies. Each item of product data is listed as a separate column in the table.
Customers can search or sort the table by any product custom taxonomy term. They can also filter by taxonomy via handy dropdown lists above the table. The WordPress plugin allows you to create WooCommerce tables with only products as a specific taxonomy term.
Comparatively, this is much easier than modifying your WooCommerce template files. Moreover, you get all the other benefits from product table layouts, such as improved conversion rates.
How to create product tables with WooCommerce custom taxonomies
Setting up a WooCommerce Product Table with all the extra product data is easy:
Get WooCommerce Product Table. Download the WordPress plugin using the link on the order confirmation page and email.
In the WordPress admin, go to Plugins → Add New. Upload the plugin files, and install and activate the plugin.
Navigate to Products → Product Tables and set up your first table.
Below, I'll tell you which settings to choose to display WooCommerce custom taxonomies in different ways.
Display custom taxonomies on the WooCommerce shop page or product category archive
The first page of the product table builder lets you choose which method you'll use to add the table. Select the "Display on a shop page (e.g. main storefront, category page, etc.)" option.
On the following page, choose which templates to display the custom taxonomies table on.
Use the 'Columns' page of the table builder to choose what product data to display. All the custom taxonomies for the 'Products' post type in your store will appear in the list of columns. Select as many as you need, and use the pencil icon to rename the column heading.
This will add the product table to your main shop page and whichever other template pages you selected. The list of products will include the WooCommerce custom taxonomies.
A product table on the WooCommerce shop page with a Brands custom taxonomy
How to list products with WooCommerce taxonomies on a standard page
Alternatively, you can add product tables to normal WordPress pages with custom taxonomy columns. This will look similar to the screenshot above, but won't affect your main shop pages.
The instructions for this are mostly the same as above. However, you should select "Add to a page using a block or shortcode" at the start of the table builder.
On the following page, either leave it set to "All products" or select which products you wish to list in the table.
The final page of the table builder will provide a shortcode for adding the table to a page. Either insert this onto the page, or add a 'Product Table' Gutenberg block and select the table you just created.
The page will then display a product table complete with columns for the WooCommerce custom taxonomies.
How to show WooCommerce custom taxonomies on the single product page
You can also use the shortcode method described above to show custom taxonomies on the single product page. However, you need to do it a bit differently because we only want to show one product in each table.
This time, use the 'Select products' page of the table builder to select which individual product you'll be displaying the WooCommerce custom taxonomies on.
On the 'Columns' page of the table builder, add custom taxonomy columns and don't bother with other columns like 'Name'. That's because this information is already present on the single product page.
You can then paste the table's shortcode onto the single product page, for example in the short description field. This will display the WooCommerce custom taxonomies for the selected product. In this screenshot, there are columns for a custom field called 'size', a custom taxonomy called 'fabric', and a stock column. I have hidden elements such as the search box which aren't needed on the single product page (you can do this at Products → Product Tables → Settings).
List WooCommerce products with a specific custom taxonomy term
By default, your WooCommerce product tables will list all the products in a table. This is perfect if you plan to have a single table listing your entire WooCommerce inventory.
However, you can also create product tables listing products from a specific category, tag, custom field, or WooCommerce custom taxonomy term.
To do this, use the 'Select products' page of the table builder to select which taxonomy terms you want to display the products for. When you enable the 'Select specific products' option, the list will automatically include all the custom taxonomies for the 'Products' post type on your store. Select a taxonomy (e.g. Brand in the screenshot below) and then which term(s) you wish to display the products for ('Woo' or 'Ninja' in my example).
Let customers filter by WooCommerce taxonomy
So far, we've talked about how to display WooCommerce custom taxonomies on your website. In addition to this, your customers can benefit from being able to filter the list of products by taxonomy. Product filter by custom taxonomy allows customers to easily find whatever product they're looking for.
There are two ways to add taxonomy filters, depending on whether or not you're already using WooCommerce Product Table to display your taxonomies.
Use WooCommerce Product Table to add taxonomy filter dropdowns
WooCommerce Product Table comes with taxonomy filters which you can display as dropdown lists above the list of products. You can add a separate filter for each custom taxonomy (plus other data such as attributes, variations, categories and tags - instructions here). Customers choose a taxonomy term from the dropdown and use it to filter the list of products.
You can create WooCommerce product filter by custom taxonomy in the table builder. Your WooCommerce custom taxonomies will appear in the list of available filters. Add as many as you like.
This WooCommerce music store added a Genre custom taxonomy filter
Add advanced WooCommerce taxonomy filters with the Product Filter plugin
A WooCommerce shop with taxonomy filters for Gender, Color, Size, and Activity
For more advanced and flexible custom taxonomy filters, you can use the WooCommerce Product Filters plugin. This comes with many taxonomy filters, including checkboxes, radio buttons, clickable images, range sliders, and much more.
The WooCommerce Product Filters plugin offers a wide range of customization options for displaying taxonomy filters. You can choose from different styles such as checkboxes, dropdowns, images, image labels, or even color swatches. This means that you can create a taxonomy filter that matches your store's design and makes it easy for customers to find the products they are looking for.
For example, if you have a clothing store and want to allow customers to filter products by color, you could use color swatches as the taxonomy filter. This way, customers can easily click on the color swatch they want and see all the products available in that color.
Alternatively, if you have a store that sells products of different sizes, you could use a dropdown menu as the taxonomy filter. This would allow customers to select their preferred size and see all the products available in that size.
Add and edit custom taxonomies for products in bulk
Finally, let's talk about what happens if you want to add lots of taxonomies to your products. It can be a pain to add and remove them from each taxonomy individually, but you can save time by using the Setary app.
Setary is a bulk product editor for WooCommerce. It lets you edit any type of product data, including - you guessed it - custom taxonomies. You can either do this from a spreadsheet-style interface, or by filtering to select certain products and bulk-applying the taxonomies to them. Either way, it's a huge time-saver if you need to add or remove taxonomies in bulk.
If you've used a separate plugin to add your taxonomies then you need to enable in Setary. To do this, go to WooCommerce → Settings → Advanced →Setary and select the plugin that you used to add the custom taxonomies to WooCommerce:
You can then select the taxonomies to include as columns in Setary's spreadsheet editor:
Take control over your WooCommerce product taxonomies
In this article, we have covered the best plugins for adding and displaying product taxonomies in your WooCommerce store:
The free Easy Post Types and Fields plugin makes it easy to add custom taxonomies to your WooCommerce products.
WooCommerce Product Table displays taxonomies on the front end of your website. You can do this on the single product page, your main shop pages, individual product pages, and list products by taxonomy.
The WooCommerce Product Filters plugin adds advanced filters so that customers can find products based on their taxonomy terms.
Setary App lets you add and remove custom taxonomies from WooCommerce products in bulk, saving hours of manual work.
Armed with these tools, you can add a wide range of custom data to your products and take your store to new levels of success. Mix and match the plugins to get the full benefits of WooCommerce custom taxonomies in your store. The possibilities are endless!
This is the complete guide on how to create and display WooCommerce custom fields. You'll learn how to show extra product data and sell extra product options on your website.
59% of shoppers are more likely to buy from a store that allows for product customization. WooCommerce comes with various types of data which you can add and display about your products. It also comes with a variable product type, with dropdown list fields to allow customers to select different options. But what if you want to create your own custom fields and display them in your ecommerce store?
Read on, or watch this video to find out!
In this tutorial, I'm going to reveal two easy ways to create WooCommerce custom fields and display them on the shop or product page:
Extra product option fields which allow customers to customize the product.
Custom fields for displaying extra data about the product.
Keep reading to learn more about each type of custom field in WooCommerce and how to set them up, step-by-step.
What are WooCommerce custom product fields?
When people talk about WooCommerce custom fields, they typically mean one of two things:
Selling extra product options, as an alternative (or enhancement) to variationsThis involves installing a WooCommerce custom product fields plugin which displays dropdown lists, checkboxes, radio buttons, text fields, etc. for the customer to complete before adding the product to their cart. You can either do this by displaying existing variations in more interesting ways, or by creating custom options using a plugin. Technically, extra product options aren't custom fields at all - they're better known as product add-ons! However, a lot of people refer to them as custom fields. They're perfect for adding a WooCommerce text field to the product page, and collecting other data and options from customers.
Adding extra information about the productThis is the classic use of custom fields. In WordPress, custom fields are used to add additional data to posts, pages, or products. You use these to store and display extra information on your website. For example, if you're already using all the built-in types of product data for other purposes then a WooCommerce custom field plugin can display additional text for you.
Continuing on, we will explore the steps involved in adding both types of custom fields to your WooCommerce products. You will also learn how to make the custom fields visible on the shop and product page.
By following the steps outlined in this guide, you will be able to effectively use custom fields in WooCommerce. This will enhance your store and improve the shopping experience for customers. Whether you're looking to add extra information about your products or offer additional options, WooCommerce custom fields are a powerful tool to help achieve your goals.
Using custom fields to provide options and collect information from customers
A product with various extra fields added, as an alternative to variations
First, we'll look at how to use custom fields in WooCommerce to show extra information about your products. This involves offering additional options to customers.
This type of custom field goes beyond merely displaying extra information about a product. It offers customers the option to select additional features before adding the product to their cart.
This method is a remarkable alternative or improvement to product variations. That's because it allows you to add a wide range of field types, including radio buttons, checkboxes, and text inputs - either as custom options, or by taking existing variations and displaying them in more interactive ways. By adding extra fields on the product short description page, customers can provide more choices and data that they can receive along with their orders. For example, adding a WooCommerce custom text field on the product page lets customers enter their own text to be submitted with their order.
Once the customer selects the custom fields from the product page, this is displayed as a custom order field in order notification emails etc. That way, the store owner knows which options the customer has chosen.
Radio button: A custom field which forces customers to select one option from a list.
Text: Let customers enter custom text, such as a personalized message or allergy information.
Text area: Collect entire paragraphs of information from the customer, suitable for longer messages.
File upload: Let customers upload files while placing the order. You can control details like the file types and maximum file size.
Number: Add a custom field to collect numeric information. This is useful for things like phone numbers, measurements or dimensions (especially when used with the price formula custom field type).
Color swatches: A more visual type of WooCommerce custom field, which lets customers choose from a choice of colors.
Dropdown: Let customers to choose an option from a dropdown list.
Customer-defined pricing: This custom field type provides a "Name your price" box where customers can enter an amount to be added to the product price.
Price formula: This is a more advanced WooCommerce custom field type. Use it to create a WooCommerce price calculator with a custom formula to calculate the price based on the information that the customer submits. This type of custom field is popular for creating a measurement price calculator for products priced by size, weight or area.
Date: Add a date custom field to the WooCommerce product page.
Products: This is less of a custom field than the other types. It displays selected products above the add to cart product and is a good tool for upselling additional products.
Visual editor: This is more like the classic definition of a custom field, which lets you display read-only data on the WooCommerce product page. Use this to enter static information such as headings or introductory sentences, instead of fields for the customer to fill in.
HTML: This custom field is like the visual editor field but more technical. You can use it to enter HTML that will appear as static information on the WooCommerce product page.
Introducing the Product Options plugin
There are several WooCommerce custom fields plugins available for adding extra product information to your store. However, when it comes to finding the best solution for letting customers select extra product options during checkout, we highly recommend WooCommerce Product Options. This plugin stands out as the best option for adding custom fields to your products and displaying them during the checkout process.
You can add a wide range of options that appear as custom fields for the customer to select. In fact, it supports all the custom field types listed above. Shoppers can complete these extra custom fields and add them to their cart from the following locations:
From a quick view lightbox, if you're using WooCommerce Quick View Pro. (Customers can access the lightbox from the main shop page or product category pages, so it's a quick way to select add-on custom fields without having to visit a separate page for each product.)
1a. How to create custom fields on product pages
Now we get to the tutorial part of this article. First, I'll tell you how to add custom fields to your WooCommerce products. Afterwards, I'll discuss the options for displaying custom fields on product pages and other shop pages.
The plugin setup wizard will open when you activate the plugin. Use this to activate your license key.
Next, go to Products → Product Options.
Click 'Add New' to create a new group of product options. This will be your group of WooCommerce custom fields. Name it whatever you like.
Use the onscreen instructions to add as many custom fields as you like. For each one, scroll down to configure additional options for each custom field. For example, you can use the price options to increase or decrease the product page based on the custom fields selected. Some field types can only be created directly in the plugin, and others also let you select existing variations to display.
Use the 'Advanced' section to configure additional options. For example, you can add minimum and maximum quantities for some of the custom field types. You can also add conditional logic to your WooCommerce custom fields so that the fields appear conditionally based on the user's selections. This is good if - for example - you want customers to be able to tick a 'Customize this product' to reveal the hidden custom fields.
1b. How to set up custom fields on shop and category pages
As a front end plugin, WooCommerce Product Options seamlessly displays custom field data on the WooCommerce product page. Once you've added your custom product option fields and selected which products they will appear of, they will start appearing straight away.
However, this requires the customer to visit a separate page for each product they want to fill in custom fields for. That might work for your use case, or you might also like customers to be able to select custom fields on the shop page, category pages, and so on. There are 2 easy ways to do this. I'll tell you about these next.
Method 1 - Display WooCommerce custom fields on a shop page order form
You can use the WooCommerce Product Table plugin with WooCommerce Product Options to display the extra options on your main shop pages. This will replace your usual store layout with a structured product table view, complete with a 'Buy' column. The buy column contains all the purchase options for adding the product to the cart. This includes product variation dropdowns, product add-on custom fields, and a quantity picker.
Example of WooCommerce Product Table used with Product Options
Customers can quickly find the products they want, fill in all the custom fields, and add them to the cart - all from the shop and category pages. This is a good option if you want to add a custom field to a product category, which you can do by enabling the table view on category pages.
Use the plugin setup wizard to choose the main options for your product tables.
Select the option to display the product table layout on a shop page.
On the next screen, select which WooCommerce shop pages you want to display the order form with custom fields on.
When you choose your table columns, make sure you include a 'Buy' column. The custom fields that you added using WooCommerce Product Options will appear here.
And that's it! Your shop pages will now show product tables complete with WooCommerce custom fields.
Display product option custom fields in a quick view lightbox
Maybe you want customers to be able to fill in the custom fields without visiting individual product pages, but you don't want to change or clutter up the shop page. That's fine.
The solution is to use the WooCommerce Quick View Pro plugin to add 'Quick View' buttons to your shop and category pages. Customers will use these to launch a product lightbox containing the WooCommerce custom field options for that product. That way, they can easily fill in the custom fields and add to the cart, without having to visit the product page.
Example of Product Options used to display the custom fields in a WooCommerce Quick View Pro lightbox
Use the setup wizard to choose what you want to include in the quick view lightbox. Make sure you include the add to cart button, as the WooCommerce custom field options are attached to this.
And that's it! This will add quick view buttons to your shop pages, linked to lightboxes containing your WooCommerce custom fields.
Using custom fields to store extra product data
So far, we've learned how to add custom fields to the WooCommerce product page which the customer interacts with. This involves things like adding some text, selecting options, and so on.
But that's not really the technical meaning of the term 'custom field' in WordPress! A WooCommerce custom field actually refers to something different: a custom meta field which is attached to the 'products' post type.
In part 2 of this tutorial, we're going to focus on custom fields in the technical sense of the word. This is all about displaying extra data on your WooCommerce products, rather than providing editable fields for customers to interact with.
WooCommerce comes with a range of standard fields for storing and displaying information about your products. This includes data such as the product title, price, categories, tags, attributes, tags, dimensions, stock information, and so on. Here, we're talking about how to add a static WooCommerce text field on the product page. That's why it's different from adding custom fields for your customers to fill in.
However, sometimes the built-in WooCommerce product data isn't enough. When that happens, you need to install a WooCommerce custom fields plugin and add some additional fields.
In this section, I'll show you how to use the best plugin to add custom fields to WooCommerce. I'll also show you how to display them on the front end of your shop and product pages like this:
WooCommerce Product Table plugin displaying custom fields in the front end
But before we start, I'll explain the difference between custom fields and taxonomies to make sure that custom fields are actually what you need.
Custom fields or taxonomies?
Lots of people wonder "What is the difference between a custom field and a custom taxonomy"? It's a valid question because they're both ways of adding and displaying custom data about WooCommerce products. Understanding the differences between the two options is crucial in knowing which one best fits your specific requirements.
What are custom fields?
Custom fields, also known as post meta, are individual pieces of information that can be added to your products. They are flexible and be used to store a wide range of data, including text, images, and other media.
In short, custom fields add extra fields to the Add/Edit Product screen in WooCommerce. They're ideal for storing standalone data about products. Here are some examples of when you should use WooCommerce custom fields:
To store a unique product barcode, inventory, or reference number.
For adding extra ways for people to interact with your products. This might be by adding extra buttons (e.g. 'Enquire about this product), icons, or social sharing links.
To display multimedia content about the product, such as embedded video or audio tracks.
To store additional notes about the prices or alternate price options. For example, if you're using a bulk discount WooCommerce plugin and want to list the quantity-based discounts, then you can add this information to a custom field.
The idea of a custom field is that it stores unique information. Since the data stored in the field is unique, you can display it in the WooCommerce front end - e.g. on the product detail page, shop, or category pages. However, you wouldn't expect to use this data to group or filter products. If you want to filter by that type of data, then you need a custom taxonomy instead.
You can create WooCommerce custom fields using any custom fields plugin for WordPress. Once you've created the custom fields, it's easy to show them on your website using the WooCommerce Product Table plugin. Keep reading for full step-by-step instructions on how to do all this. First, I'll quickly tell you about WooCommerce custom taxonomies so that you can be sure you're choosing the most appropriate field type for your data.
What are custom taxonomies?
Like WooCommerce custom fields, taxonomies are a way to store and show extra product data. They are a way of grouping and organizing products into categories or tags. However, the difference is that they are designed to store reusable information which can be used to group and filter products. For example, you can create a dedicated archive page listing all products that share a specific custom taxonomy term. You can also use taxonomies to filter products using the WooCommerce Product Table plugin.
Custom taxonomies are very similar to WooCommerce product categories. In fact, WooCommerce categories are actually set up as a taxonomy under the hood. When you create a custom taxonomy in WooCommerce, it adds tick boxes/checkboxes to the right-hand side of the Add/Edit Product screen - just like categories.
Here are some examples of when you might use WooCommerce custom taxonomies:
A WooCommerce bookstore needs to store extra product data such as year of publication, author, and publisher. Since more than one book has the same year, author, or publisher, customers need to be able to sort and filter by this data. You can do this using WooCommerce custom taxonomies.
If your products relate to a specific geographical area, then you can use custom taxonomies to group products by area. For example, you could create a custom taxonomy called 'Area' and add a separate taxonomy term for each state or county. Customers can then filter by area, or view lists of products from a specific area only.
A WooCommerce clothes store can use custom taxonomies to store extra data such as brand names. Customers can then search and filter to find products with their favourite brands, as this field isn't built into WooCommerce as standard.
In summary
Custom field for 'Condition', custom taxonomy for 'Colours'.
When deciding between custom fields and taxonomies, it's important to consider the type of information you want to store and the way in which you want to organize your products. If you need to add unique or specific information to a product, custom fields may be the better choice. However, if you're looking to categorize and organize your products, taxonomies may be suitable.
Ok, now you know when to use custom fields. Next, I'll show you how to create advanced product fields for WooCommerce. It's surprisingly easy!
While many individuals opt to add custom fields programmatically, this tutorial is designed for non-developers. By reading on, you will learn how to add custom fields to your WooCommerce products without writing a single line of code. This makes it possible for you to display extra product fields wherever you desire, including on the product page, the shop page, and category pages.
Which custom field plugin?
In order to add custom fields to your WooCommerce products, you'll need to have a WooCommerce custom fields plugin installed. There are numerous high-quality and free plugins available for creating custom fields in WooCommerce, including Easy Post Types and Fields and Advanced Custom Fields (ACF). Each custom field plugin offers unique features and benefits, so you can choose the one that best fits your needs and preferences.
If you prefer, you can also opt for a dedicated WooCommerce custom fields plugin. These are specifically designed for adding custom fields to products in the WooCommerce platform. However, custom fields are essentially the same whatever WordPress post type you're adding them to. For that reason, there's no need to use a WooCommerce-specific plugin.
I'm going to show you how to create WooCommerce custom fields using Easy Post Types and Fields, and also Advanced Custom Fields. These are my two favorites.
However, the instructions are the same for most other custom field plugins for WordPress. If the custom fields don't show up on your site when you follow the later sections of this tutorial, make sure the plugin isn't adding extra characters to the start of the custom field name. (You might need to contact their plugin support to ask about this.) For example, Toolset automatically adds wpcf- to the start of the custom field name, so you need to know this.
Creating custom fields with Easy Custom Post Types & Fields
Easy Post Types and Fields is a free WooCommerce custom fields plugin. It makes it easy to add custom data fields to your WooCommerce products.
This plugin was designed to make it as quick and easy as possible to add custom fields. It comes with a choice of plain text and visual editor custom field types. Use it if you want a quick and straightforward way to add WooCommerce custom text fields to the product page.
How to add custom fields to WooCommerce products
Log into the WordPress dashboard and go to Plugins → AddNew.
Search for ‘Easy Post Types and Fields’, then install and activate the free plugin.
The setup wizard will open. Skip this and go to Post Types → Manage, then click on the 'Other Post Types' tab.
Find the 'Products' post type (this is added by WooCommerce) and click 'Custom Fields'.
Click the button to add as many fields as you like to your WooCommerce products. Make a note of the name of each custom field - you'll need this to display it later in this tutorial.
Finally, edit your products. On the 'Edit Product' screen, you'll find the custom fields that you added in step 4. Fill in the data as needed.
How to create custom fields with the Advanced Custom Fields plugin
Advanced Custom Fields (ACF) is a popular WordPress custom fields plugin. Use it if you're willing to spend a bit more time on setup and want extra features such as additional field types:
Log into WordPress and find Plugins → Add New. Search for ‘Advanced Custom Fields’, then install and activate this free plugin.
Click ‘Custom Fields’ on the left-hand side of the WordPress dashboard.
Click the ‘Add New’ link by the ‘Field Group’ at the top of the page.
Next, you'll see the ‘Add New Field Group’ page:
First, add a name for the group of custom fields you're creating. (No one else will see this.)
Location – Choose Show this field group if Post Type is equal to Product. This tells Advanced Custom Fields to show the custom field on the Add/Edit WooCommerce product screen.
Press the blue ‘Add Field’ button. Now it's time to create the individual custom fields where you'll store the extra product data.
Add a Label for the custom field. This is how the custom field will be labeled on the Add/Edit Product screen.
Choose a Name for the custom field (this should be 1 word in lowercase). You'll need this to display the WooCommerce custom field on the front end of your website, later.
Choose a Field Type from the available types of a custom field. You can choose text, text area, numbers, checkbox, radio button, etc.
Complete any extra fields for the custom field such as adding a default placeholder value. Finally, click the blue ‘Publish’ button.
That's how to create WooCommerce fields. The next step is to add data to the custom field value for some or all of your products. To do this, go to the 'Edit' page for each product and you'll see the extra WooCommerce custom field(s) lower down the page. They'll be shown somewhere below the Product Data section. Edit the placeholder, enter values into the custom fields, and then save the product.
2b. How to display custom fields on shop pages
How to show custom fields on the shop page
A shop page product table with a custom field column
In the previous section, I showed you how to store new custom fields for your WooCommerce products in the back end. The next step is to display these fields on the front end of your WordPress website for customers to see. Of course if you're using custom fields simply as a way to store internal notes, then there's no need to display them. However, if you want to show your WooCommerce custom fields on your website, it's a simple process.
There are several ways to make custom fields visible on the front end of your website. This includes displaying custom fields on product pages, the shop page, and category pages.
The easiest way to show your extra product data is to install the WooCommerce Product Table plugin. This takes your products and lists them in a quick order form layout anywhere on your site. You can add product tables to any page you like. This might be normal pages, or your WooCommerce shop and category pages.
You can choose which columns to include in the product table. The great thing is that you can include WooCommerce custom fields in the table. This is more flexible than the default store layout, which just lists basic information such as the product name and price. It's a really easy way to display the extra product data that is stored in custom fields.
The product table builder will open. Activate your license key and choose the other settings for your first product table. For example, you can choose which products to include in the table. Alternatively, you can select which default shop pages you want to display the table with custom fields on.
In the Columns section, make sure you add your custom field columns. If you're using the Easy Post Types and Fields or Advanced Custom Fields plugins to create custom fields, then these fields will appear in the list of columns. For other custom field plugins, select 'Custom field' and enter the custom field name.
Now it's time to add product tables to a page. (You can skip this step if you selected the option to show product tables on your main shop pages.) To list products with custom fields anywhere, either use the shortcode from the final page of the table builder or insert a 'Product Table' Gutenberg block.
Next, view the page and see what it looks like! You will see a product table, complete with custom fields.
Make changes to how your custom fields are displayed
WooCommerce Product Table is a very flexible plugin. Choosing your columns is just one of over 50 options! Look at them all and configure your table to show whatever product data you need.
Have a play, and get your product tables and WooCommerce custom fields showing exactly as you need them.
How to display custom fields on the WooCommerce product page
So far, I've shown you several ways of displaying custom fields on WordPress pages, shop, or product category pages. It's also possible to show a WooCommerce text field on the product page (also known as the product detail page).
The WooCommerce product page is great, as it displays lots of product data such as product title, image gallery, short and long description, product category, product price, attributes and variations. However, there's no built-in way to add custom fields to custom product pages.
You can do this using the WooCommerce Product Table plugin that we looked at in the previous section. It can show custom field values anywhere on your site - including the WooCommerce product page. When used on the single product page, it looks like this:
A product table displaying custom field data on the WooCommerce product page
Setup tutorial
1. First, create the table of custom fields
Edit each product and add data to the custom fields as required.
When you activate it, a table builder will open guiding you through the main settings for your custom tables. You can also launch this later at Products → Product Tables.
On the 'Create a table' page, select the 'Add to a page using a block or shortcode' option.
On the 'Select your products' page, select the 'Individual products' checkbox and search for the product whose custom fields you want to display. (Don't worry if you want to show different custom fields on different products, as I'll show you how to do this in a minute.)
Select other options for the table, such as columns. If you're using the Easy Post Types and Fields or Advanced Custom Fields plugins for your custom fields, then these will appear in the list of columns. For other custom field plugins, choose 'Custom field' and add the custom field name.
Copy the shortcode from the final page of the table builder.
Now repeat Steps 3-8 for the other products that you want to display product custom fields on. You can quickly do this by duplicating an existing table and changing which product is selected.
Now go to Products → Product Tables → Settings. I recommend disabling elements such as the search box, product totals and reset button. That's because these are designed for listing large numbers of products in a table, and they're not relevant to displaying custom fields on the WooCommerce product page.
2. Next, add the table to the product page
Open the 'Edit Product' screen for the product where you want to add a table of custom fields.
Add a product table shortcode that you copied earlier to the Short Description field.
This is how it will look on the front end WooCommerce product page:
What if I don't want to show the custom fields for each product manually?
The instructions above tell you how to manually add a product table with custom fields for specific products. You can do this for as many products as you want to display custom fields.
If you want to show custom fields on all your WooCommerce product pages then you will need to do this globally by adding product tables to the single-product.php template. This is a bit technical and you can ask your developer to do this for you. If you don't have one then I recommend that you post a job on Codeable where one of their WordPress experts will send you a quote.
To get you started, we've provided an article with code snippets on how to automatically add product tables after the short description field on the single product page. The code snippet adds a table of the current product's variations, and you can change the [product_table] shortcode to add custom field columns, disable the variations option, and make any other changes you require.
Can I add custom fields to other sections of the WooCommerce product page?
Above, I showed you how to add custom fields to a table in the short description on the WooCommerce product page. This is a good option because most themes show the short description near the top of the page, under the product name and price.
If you'd rather show custom fields elsewhere on the single product page, that's absolutely fine. Simply add the product table shortcode to wherever you'd like to display the custom field values. For example, you could add it to the long product description instead.
What other extra data can I show on the WooCommerce product page?
Custom fields and taxonomies are just the tip of the iceberg. You can use WooCommerce Product Tables to show any type of product data in a table. This can include:
Product image, name, price
Short or long description
Categories and tags
Attributes and variations
Star rating from reviews
Embedded audio and video
This is a much more flexible way to show WooCommerce extra product data in the short description field. Customers can see all the relevant data from the neat table layout, instead of having to scroll down to the long description tabs.
Have a play with showing custom fields and other data on the WooCommerce product page. Think about what will best sell your products and maximize conversions. This is a great way to increase sales and make your e-commerce store an even bigger success.
Alternate method: Show a text custom field above the add to cart column
So far, you've learned how to add a table to the single product page, with each custom fields displayed in a column of the table. If that's not the layout you want, then I have an alternative suggestion for you.
We're going to use a plugin called WooCommerce Lead Time. While the plugin is designed to display waiting times, it works by creating a WooCommerce custom field and showing it on the single product page, immediately above the add to cart button. As a result, you can use it to show any type of text-based information and not just lead times.
To set it up, simply install the plugin and add the information that you want to display to the 'lead time' field. The text you have added to the 'lead time' custom field will appear above the add to cart button, under the short description.
The other benefit of using WooCommerce Lead Time for your custom field is that you can choose whether to add the information individually for specific products only; or globally so that it appears on all product pages.
How to list WooCommerce products with a specific custom field value
Finally, I'll show you one more option for showing WooCommerce custom fields in the Product Table plugin.
As well as displaying custom field labels in the table layout, you can create tables containing products with a specific custom field value.
For example, imagine that you wanted to display products with a custom field value of 'June' (saved in a custom field called 'Month'). To do this, you could select 'Custom field' on the 'Select your products' page of the table builder and enter 'month' as the custom field name, and 'June' as the value.
How to add custom fields to product programmatically
If you're a developer, then you might be wondering how to add custom fields to a WooCommerce product programmatically. Can you even add custom fields to a WooCommerce product without plugins?
The answer is yes! WooCommerce allows you to programmatically add custom fields to products without installing any additional plugins. However, as you can imagine, the programmatic approach to creating custom fields for WooCommerce products involves programming!
With a programmatic approach, you can add custom information directly to your product metadata. You can also include your custom field(s) as part of the existing WooCommerce product data meta box.
Code sample 1
Your code will depend on the kind of custom fields you're looking to add to your products. Many product types only need a simple custom text field to let users enter some value. For such use cases, this custom text input field snippet by WooCommerce developer Rodolfo Melogli suffices:
As you can see, you’ll be using a bunch of core WooCommerce functions and hooks in the code. For example, you're using the WooCommerce hook "woocommerce_before_add_to_cart_button" to show your custom field on your product page. You're also using the woocommerce_add_order_item_meta hook to save your product input fields for Woocommerce into the order meta information. These can vary greatly depending on the custom fields you're trying to add.
When you take such input from your users, you should include it in your cart page summary (with your cart item details), your checkout, and also in your order's email. The snippet we just saw doesn't just let you allow your users to enter a text-based value inside your product page but also takes it over to your cart and checkout. Not just that, it adds the custom input to your order confirmation email too.
Code sample 2
Next, we'll share some example codes kindly published by Plugin Republic. You'll be adding these snippets to your WordPress child theme's functions.php file. You could use the code snippet below to register a custom field, display the input field in the General tab of the WooCommerce product data box, and save it as product metadata:
/**
* Displays the custom text field input field in the WooCommerce product data meta box
*/
function cfwc_create_custom_field() {
$args = array(
'id' => 'custom_text_field_title',
'label' => __( 'Custom Text Field Title', 'cfwc' ),
'class' => 'cfwc-custom-field',
'desc_tip' => true,
'description' => __( 'Enter the title of your custom text field.', 'ctwc' ),
);
woocommerce_wp_text_input( $args );
}
add_action( 'woocommerce_product_options_general_product_data', 'cfwc_create_custom_field' );
/**
* Saves the custom field data to product meta data
*/
function cfwc_save_custom_field( $post_id ) {
$product = wc_get_product( $post_id );
$title = isset( $_POST['custom_text_field_title'] ) ? $_POST['custom_text_field_title'] : '';
$product->update_meta_data( 'custom_text_field_title', sanitize_text_field( $title ) );
$product->save();
}
add_action( 'woocommerce_process_product_meta', 'cfwc_save_custom_field' );
Then, you could use WooCommerce's many hooks to display that field data on the front end of your e-commerce store at the spot where you want it to appear.
For example, this snippet displays the custom field data after the add to cart button on your single product page:
/**
* Displays custom field data after the add to cart button
*/
function cfwc_display_custom_field() {
global $post;
// Check for the custom field value
$product = wc_get_product( $post->ID );
$title = $product->get_meta( 'custom_text_field_title' );
if( $title ) {
echo get_post_meta($post->ID, 'custom_text_field_title', true);
}
}
add_action( 'woocommerce_after_add_to_cart_button', 'cfwc_display_custom_field' );
There are also other hooks that let you display information on the WooCommerce checkout page or the cart page.
Is It worth adding WooCommerce custom text fields programmatically?
While you don't need any plugins to programmatically add custom fields to WooCommerce using this method, you can end up with errors. Your custom code could have compatibility issues with the other WooCommerce extensions or WordPress site plugins that you might be running. You can also experience code validation errors.
As you can tell, using plugins is a much simpler way to add custom fields to product pages. While it is possible to display custom fields without the use of a plugin, it's really only accessible to developers. That's why the methods described above are a better option for most store owners.
2 easy ways to create and display custom fields
And that's it! I've shown you two easy ways to show custom fields on your website:
We've learned how to add custom product input fields for WooCommerce to collect extra information from customers. This uses the WooCommerce Product Options plugin.
Neither method for adding custom fields to WooCommerce products requires any special technical knowledge.
Follow whichever method in this tutorial interests you the most, and put it into practice on your own website. It's a fantastic non-technical way to store and display extra product data in WooCommerce.
If you sell lots of similar products, then how can customers choose between them? A WooCommerce product comparison table is the solution.
Your store might have exactly what a particular customer has come looking for. But, there’s just too much stuff for them to sift through that it’s starting to affect your conversion rate.
There are lots of reasons to add WooCommerce product comparison tables to your store:
If you sell lots of products then customers need an easy way to see them alongside one another.
Product comparison buttons are especially important if you sell technical products where customers use factual data to make buying decisions. (E.g. TV's or mobile phones).
Maybe you sell visual products such as clothing, and customers need to compare images of each product to choose which they like best.
This is where WooCommerce Product Table - the best WooCommerce product comparison table plugin - comes in.
A WooCommerce product comparison table plugin, like the one above, lists products in a way that makes it easy for customers to find what they’re looking for, and to compare similar products. The aim is to present products alongside each other so that customers can make direct comparisons and quickly and easily choose which ones to buy.
What’s wrong with most WooCommerce product comparison table plugins?
The WooCommerce product comparison table plugin market is crowded, and we won’t pretend there aren’t plenty of products available. These often let customers tick 2 or more products and then view them on a separate page. You might also come across static table plugins where you have to manually enter the data.
There are a couple of problems with most comparison table plugins for WooCommerce. Here are the problems they face:
Don’t have features to help customers find products to compare in the first place.
Show the product comparisons in the same layout as the rest of the store, instead of having a dedicated comparison table.
Contain very little product data in the comparison table – usually image, name and price. You can add extra data if you create comparison tables using a static WordPress table plugin, but you have to enter everything manually which is no good.
We can do better 💪
WooCommerce Product Table is a different type of product comparison plugin. It automatically lists products in a searchable, sortable table layout with filters. You can add columns of extra product data to the comparison table, letting customers compare products in a more meaningful way.
You can either use it alone for easy product comparisons, or with YITH WooCommerce Compare to add shortlists and lightboxes to the comparison table.
Read on to discover how to create the perfect WooCommerce product comparison table.
How does the WooCommerce comparison table work?
WooCommerce Product Table is highly flexible and there are many ways to configure your tables. Used correctly, it functions perfectly as a WooCommerce comparison table plugin.
This is how customers can use it to compare products in WooCommerce:
Customers will view a page on your website with products listed in a table The table provides several ways to find the products to compare. They can type a keyword into the search box. The filter dropdowns above the list – and/or filter widgets in the sidebar – make it easy to refine the list. They can sort the table by clicking on any column header. Customers can even filter the table by clicking on a category, tag or custom taxonomy term.
As the customer filters the table, the number of products listed will decrease until they can just see the products they want to compare This works slightly different from some WooCommerce product comparison table plugins, because you are filtering the table instead of ticking boxes. It’s a neat way to do it because this helps customers to find suitable more products more quickly, instead of having to scroll through a long list of products.
You can include as many columns of product data as you like in the table Each product takes up 1 row in the table, and customers can easily view the data for each product and make direct comparisons. For example, if you’re selling smartphones and want to compare the storage capacity, then you can include a ‘Memory’ column in the WooCommerce comparison table.
The product of all of this is customers can find what they’re looking for much more quickly. This feeds in to a higher conversion rate, and in turn more sales, revenue, and profit for you.
How can the WooCommerce product filter plugin enhance product comparisons?
While the WooCommerce comparison table is a great tool for customers to compare products side-by-side, it can still be difficult for them to find the exact products they are looking for. This is where the WooCommerce Product Filters plugin comes in.
By adding more advanced filtering options to the comparison table, such as categories, attributes, and tags, customers can use the facets to examine closely the content they're looking for. This means they can quickly and easily compare products that meet their specific criteria, leading to increased sales and customer satisfaction.
For example, a customer might be comparing laptops and want to narrow down the options by screen size, processor, and price range. With the addition of product filters, they can easily find and compare the laptops that match their requirements, rather than scrolling through a long list of products.
How to create a WooCommerce product comparison table
WooCommerce Product Table only takes a few minutes to set up. You don’t need to do any data entry or custom coding. Assuming you already have a WooCommerce site with products, it works instantly and lists your existing products in a neat comparison table.
Watch the video tutorial, or read the detailed written instructions below.
Open the table builder at Products → Product Tables → Add New. Go through each step to set up your comparison tables.
2a. Choose which products appear in the comparison table
The first page of the table builder asks whether you want to add comparison tables to a normal page, or enable them on your WooCommerce shop templates. For this tutorial, I'll assume that you're creating a separate product comparison page. However, if you prefer then you can enable the comparison table view on all your shop pages instead.
By default, the WooCommerce product comparison table lists all the products in your store. This is ideal for many types of comparison shopping, because customers can view the full list and use the filters to refine it according to their interests.
However, if you sell different types of products, then you might want to provide multiple comparison tables listing different categories. For example, it’s unlikely anyone would want to compare t-shirts and shoes in the same clothing comparison table, so it’s best to list these separately.
Fortunately, WooCommerce Product Table can be used to create tables listing specific products only. You can create comparison tables with products from a certain category, tag, or even products with a specific custom field or taxonomy value.
2b. Add product data to the comparison table
In particular, add plenty of columns of product data. You can choose exactly which columns are included in the product comparison table. The plugin supports all the standard WooCommerce fields that you fill in when you add new products. It also supports extra fields such as product attributes, variations, custom fields, and taxonomies.
This creates an opportunity to create much more useful WooCommerce product comparison tables, which isn’t possible with other plugins. Make the most of it by planning your columns carefully!
To let customers compare products in WooCommerce, I recommend thinking carefully about what data they will want to compare. For example:
If people will be comparing the price of your products, allow easy price comparisons by including a price column. And even better, use the price filter sidebar widget.
Use columns such as weight and dimensions for items such as furniture, where customers are buying based on size.
Adding product attributes allows for direct comparisons of information such as size and colour (or whatever you like!). List each attribute as a column in the comparison table.
Use WooCommerce custom fields and taxonomies to store extra data about your products and list this as columns in the table. This can include additional technical data that you’re not storing elsewhere.
2c. Change how products are added to the cart
The default WooCommerce comparison table includes standard “add to cart” buttons. If you prefer, you can replace these with checkboxes so that customers can add multiple products to the cart at once.
If you don’t want customers to purchase directly from the comparison table, then you can remove the add to cart column altogether.
2d. Lazy load option for bigger comparison tables
Sites with many types of products in a WooCommerce comparison table plugin (e.g. 100s or 1,000s of products), can activate lazy load to prevent any performance problems. This loads 1 page of products at a time, so your site will never crash however many products there are to compare.
2e. Add filters for refining the comparison table
The table builder lets you add filter dropdowns above the WooCommerce comparison table. For example, you can let customers filter by category, tag or attribute to start comparison similar products.
The comparison table plugin also works with the WooCommerce product filter widgets. If the page with your comparison tables has a widgetized area such as a sidebar, then you can add widgets to refine the list by attribute, price, or rating.
Step 3: Add the WooCommerce comparison table to a page
Lastly, go to the page where you want to add a WooCommerce product comparison table. Either add a 'Product Table' block or copy the shortcode from the last page of the table builder.
This will list all your products in a user-friendly WooCommerce comparison table.
Add 'Compare' buttons to the product comparison table
So far, we've looked at how to use WooCommerce Product Table on its own to allow customers to compare products. They do this by searching, sorting and filtering the table to compare the products that meet their criteria.
To add to this even further, you might like to add 'Compare' buttons to the WooCommerce comparison table. You can do this by using Product Table with the YITH WooCommerce Compare plugin.
By combining these two plugins, your customers can view some or all of your products in a space-saving table layout. They can click the WooCommerce product comparison buttons for the items they're interested in. This opens up a neat comparison table, with each product in a separate column. Customers can view the products side by side and add their favorites straight to the cart.
WooCommerce Product Table with comparison buttons
Customer can click to compare items in a lightbox
I'll tell how you how to use the two plugins together next.
Setup instructions
Before you start, follow the instructions above to create a comparison table with WooCommerce Product Table. Next:
Get YITH WooCommerce Compare and set it up on your WordPress site according to YITH's documentation.
Decide which product field you will use to add the comparison buttons. For example, you might add them to the product short or long description if you're not using these for anything else. Alternatively, you could create a custom field and add them there (e.g. using the Easy Post Types & Fields or Advanced Custom Fields plugin).
Go to the 'Edit Product' screen for each product. Add the shortcode [yith_compare_button type="button"] to the field you chose in step 2. (Tip: If you have too many products to realistically do this, then I'll tell you how to do it dynamically in the next section.)
Next, edit the WooCommerce comparison table that you created earlier by going to Products → Product Tables and clicking 'Edit':
Add an extra column for whichever field of product data you used to add the YITH compare buttons. Click the pencil icon and rename it to something relevant like 'Compare'.
Ensure that the 'lazy load' box is disabled because lazy load is incompatible with YITH's plugin.
Finally, go to Products → Product Tables → Settings and enable the 'Shortcodes' button. This tells the product comparison buttons to display correctly in the table.
Can I add the shortcode dynamically?
The above instructions are aimed at non-coders and provide an easy way to add a 'Compare' button alongside every product in the table. I have assumed that you have manually added the YITH compare buttons to a field on the 'Edit Product' screen, such as the short description.
If you want an easy way to automatically add the compare button for each product, then I recommend adding the [yith_compare_button type="button"] shortcode as a default value for the custom field that you are displaying in the table. Most custom field plugins, such as Advanced Custom Fields, allow you to add a default value for each product. (Note: If you've added your products before setting up the custom field and default content then you need to edit each product and click 'Update' before the default content will be stored for that product).
Alternatively, if you have developer-level skills, then you can write some custom code to do it for you. If you don't have a developer, then I recommend that you post a job on Codeable. Their pre-approved WordPress experts will send you a quote. Codeable is a fantastic place to find good WordPress developers who specialize in customizing plugins.
Here are some tips to get started with adding the product comparison buttons dynamically:
Use the following code or similar to insert the 'Compare' buttons into one of the fields in the product table:
Case study - WooCommerce comparison table of electrical products with extra technical data
Universal Fans sell a wide range of fans to retail and the trade. They have used the WooCommerce Product Table plugin to create a WooCommerce comparison table for their exhaust fans. This helps customers to find the right fan for their needs, based on a range of technical data.
The comparison table page consists of 4 tabs, each containing a product table listing a specific type of fan. The comparison table includes columns for SKU, image, name, price, plus several product attributes containing technical data. Each column in the table is sortable. Customers can also filter by duct size or perform a keyword search.
To allow more space for the product comparison data, Universal Fans have decided not to include buy buttons in the table. Instead, customers can click on any fan to access the single product page where they can choose options and buy.
Universal Fans said:
I am very happy with the plugin, for us it works really well. We sell relatively technical products, so it is really helpful for customers to be able to view products in certain categories and view them in a list format, which can be sorted by custom attributes.
As you can see, WooCommerce Product Table is the perfect product comparison table plugin for a site like Universal Fans. Next, I'll show you how to create comparison tables for your own WooCommerce store.
Tips on supercharging your WooCommerce comparison tables
Create affiliate product comparison tables in WooCommerce
Lots of WooCommerce websites make money by providing helpful comparisons of products sold by third party websites. Each product has an affiliate link. This earns the website owner a referral commission if the customer clicks through and buys the product from the other website.
You can easily create affiliate product comparison tables without adding any further plugins. WooCommerce has a built-in product type called External/Affiliate Products. You add products in WooCommerce as usual, but select this product type and add your referral link to the affiliate product.
WooCommerce Product Table fully supports External/Affiliate Products. Your affiliate links will appear in the WooCommerce product comparison table instead of add to cart buttons.
Use icons to allow more visual product comparisons
You can make your WooCommerce product comparison tables more eye-catching by adding icons or content added by other shortcodes. For example, you could use icons to represent the different features of your products, instead of listing features using text.
This lets customers compare products more visually, as they can instantly see which features are available in each product.
Tip: To get this working, you might need to enable the 'Shortcodes' option at Products → Product Tables → Settings. This tells the comparison table to render any code correctly in the table, instead of just showing the code.
Compare product variations in WooCommerce
So far, I've talked about how to create a WooCommerce comparison table to compare actual products. If you prefer, you can use the instructions from this tutorial to compare product variations instead.
To do this, you need to use the option to list each variation as a separate row in the table. Do this on the 'Add to cart' page of the table builder (step 2c, above). Your customers can use the filters to refine the list of variations in the table, and then compare the ones they're interested in.
Get the WooCommerce product comparison table plugin
By listing your product data in a structured table or grid view, customers can make direct comparisons and decide which product to buy. Customers are able to filter products so they only see items directly related to their purchase intent, and the ability to include stock status and add-to-cart options directly in the comparison table itself will directly impact your conversion rate.
This post has covered the exact steps you need to take to increase your sales with a WooCommerce product comparison table plugin. All you need to do now is put this into practice, and watch the sales come in.
The easier it is for customers to view and compare your products, the more likely they are to make a purchase – and ultimately to make your store a success. Do share in the comments how you end up having this set up on your site :)
While WooCommerce is widely used for simple stores, it’s also possible to create custom product boxes in WooCommerce. Keep reading to learn how to set up a ‘Build Your Own Product’ system.
Whether you want to sell bespoke vegetable boxes, luxury food, or gift baskets, build your own pizza or burrito, build a box, or something else, you can sell custom product boxes with WooCommerce.
Used creatively, WooCommerce is perfect for selling custom product boxes and bespoke orders. Customers can choose from a selection of products in different categories to order a custom combination that is unique to them. They can view the available box contents in a user-friendly list, tick the ones they want, and add to the cart – all from a simple one-page order form.
Pretty neat, right? Below you’ll see an animation showing a WooCommerce custom product box plugin in action:
Best of all, it’s surprisingly easy to create a WooCommerce build your own product system using the flexible Product Table plugin to list the available box contents. You won’t even need to write any code :)
This tutorial will cover everything you need to know to get started on your own WooCommerce custom product box site. We’ll show you how to install and set up WordPress and the required plugins and different strategies for organizing and listing the available box contents. We'll also share some handy design tips to tailor your 'Build your own product' ordering system to suit any kind of business.
Examples of custom product boxes in WooCommerce
First, let’s look at the types of WooCommerce build your own product that you can sell with WooCommerce. This will help you to understand the options and think about what you need for your own custom product boxes.
1. Build your own pizza, sandwich, wrap, burrito, or salad
A WooCommerce takeaway restaurant website might want to let customers choose fillings and build their own meals. This could be used to create a customized pizza, sandwich, sub, wrap, burrito, salad, or other custom product box.
For example, the item choices might work as follows:
Build your own pizza – choose your base, choose your sauce, choose your toppings, and choose your dips.
Create your own sandwich – choose your bread, choose your fillings, choose your salads, and choose your sauces.
Build a burrito website – choose your fillings, choose extras, and sides.
The WooCommerce build your own product website would have separate lists of the different types of items – one for each category. For example, the pizza example would start with a list of bases, followed by a list of sauce choices, and so on. Customers could add as many extras as they like to their custom product selection, all from one page.
2. Create your own custom gift basket product
There’s something depressing about buying a basket/hamper as a gift when you don’t get to choose what’s in it! Whether you’re buying a food, beauty, or gift basket, it’s far better to build your own gift basket with items that you know your loved one will enjoy.
You can use WooCommerce to develop a custom product box website selling gift baskets. This might involve creating 3 separate categories: one for the hamper or product box options; one listing all the foods/gifts/cosmetics/etc to fill the gift basket; and one with the padding and wrapping options. Customers can choose their options and add all the individual elements to the cart, creating their own custom gift baskets.
3. Custom meat or vegetable boxes with WooCommerce
The meat and vegetable box industry is growing rapidly as more and more people discover the benefits of local and organic food.
There are 2 main types of meat box or vegetable box websites:
Some companies use WooCommerce to sell the same weekly meat or veg box to all their customers.This contains whatever produce is currently in season, and customers can’t choose the contents. You may sell a choice of meat or vegetable boxes (e.g. Small and Large boxes), but there are no customization options for individual customers. The best way to set this up is to add each box as a separate WooCommerce product (e.g. meat box, fruit box, and vegetable box), with or without variations (e.g. size options). Display the products and/or variations in a table using WooCommerce Product Table. Use YITH WooCommerce Subscriptions to get recurring revenue, as customers can sign up to receive the same box weekly, fortnightly, or monthly (or at whatever regular intervals you choose).
The other type of vegetable box scheme allows customers can selecting the items to include in the box.Instead of ordering a box with pre-defined contents, customers can view a list of available items and create a custom product box in WooCommerce. The custom food box company will then fill each box individually, and deliver it to them. Continue reading this tutorial to learn how to set this up.
Before you start, make sure you’re clear on specifically what type of product box you’re building.
How will customers build their own WooCommerce product?
If you follow this tutorial to set up your own WooCommerce custom product box system, it will work like this:
The customer will be taken to a single page listing all the box items that are available to choose from, divided neatly into sections/categories.(Or if you prefer, you can divide the process among several pages.) Each section can have basic instructions above the list of products, for example: “Please choose 1 item from each section.”
Customers can select all the items they require.Standalone items will appear on their own row in the list. Mutually exclusive items will appear as dropdown lists so that customers can choose between them. If you use an additional Product Add-Ons plugin (more info about this below), then you can also add further options such as checkboxes and custom gift messages.
Once they have filled their custom product box, the customer can click the ‘Add Selected to Cart’ button.This will add all the products to the WooCommerce cart with the selected options.
Next, the customer can click through to view their selected products in the cart, view the total price, and make any changes.They can then access the checkout, enter their details and order the 'Build your own product' online.
As the store owner, you will receive email notification of each new order. You can then build the product box containing the items they have selected, and deliver it to them as appropriate.
What will my build-your-own WooCommerce site cost?
The great thing about selling WooCommerce custom product boxes is that you’ll be using the self-hosted version of WordPress. You will own your own data, and won’t have to pay high monthly charges for a hosted e-commerce platform. It also gives you more control over what your website will cost.
Here’s a list of the various elements of your WordPress WooCommerce website and what they might cost:
Your WooCommerce build your own product website
WordPressCMS (content management system) – this powers your overall website and is 100% free of charge.
WordPress theme – free (if you choose, you can purchase a premium WooCommerce theme for approx $65. However, the Storefront theme featured in this tutorial is free).
WooCommerce plugin – this adds the core e-commerce functionality to WordPress and is also free.
WooCommerce Product Table plugin – this paid-for plugin lists your products in a table layout so that customers can choose and customize the options to build their boxes.
Bonus: WooCommerce Product Options plugin– you only need this if the product variation options that come built into the free WooCommerce plugin aren’t suitable. The core WooCommerce platform lets customers select customization options from 1 or more dropdown lists. If you want further options, such as multi-select checkboxes or custom gift messages, then you’ll need the Product Options plugin too.
Any further plugins you choose to add extra functionality, such as ongoing subscription boxes.
Other costs
Web hosting(Ongoing cost) – There are many web hosts for various price ranges. If you’re outside of Europe, we recommend signing up direct with Kinsta or or WP Engine. It’s important to choose a managed WordPress host because they will ensure your website loads quickly, is reliable and you won’t lose sales due to downtime etc. They also come with extra features such as backups with one-click restores, and free staging sites. Scrimping on hosting is a false economy.
Payment gateway feesIf your customers will be paying for their WooCommerce build your own products online, then you will need a payment gateway. This will take a percentage of each sale in fees. PayPal is the easiest payment option to set up and charges are just a few percent. If you will be receiving a lot of online orders then I’d recommend a credit card processor with even lower fees such as Stripe.
Total up the options you’ll need to give you an idea of the cost involved. It’s amazing just how inexpensive it is to set up a website for your business creating your own products.
With those costs clear, we’re nearly ready to cover how to actually create a custom product box website with WooCommerce. But first, let's have a quick look at 2 websites that are already using WooCommerce and product tables to sell 'Build your own' products.
Case study #1 - using WooCommerce to sell custom cosmetics product boxes
Inspire Cosmetics uses the WooCommerce Product Table plugin to sell custom product boxes of cosmetics. They've built a multi-step page where customers are taken through an intuitive journey to build their own product box. First, you choose an experience box. Second, you choose the experience box contents from 2 tables listing the cosmetics products. Third, you complete your order via the WooCommerce cart and checkout.
They used the Beaver Builder WordPress page builder plugin to create the tabbed layout. To boost performance, each tab links to a separate page but the customer has the illusion of remaining on one page for the entire process.
They also use the WooCommerce Quantity Manager plugin to ensure that people select the correct quantity of items for their experience box. This allows them to sell different-sized boxes with the correct validation rules.
Case study #2 - using WooCommerce to sell custom product baskets for pets
Barks and Squeaks uses WooCommerce Product Table to sell create your own product gift baskets for pets and their owners. Customers can quickly choose variations and create a custom product box containing multiple WooCommerce products. You can use the "Who Is It For?" filter above the table to narrow down the list. This speeds up the buying process.
Now you've seen the WooCommerce design your own product system in action on 2 real websites, I'll show you how to set it up yourself!
How to create a WooCommerce custom product box website
Building a 'Build your own product' system from scratch can be a daunting proposition, but WordPress and the right plugins make it really easy.
This section will show you everything you need to know: you’ll learn how to set up WordPress and an appropriate theme, along with the plugins you need. Then, I’ll show you how to use those WooCommerce plugins to set up your product categories and tables, and then create your own product page listing the box contents.
Step 1 – Set up WordPress
First, sign up with a good WordPress web host such as Kinsta or WP Engine and follow their instructions to install WordPress.
Once you’ve logged into the WordPress admin for the first time, go to Appearance → Themes and install a theme. Themes are the “templates” on which all WordPress sites are built, and there are hundreds of thousands to choose from, so you can make your site look just how you want.
You can either buy a premium theme and install it, or use a good quality free theme such as Storefront. All the product images in this tutorial and the accompanying video use the Storefront theme.
If you don’t like the design of Storefront, check out its many child themes which offer a good choice of themes for your WordPress website design. There’s even a child theme designed specifically for food websites!
Step 2 – Install WooCommerce
When you first activate WooCommerce, you’ll be taken to a Setup Wizard. This will walk you through the main steps to creating your online store. For example, it will auto-create your main pages such as the shop page, cart, and checkout. You can choose your tax and shipping settings and set up payment gateways. You can then use the official WooCommerce documentation to make any further changes to the overall setup of your online shop.
Step 3 – Create ‘build your own product’ categories
Once you’ve set up WooCommerce, it’s time to create the categories that the custom product box ordering system will be divided into. First, write them down on a piece of paper to make sure it’s logical and user-friendly.
Think about the best way to group product elements. For example, if you’re creating a ‘build a gift basket’ website then you might want 3 categories: one for the box/basket, one for the contents, and one for finishing touches such as padding and bows.
Remember, you’re creating a tailored user experience: you need to take the customer on a journey to create the custom product box, making one decision at a time.
Once you’ve planned a category structure, go to Products → Categories in the WordPress admin. Create as many categories as you need.
Step 4 – Plan your products
Now, it’s time to create some products. Each of the items that customers can choose as part of the "build your own" process will be a ‘product’ in WooCommerce. Again, it’s best to plan your products before adding them to the website:
First, write a list of all the separate items that customers will be able add to their box when building the custom product.Structure the list into the categories you created a minute ago. For example, if you’re building a ‘design a custom pizza’ website then your list should include things like bases (deep pan base, Italian base), sauces (tomato sauce, spicy garlic sauce), toppings (pepperoni, ham, meatballs, mozzarella, goat’s cheese), and so on.
Next, decide whether to create each item on the list as an individual product, or to group them into variations.I’d recommend using individual products for standalone items, and variable products for items that the customer has to choose between. For example:
In the pizza example, the customer only needs a single pizza base, so you would add a single variable product called ‘Pizza Base’. You might then add 2 variation options to this product: ‘deep pan’ and ‘Italian’. Later, I’ll show you how to display these on an order form with a dropdown so that customers can select a base from the 2 options. (NB: with variable products, it will still sometimes be possible for customers to choose more than 1 option if they want to. However, using this format will discourage them from doing so).
For other types of items, such as pizza toppings, the customer can choose as many as they like. It’s not an ‘either/or’ choice and the toppings aren’t dependent on each other. You should add each of these items as individual products, not as variations.
Tip - Use Add-Ons for extra product options
If variations aren’t flexible enough then you can add extra product options using the WooCommerce Product Options plugin instead. This has extra options such as check boxes, radio buttons, the ability for customers to add some custom text, etc.
Step 5 – Add the products
Once you’ve worked out all the products that you’ll need to create, and decided on the format, it’s time to add them to WooCommerce. Follow this process for each product:
Go to Products → Add New in the WordPress admin.
Add all the product data such as title, description, category, and upload a featured image.
In the ‘Product Data’ section, choose a product type:
Select ‘Simple Product’ if you’re creating a standalone item that can be added to the eventual WooCommerce build your own product without variations. Add a price, plus choose the stock options if you want to use stock control.
Select ‘Variable Product’ if you’re creating several mutually exclusive items for customers to choose from (like my pizza base example in the previous section). This is slightly trickier to set up – please follow the instructions on creating attributes in the WooCommerce documentation. Once you’ve created your attributes, tick the ‘Use for Variations’ box and go to the ‘Variations’ tab. You can then select your attributes and create the variations (one for each options) with their own pricing and stock control.
If you’re using WooCommerce Product Options to provide extra options, then you can use these with the Simple or Variable product type. Add your options under Products → Options.
Finally, click Publish to add the product to the custom product box website.
Build Your Own Product Table with Simple Products & Variations
Build Your Own Product Table with Extra Product Options
Now comes the fun part!
Step 6 – Create a ‘build your own product’ page
It’s time to list everything on a single page or order form, so that customers can select items and build their own custom product box. You’ll need the WooCommerce Table plugin for this:
Create your first tableThe product table builder will open automatically. Go through each page to choose details such as which products to display, and which columns to include. Copy the shortcode from the final page of the table builder - you'll need this for Step 6.
Create more tablesGo to Products → Product Tables and create a different table for each section of the 'Build your own product' system. For example, you might create a different one to list the products from each category.
Create a page (Pages → Add New) which you will use for the custom product box online order form. Add whatever information you like to this page, for example instructions and any rules/restrictions that customers should follow in selecting their products. (E.g. you might add instructions like “Choose 1 product from each category”.)
Divide the page into sub-headings – 1 for each category. For example, a ‘build a custom pizza’ website might need H2 subheadings for Base, Sauce, Cheeses and Toppings.
Insert tables onto the pageNow insert the product tables that you created in Steps 2 and 3 into the relevant parts of the page. To do this, either use the 'Product Table' Gutenberg block or the shortcode that you copied earlier.
The end result will be a page listing each section of your 'Build your own product' order form, like this:
Split the 'build a box' process across multiple pages
In the previous section, you learned how to add multiple product tables to a single page. Alternatively, you can split the 'build your own custom product' ordering process across several pages.
Depending on what you're selling, this can have several benefits:
If you have a small selection of products then it makes sense to keep everything on one page. In contrast, if you have a lot of products or options then it's good to use multiple pages.
It can also be better for performance, as fewer products are being loaded all at once (although WooCommerce Product Table does come with a lazy load option, which helps with page load times).
How to set it up
To create a multi-step 'Build your own product' process, it's important to make things as easy as possible for the customer. The process must be simple and intuitive. For example:
You might add a 'Next Step' button under each product table, intuitively directing users to the next page after they add products to the cart.
For an even more seamless user experience, install the free WooCommerce Add to Cart Custom Redirect plugin. List your basket/box products on the first page of the order process, and use this plugin to redirect each one to the page where you've listed the box contents products. Users will automatically be redirected to the correct next page, depending on which box they choose. This is an excellent option if you offer different content products for each box. (Tip: To use this plugin with WooCommerce Product Table, you must ensure that the Ajax cart option is disabled. The redirection only works if the page refreshes after adding a box to the cart.)
Bonus options
By now, you know how to create a WooCommerce store where customers can select multiple items to create a build your own custom product box. Before we finish, I’ll tell you about some plugins that can further enhance it.
Add 'quick view' links
So far, you've learned how to list the components of your 'build your own' WooCommerce products on a single page, with an add to cart column listing all the options. That's fine if you have a small number of options for each product. But what if you're creating more complex custom product box systems systems, with many variations or product add-ons? You can see from the screenshots above that the product list will start to look cluttered if you have too many options.
If this applies to the build your own products in your ecommerce store, then WooCommerce quick view is the solution:
The WooCommerce Product Table plugin featured in this tutorial is designed to work with our other plugin, WooCommerce Quick View Pro. Use the two plugins together to add a Quick View column to your product tables. Customers can use this to view more images, extra information, choose variations and add to the cart from a lightbox popup.
Quick view is a great way to tidy up your custom product box ordering pages without having to take customers to a separate page for each product. This keeps them within the flow of building their own product and avoids distractions. (Tip: If you install WooCommerce Quick View Pro then I recommend using WooCommerce Product Table to disable the links to individual product pages.)
Set quantity rules and defaults
Out of the box, all your WooCommerce products will have a default quantity of 1. Customers can add as many of each item to their custom boxes as they like.
Many 'build a box' schemes need more control over product quantities. Specifically, they need to ensure that customers add the right number of items from each category to their boxes. You can easily do this with the WooCommerce Quantity Manager plugin.
How it works
Let's say that you have created 3 sections for your WooCommerce built-your-own-product system: Box, Contents, and Finishing Touches. You can add minimum and maximum controls like this:
Box - Set the minimum and maximum quantity for this product to 1.
Box contents - If you want customers to choose up to $30 worth of items, then set the maximum category value to $30. Alternatively, set a minimum and maximum quantity so that customers have to choose a certain number of box items instead.
Finishing Touches - To let customer choose up to 2 decorative options for their custom product box, set the maximum category quantity to 2.
Where possible, the WooCommerce Quantity Manager plugin will stop customers from adding the wrong quantity in the first place. For example, the quantity field for the 'Box' product won't let customers select more than 1.
If the customer tries to add too many products from the box contents category, then they will see an error. The error will be helpfully worded and will advise them what they need to change.
If the WooCommerce cart doesn't contain enough products from a certain category then again, a helpful error will ask them to add more.
To improve user experience, I recommend adding clear messages about the quantity requirements to the build-your-own-product page. You can see an example of this in the screenshot above.
Sell different products for each box or basket
So far, we've assumed that you will be offering the same box contents products to everyone, regardless of which box they select.
If you'd rather sell different products depending on the custom product box, then you can do this too.
Simply create a separate category for each gift basket and use WooCommerce Product Table to create a table listing all the products for each box. Put the box itself in the same category, and use the sort options in WooCommerce Product Table to list the box first. Use the free Product Dependencies plugin to prevent people from buying the contents products unless they have also added the correct box to their cart.
Can I add a fixed price for each box option, instead of charging separately for the contents?
Some people use WooCommerce Product Table to create a custom product box website with a fixed price for each box. For example, they might offer Box A for £10 and Box B for £20. Each box contains a different number of products.
How to sell fixed price product boxes in WooCommerce
Install WooCommerce Discount ManagerFirst, install the WooCommerce Discount Manager plugin on your WordPress website.
Create a fixed price dealNext, go to Marketing → Discounts and click 'Create New'. Select the 'Buy X products for a fixed price' discount type.
Choose the discount detailsSelect which products customers can combine to get the fixed price offer, for example your 'box contents' category. Also select the number of items that they must add in order to be charged the fixed price.
After you have saved the fixed price discount, customers can
Repeat the above steps to create as many fixed price deals as you like. For example, you might create one fixed price to sell quantities of 5, another for quantities of 10, and so on.
If there are any quantities that you don't want customers to be able to buy (for example, quantities of less than 5) then you can use the WooCommerce Quantity Manager plugin to prevent this.
Can I sell box subscriptions, and let customers change their order each week/month?
This is possible, with a bit of extra work.
1. Create your subscription and box contents products
First, install YITH WooCommerce Subscriptions and create a subscription product for each box.Create a separate category for these products. Use WooCommerce Product Table to list products from this category on a public page. Customers can view the subscriptions, sign up and pay online. (Note: The subscription product is just for the ongoing subscription/membership plan - do NOT include options for choosing the box contents as part of the subscription product. You'll create separate products for the box contents next.)
Next, create categories for the box contents products.Add each option for the box contents as a separate product, or as variable products with a choice of options. Decide whether or not to charge for these products:
If all products are included within the ongoing subscription plan, then leave the price of the box contents products as 0. This is because the customer has already paid via their subscription and the products are essentially free.
If customers have to pay for each item in addition to the subscription cost, then add prices for each product.
Alternatively, if you include some products within the basic subscription and charge extra for more expensive items, then you can do that too. If the customer selects chargeable items then they will make a one-off payment for these at the checkout, otherwise they can choose their box contents and check out for free.
Create a new product page for choosing the box contents. Use WooCommerce Product Table to list the products from these categories.
Finally, use the AutomateWoo plugin to automatically email your customers at regular intervals, reminding them to order the box contents for that subscription period.The emails should contain instructions on how to log into their account and order their box contents for that week/month.
2. Restrict access to the box contents products
Restrict what subscribers can order, and how often If you want to control how many items customers can order for their box, then you can add the WooCommerce Quantity Manager plugin.
Prevent non-subscribers from ordering box contents products To prevent non-subscribers from ordering the monthly/quarterly box, you need to restrict the page where you've listed these products. Do this using the WooCommerce Protected Categories plugin. Use it to restrict them to logged in customers.
Can customers change their box each week?
Some WooCommerce subscription box websites like to sell subscriptions for a fixed weekly/monthly cost, while giving customers the option to choose the box contents each week. Unfortunately there is no straightforward way for the customer to change their box each time. The way WooCommerce Subscriptions works is that they subscribe to receive the same products each time.
My suggestion
Lots of people have asked us how to do this, so here's a suggestion:
Use YITH WooCommerce Subscriptions to sell the subscriptions without any actual products (i.e. box contents) associated. For example, you might have a product called 'Weekly Box - 10 Items'. This would bill the customer a fixed amount each week.
In a private area on your site (which you could create using our WooCommerce Protected Categories plugin), you could add the products that are available each week. Create a separate category for each subscription option. You would then use the WooCommerce Quantity Manager plugin to restrict the number/value of items that the customer can order from that category. Set the price for each product to 0.00 so that customers can order the products each week without paying extra. Or if a product has a surcharge on top of their fixed subscription amount, then you can set this as the product price and they must pay this when they check out that week.
Use the AutomateWoo extension to automatically email the customer each week with a separate email for each type of subscription. The email should include details of how to access the hidden area where they can choose their products for the week, and the deadline for ordering. Each week, the customer will log into their account, view the hidden category containing the products that are available on their subscription, select them from the product table, and check out in the usual way.
As with all subscription box services, if the customer doesn't order specific products before the weekly deadline then you would choose the items for them.
That's a lot of plugins!
I realise that this method involves combining several plugins. They are all reputable plugins which we have tested to work well together. If you don't wish to code it from scratch yourself (which would be very complex - and therefore expensive) then we believe this is the best method for allowing customers to choose different contents for their subscription boxes each week.
Can people build their own custom product box without having to pay online?
Yes, you can do this. When you set up WooCommerce, you need to choose one of the offline payment options. For example, you can enable payment by check or invoice. You can reword these to anything you like, so your customers won't see the word 'check'.
They can then place the order in WooCommerce without having to pay. You will receive an email notifying you of the order. This will contain details of the selected products and the customer's contact details. You can then arrange payment offline in whichever way works for you.
Get building! How do you use WooCommerce custom product boxes?
And there you have it! You now know everything about creating a WooCommerce build your own product boxes page. Plus, you know doing this can be quick and easy using WooCommerce and the WooCommerce Product Table plugin.
WooCommerce Product Table makes it easy to create custom ordering pages for your build-your-own-product systems.
All of these plugins come with a 30-day money back guarantee, so you can try them on your WordPress site risk-free!
Designing your own site doesn’t have to be hard, no matter what sector you work in. With this simple tutorial, and some help from the most powerful e-commerce platforms on the web, you’ll be able to set up a beautiful, easy-to-use site.
I’d love to hear how you’ve achieved a build your own box system using WooCommerce. Did you use the plugins I’ve mentioned in this tutorial, or are there any good ones I’ve missed? Please add your comments below, and include a link to your site where we can see it working 😀
Some WooCommerce stores need a way for customers to set priorities when placing an order. By entering a number for each product before adding to the cart, they can indicate how you should prioritize their choices. For example, a customer might be selecting a selection of similar items without knowing which are available. You will ship a product to them based on the priorities they have entered against each item.
The best way to let customers order similar items and set priorities is to list the products in an order form style layout. This makes it easy for them to view multiple products alongside one another and choose their favourites. They can enter their priorities and add the selected products to the cart.
The good news is that you can let your users prioritize by combining two easy-to-use plugins. These are: WooCommerce Product Table and the WooCommerce Product Options plugin. They're both easy to set up, and you don't need to add or edit any code.
Here's how to do it!
Before you start
I'm assuming that you already have a WordPress WooCommerce site with some products added. If you haven't got to this stage yet, do it now. The WooCommerce documentation has an excellent Getting Started section.
Step 1: Set up WooCommerce Product Options to let customers prioritize products
To set priorities, go to Products → Options in the WordPress admin. This will add the priority options to all your products, or to specific products or categories only.
Next, choose which add-ons you'll use to prioritize products
There are 3 types of add-on option that are suitable for letting customers prioritize products. Each of these will appear in the 'add to cart' button of your product table order form. The options are:
Radio buttons - Adds a clickable circle for each priority. Customers can only choose 1 priority for each product.
Select lists - Customers select the priority from a dropdown list of predefined priority options.
Custom input (Only numbers) - Users can type a priority value into a box for each item.
Dropdown/select box
Textarea (number)
Once you've chosen which type of add-on you'll use to collect customers' priorities, carry on below:
Set up your add-ons like the screenshot below, choosing whichever option type you like.
I used 'Radio buttons' in this example. Radio buttons and select boxes need multiple lines, as shown below. If you're using the Text entry so that customers can enter a number in a box, you just need 1 line. Add clear instructions to the description like 'Set Priority (1-5)'.
The table builder will open, or you can access it via Products → Product Tables.
Go through each step of the builder and choose how you want the table to work.
The final page will give you a shortcode for inserting the table. Copy this.
Create a page in WordPress and add the shortcode, or insert the 'Product Table' Gutenberg block instead.
Check the page and you'll see your products listed in a neat order form layout.
Step 3: Test your product priority options
Lastly, view the product table and make sure the priorities are added to the cart correctly. In this screenshot, you can see the products listed with their priority options in the cart widget on the right:
Can't I just use variable products?
If you don't want to use the WooCommerce Product Options plugin then you can collect priorities using normal product variations.
I like add-on options because they're easier to set up behind the scenes than variations, and you can collect priorities in different ways such as radio buttons and text entry boxes. However, you can use product variations to add a 'Choose priority' dropdown list which will appear in your product table order form, just like the 'Select list' add-on type.
Here are the 2 extra bits of information that you need to use variations to set priorities and display them in a product table order form:
To add product variations, go to the 'Add/Edit Product' page for each product. Add each priority option as an attribute, and then go to the variations tab and create variations based on these attributes.
Now your customers can set priorities in WooCommerce!
Using WooCommerce to set priorities is definitely a niche case, but lots of people need to do it.
This tutorial will help you set up WooCommerce so that customers can choose and prioritize products before adding them to the cart.
Lots of people use WooCommerce to sell user-specific products. For example, you might want to sell different apparel or merchandise to sports teams or soccer clubs. Maybe you privately sell uniform products to to schools. You might sell branded company workwear with the company's logo, and need a hidden area of WooCommerce for each customer.
Perhaps you sell the same products to each customer, but with different prices. Maybe you're a health practitioner or service provider, and only sell to existing patients rather than the general public.
Whatever your reason for creating WooCommerce user-specific products, I'll show you how to do it. And the best thing is, it's really easy and you don't need to edit any code!
This simple plugin lets you add hidden product categories to any WordPress WooCommerce store. You can have a separate category for each customer, each with their own user-specific items.
Your sports teams, clubs, companies or other types of customer will use a simple password to log into their organization's hidden category. Or if you prefer, you can automatically restrict your user-specific categories so that each one is only visible to a specific logged in user. Once they've unlocked their private WooCommerce category, they can view and buy their user-specific products. No one else will even know that their hidden products exist!
You can also use this plugin for user-specific pricing in WooCommerce. Simply follow the instructions in this tutorial, and add a different version of each product - each with its own unique price - to each customer's category.
Tips:
If you need a way to quickly clone products for each organization, then the free Duplicate Posts plugin is perfect.
If you're cloning products and want to manage inventory across each version of the product then we recommend the Group Stock Manager plugin. This lets you share stock levels across multiple products.
Let's get started.
Before you follow this tutorial
Before you start, you should have a WordPress website set up with the free WooCommerce plugin installed. The official WooCommerce documentation is a good starting point.
You can then use this tutorial to create your WooCommerce user-specific products and categories.
How to create user-specific product categories in WooCommerce
Configure the plugin on the WooCommerce Protected Categories settings pageFirst, get the WooCommerce Protected Categories plugin. You'll use this to create your hidden customer-specific products.
Secondly, install the plugin and enter your license key on the plugin settings page. You'll find this in the order confirmation email.
Also on the plugin settings page, DO NOT tick the boxes to show your protected categories and products in the public parts of your store. This is important, as your WooCommerce user-specific products should only be visible to sports teams and organizations with the correct password.
Next, go to Products -> Categories in the WordPress admin. Create a separate category for each sports club/organization that you wish to sell user-specific products to. Tick 'Protected' and either password protect it, or restrict it to a specific user.
If you want to provide multiple categories for each organization, then you can do this by adding 1 or more sub-categories. You can create nested structures with as many sub-category levels as you like. As long as you set all the sub-categories to 'Public' and select the organization's main password-protected category as the 'Parent', all the sub-categories and their products inherit the same protection. Organizations only need to login to their account or enter a password once to unlock their whole hidden area.
Now add your user-specific products
Now, you can add all the user-specific products. For each one, tick the appropriate product category. Leave the product visibility settings as the default. The plugin will automatically protect them with the same password(s) as the protected category.
Lastly, create a user-specific category login page. This depends on whether you've set up password-protected or user restricted categories:
WooCommerce password protectedcategories. Add the shortcode [category_login] to any page of your site. All the sports teams/organizations will use this login page to access their user-specific products. The plugin will redirect them to their own personal category when they enter the password.
Now, link to this page in any way you like, for example from your navigation menu, website header or footer. Or you can keep the login page hidden and email it to your customers instead.
User restricted categories - Add a link to a front end login page. This could be the main WooCommerce 'Account' page, which displays a login form to logged out users and guests. Or you could install a front end login plugin such as Theme My Login. Either way, users can use this page to login to their account and unlock their hidden products.
Finally, you can instantly redirect customers to their personal WooCommerce store by installing the free Peter's Login Redirect plugin. This has a handy feature to add a custom redirect URL for each individual user. Simply add the URL of their hidden WooCommerce category.
And that's it!
In 7 simple steps, you have created WooCommerce user-specific products and categories.
The sports teams or other types of organization will visit your website and access the login page. They will enter the password for their user-specific category, or log in to their WordPress user account. They will be redirected to the correct hidden category containing their user-specific products.
Each organization's category and their products are hidden from public view, so only people with the correct access details can see them. This includes hiding them from search engines and other places that people might accidentally find them.
Once your customers have found their user-specific products, they can add them to the cart and checkout using the standard WooCommerce checkout. You can use other plugins to add multiple payment gateways, shipping options, and everything else you need to make your store a success.
Bonus tip #1 - Get more sales with a WooCommerce product table layout
Before we finish, I'll tell you about another great plugin for selling WooCommerce customer-specific products.
Our bestselling WooCommerce Product Table plugin lists products in a space-saving table view. It's an ideal layout for user-specific products because you are selling to the same customers on a regular basis. They're already familiar with your products and would rather order quickly from a one-page WooCommerce order form. They don't want to scroll through large images and multiple pages of products.
The WooCommerce table view lets your customers see all their branded products in one place. They can quickly search, sort and filter the table to find what they want. The multi-select checkboxes make it easy to tick as many products as they need. Finally, they can click a single button to add everything to the cart.
WooCommerce Product Table integrates beautifully with WooCommerce Protected Categories. Once the customer has unlocked their user-specific category, their own personal products will appear in the product table. This means that you can create a product table listing all your products, and each customer will only be able to see their own personal products. Neat!
Bonus tip #2 - Sell customizable products with Product Add-Ons
Many WooCommerce stores sell customizable client-specific products. For example, perhaps you sell sportswear or workwear and the client needs to upload their logo. Maybe the client wants to add custom text which you will print on their products.
You can do all this by adding another Barn2 plugin, Product Options. This lets you add extra fields to your user-specific products, such as File Upload fields and Text Input boxes. These fields appear on the single product page. Your customers can provide the extra information, and you will receive it via email once they place their order.
What do you need user-specific products for?
I hope the advice in this tutorial is useful and helps you to create your own WooCommerce user-specific products and categories. I'd love to know what sorts of organization you sell to that have their own unique products.
Do you provided branded apparel to sports teams? Maybe you sell corporate workwear with the company's logo. Maybe you do something else that I haven't thought of! Please let me know in the comments.
A WooCommerce secret sale plugin is perfect for creating a hidden sale, with special discounted prices that only pre-approved customers can see. Today, I'm going to tell you how to create secret sales for your own WooCommerce store.
We'll do it using the WooCommerce Protected Categories plugin, which just takes a couple of minutes to set up. You'll have your secret sale up and running in no time!
How does the WooCommerce secret sale plugin work?
WooCommerce Protected Categories is the perfect WooCommerce secret sale plugin. It works by creating a hidden WooCommerce category for your secret sale. The sale category contains your discounted products with the special pricing.
It's completely hidden from the public parts of your site, so only people with access to this hidden category can see the sale prices and buy at the reduced rates. Everyone else continues to see the full priced version of each product. They'll have no idea that the secret sale even exists!
There are 2 ways to share access to your hidden WooCommerce secret sale category:
You can password protect the sale category with 1 or more secret passwords. Give the password to everyone who needs to access the secret sale.
Alternatively, you can mark the WooCommerce secret sale category as 'private' so that only logged in users with the correct role can see it.
Next, I'll show you how to create a secret sale in WooCommerce with both options.
To follow these instructions, I'm assuming that you already have a WooCommerce website with full-priced versions of the products that you want to include in the secret sale. (If not, then the official WooCommerce documentation will help you get to this stage.)
Use the instructions in the 'Getting Started' email to install the plugin and activate your license key.
On the plugin settings page, DO NOT tick the 2 options to show the hidden categories in the public parts of your store. You need the plugin to hide your secret sale products!
Now, go to Products > Categories in the WordPress admin. Create a category called 'Secret Sale' (or whatever you want to call it). Don't worry about protecting it for now - we'll do this in the next section.
If you want to sub-divide your secret sale into sub-categories, create these too. Select the main Secret Sale category as the 'Parent' of your sub-categories.
Next, install the free Duplicate Post WordPress plugin. Go to the plugin settings page and make sure you have enabled the option to duplicate the 'Products' post type.
How to duplicate a product in WooCommerce
Now go to the main list of Products in the WordPress admin (this is the 'Products' list on the left). Hover over each product that you want to include in the WooCommerce secret sale and click the 'Duplicate' link that appears.
This will clone the product and save the new version as a draft with '(Copy)' in the title. Click on each of your cloned products and make the following changes:
Remove '(Copy)' from the title.
Remove the product from the full-price category, and tick the secret sale category instead.
Change the main product price to the correct sale price.
Click the blue 'Update' button.
Now, your WooCommerce secret sale category contains a cloned version of each product with the special discounted price.
The next step is to protect your hidden sale category and hide it from public view.
Option 1 - Password protect your secret sale category
The easiest option is to password protect the category that you're using for the WooCommerce secret sale. Go back to the Edit Category page (Products > Categories in the WordPress admin). Click to edit the category and click the 'Password protected' option in the Visibility section. Enter 1 or more passwords to protect the secret sale category.
If your secret sale category has any sub-categories, leave these set to 'Public'. They will automatically be protected with the same password(s) as the main secret sale category, so customers can unlock the entire sale area with a single password.
Next, you need to create a way for eligible customers to access the WooCommerce secret sale category. You can either link directly to the secret sale category page (e.g. from your navigation menu or an email). Or, you can create a secret sale login form by adding the shortcode [category_login] anywhere on your site.
Either way, whenever someone tries to access the secret sale category (or one of its sub-categories), they must enter a valid password before they can see the sale products inside.
Option 2 - Restrict your sale category to specific logged in user roles
If all your customers already have a user account on your WordPress website, then you may want to automatically show the secret sale to eligible customers. This is more customer-friendly than forcing them to enter a separate password to unlock the secret sale.
You can achieve this using the private categories option in WooCommerce Protected Categories. Private categories (and their products and any sub-categories) are completely hidden from public view. They are visible to logged in users with the correct role.
Go to Products > Categories and click to edit your WooCommerce secret sale category.
Go to the Visibility section and select 'Private'.
Save the category.
Chose which user roles can access the WooCommerce secret sale
By default, this will make the secret sale products visible to logged in administrators and WooCommerce store managers. You probably want other user roles to be able to access the sale too. The free User Role Editor WordPress plugin is the solution. Follow these instructions to choose which role(s) have access to the private secret sale content.
If you want ALL logged in users to have access to the secret sale, then you need to make private content available to the Customer and Subscriber roles. If you want to create a separate user role for the secret sale, then you can do this too. That way, you can continue showing the prices to normal customers, with an extra user role for people who can access the secret sale.
Tip: You can change each customer's user role by going to the main Users page in the WordPress admin, clicking to edit the user, and selecting a different role from the dropdown.
How do users log into the secret sale?
If you're using the private categories option for your WooCommerce secret sale, then the discounted products will automatically be available to logged in users with the correct role. You don't need a separate login form for the secret sale.
Instead, customers can simply login using the standard login form for your WooCommerce store. If you haven't added one yet, then the WooCommerce 'My account' page will automatically show a login form to logged out users. Or if you prefer, you can create a login form using a plugin such as Theme My Login. Either way, logging in will unlock the secret sale for the correct user roles.
Ending your WooCommerce secret sale
All good things come to an end, and secret sales are no exception.
When it's time to end your secret sale, it just takes a minute to close it down:
Use the free Redirection WordPress plugin to automatically direct everyone who tries to access your secret sale category to your main WooCommerce store. This will prevent people from seeing any broken links, for example if they have bookmarked the sale page. If you want to be really belt and braces, then you can also do the same for your sale products.
Next, you can either delete your secret sale category completely via Products > Categories. Or, if you're planning to reactivate your WooCommerce secret sale in future, then just change the password to something that no one else knows. That way, you can easily create new sales in future, but you've locked everyone out for the time being. (If the category is set to private, then you just need to switch it to 'Password protected' and add a password.)
Decide whether to delete your sale products or keep them dormant until the next secret sale. If you decided to keep them, then you don't need to worry about anyone seeing the discounted prices while the sale is inactive. They're still in the password protected category and will remain hidden from public view.
Now you're ready to set up the WooCommerce secret sale plugin
And that's it! In this tutorial, I've told you everything you need to know about how to create a WooCommerce secret sale. You can create a category for your sale, add a discounted version of each product, and hide it from public view. I've shown you how to password protected the secret sale, or make it available to specific user roles only.
Now it's time to get started and use the WooCommerce secret sale plugin on your own website. The plugin comes with a full 30-day money back guarantee, so you can try it risk-free today. Happy selling!
In this tutorial, I'll show you two ways to display a WooCommerce variations dropdown on the shop page and category pages. This makes it much faster for customers to add products to their cart, helping to grow your conversion rate.
By default, WooCommerce only shows a variations dropdown menu on the single product page. It's the standard way to choose different options for variable products. But what if your customers need to select variation options from other parts of your shop - such as the main shop page, product category pages, or any other page on your WordPress website? There's where a WooCommerce variations dropdown plugin comes in.
Keep reading to discover two easy ways to add WooCommerce variations dropdowns to other parts of your site.
After that, you'll learn how to add WooCommerce product dropdown options to your shop and category pages like this:
First, I'll tell you how to take this a step further by displaying your products in a one-page order form complete with variation dropdown menus, like this:
Both plugins are excellent ways to add a WooCommerce product drop down list of variations directly to the WooCommerce shop page. Customers can view products, choose variations from a dropdown, and add to the cart without visiting the single product page.
How does WooCommerce display variations?
Before we start, let's look at what you can do with WooCommerce variation dropdowns without any extra plugins. The free WooCommerce plugin comes complete with a variable product type. You can add a choice of options for each product.
For example, you might want to create a WooCommerce variations dropdown for color and another for size.
This type of WooCommerce dropdown menu is listed as product attributes dropdowns on the product detail page. Customers can select any combination of the variation options from the dropdowns before adding the product to the cart. Their choices will add to the cost of the product, and added to the cart with the correct totals.
This is all built into the WooCommerce core, without needing any extra plugins.
So why do I need a WooCommerce variations dropdown plugin?
Now it's time for the bad news. The built-in WooCommerce variations dropdown is perfect if customers only need to select variations from the single product page. The limitation is that the product options dropdown doesn't appear anywhere else on your WooCommerce store.
WooCommerce shop page - no product dropdown options for variations!
The variations dropdown menu doesn't appear in the list of products on the shop or category pages. Instead, the usual add to cart button (which appears for simple products without variation) is replaced with a 'Select options' button linking to the single product page.
This means that customers have to click through to the product details page to buy variable products. They can't view the variation options or prices on the product listings pages at all. This adds an extra click to the process and lengthens the buying process.
No one wants that, as customers are more likely to get frustrated and give up!
It's better to list WooCommerce variations dropdown wherever your products are displayed. You'll get more sales if customers can view all the options and buy straight away, without having to click through to another page.
Case study – variation dropdown menus on OrderAmysFood.com
OrderAmysFood.com have a food ordering service on their website. Customers can order a whole meal along with entrees, side dishes, drinks and dessert.
OrderAmysFood.com want to accommodate everyone, so there are variations to most menu items. A customer can choose a larger portion size, or ask for their curry to be extra spicy, or even ask that it’s made vegan-friendly. To make this happen, they’ve created WooCommerce dropdown menus for variations using the Woo Product Table plugin.
The order form includes at least one dropdown for each dish. Each time a customer selects a dropdown variation, the cost of the product is recalculated to show how much it’ll cost exactly. It’s extra convenient for the customer to be able make these selections right there and then. And seeing the price change instantly means there’s no surprises around the corner.
Carry on reading to find out how to add your own WooCommerce variation dropdown menus using either the Express Shop Page or Product Table plugins.
Method 1: How to list attribute options in a table with WooCommerce variations dropdown lists
Add a product table with WooCommerce variations dropdowns anywhere on your site
Method 1 takes a unique approach to showing variations on the shop page. Instead of just adding the product dropdown options to your existing store layout, it actually improves the display of your products.
It does this by creating a fast one-page ordering experience.
The Product Table plugin is the perfect way to create quick order forms complete with WooCommerce variation dropdowns and add to cart buttons.
It's much more flexible than the default Woo shop and category page layouts. You have full control over what's displayed in the table. This includes several ways to list variation options including WooCommerce product dropdown lists. You can choose your columns, show or hide the images, choose the type of add to cart buttons, and much more.
While you can't use it to show the variation price in a dropdown, the price of each variation is clearly displayed when the customer selects a variation. Or to make the variation price even more visible, you can display each variation on its own row in the table instead of as product dropdown options. This keeps the price and other variation data visible all the time.
There's plenty you can do with product tables. But for the purposes of this tutorial, we're looking at how to add the WooCommerce variations dropdown lists for variable products. Now we'll get started!
Praise for how WooCommerce Product Table lists variation options
Set up Product Table with WooCommerce variation dropdown menus
Before you start, I expect you to have a WordPress website with WooCommerce installed and some variable products added. If you don't know how to do this, then the official WooCommerce documentation will walk you through it.
Then, follow these easy steps to list variation dropdowns on the shop page and other parts of your store:
Go to Products → Product Tables. This will launch the table builder (which also opens automatically on activation).
Enter your license key and choose the options for your first product table.
On the 'Select products' page, either select which of your default shop pages to display the table on; or opt to add it manually to a page later. If you choose the latter then you can then select which products/categories/etc. to display.
Make sure you include the 'Buy' column in the 'Columns' section.
Select the variations dropdown option under 'Variations'. This will show your WooCommerce variations as dropdown lists in the add to cart column.
Use the other pages to add filters, change the default sort order, etc.
After this, if you selected to display the table automatically on your shop page templates then it will start appearing on your site immediately. If you selected to add it manually then you need to create a page and either add the 'Product Table' Gutenberg block - or the shortcode from the last page of the table builder.
Either way, once you've finished you'll see a WooCommerce table with variations dropdowns.
Method 2: Add WooCommerce variation dropdowns to the shop page
Our second method for creating shop page variation dropdowns is super-simple. After all, the WooCommerce Express Shop Page plugin was designed exactly for this purpose!
This simple plugin takes the variation dropdowns from the single product page, and displays them on the main shop page and category pages. It does the same for quantity boxes. That's why it's the perfect WooCommerce select variation on shop page plugin - customers use the variation dropdowns and quantity fields directly on the main shop and category pages.
Unlike method 1, the overall layout of your shop pages won't change. The only difference is that after installing the plugin, you will have variation dropdowns and quantity fields on these pages - keeping your existing store layout.
A quick setup wizard will open when you first activate the plugin.
Use the setup wizard to choose whether you want the WooCommerce product dropdown options and/or quantity fields to appear on your shop and/or category pages.
And that's it! An incredibly simple way to show WooCommerce variation dropdown lists on your main shop pages.
Can I create dropdown lists of other types of product option?
So far, we've just talked about how to create WooCommerce variation dropdown lists for your variable products. Everything in this tutorial equally applies to the extra product add-on fields that you can create with the WooCommerce Product Options plugin.
This plugin adds extra options for your products including more flexible dropdown lists, checkboxes, radio buttons, text entry fields for custom messages, and more. You can use it with either the WooCommerce Express Shop Page or WooCommerce Product Table plugin to show the extra product options on the shop page. Here's an example of what it looks like with the Express Shop Page plugin:
Use the WooCommerce Product Options plugins to add other types of product add-on on the shop page
That way, you can show all sorts of product options on the shop page - not just WooCommerce variation dropdowns.
Some store owners don't like the style of the WooCommerce dropdown menu for variations. Instead, they would prefer to display variation buttons instead of a dropdown.
You can do this by using the WooCommerce Product Options plugin to set up your options instead of using variations. This gives you extra styling options instead of just drop down lists. For example, this screenshot shows a charity donation product with the options added using different types of button instead of dropdowns. The "How much do you want to donate?" option displays text buttons for the customer to click on. The "Which charity are you donating to?" option has image buttons. As you can see, these are much more visual than using WooCommerce variation dropdowns:
Bonus tip - Show WooCommerce variation dropdowns in a quick view lightbox
So far, you've learned how to display WooCommerce variation dropdowns within a product table layout. You can also list variations as dropdowns in a quick view lightbox. To do this, you need the WooCommerce Quick View Pro plugin.
The quick view plugin is super-flexible. Here are some suggestions of how you can use it for your product variation dropdown lists:
Add Quick View buttons, links and hover effects to the shop and category pages
Use product tables with our WooCommerce Quick View Pro plugin
Transform your store layouts by using Quick View with our WooCommerce Table plugin
Now you're ready to create variation dropdowns in WooCommerce
That wraps up our guide on 2 easy ways to add WooCommerce product variation dropdowns to the shop page:
Either create quick order forms with variation dropdowns using the WooCommerce Product Table plugin, or;
Add variation dropdowns to your usual store layout with the WooCommerce Express Shop Page plugin.
Either way, this is a great way to improve the shopping experience for your customers. Both options make it easy for customers to select variations on the shop page in WooCommerce - a faster way to shop. Customers no longer have to click to the product detail page to view variation attributes and pricing.
By saving your customers time and making it easier to buy from you, displaying product variation dropdown menus in this way can have a big impact on sales. Get your favorite plugin today, and make life easier for your customers!
Lots of people ask us which WooCommerce bulk discount plugins work with our Product Table and Quick View plugins. Discover WooCommerce Discount Manager, which works beautifully with WooCommerce Product Table and WooCommerce Quick View Pro.
In this tutorial, we'll explain how you can use bulk discounts and dynamic pricing with your own product tables and quick view popups on your WordPress site. You can also see a product table with WooCommerce Discount Manager in action on our demo page.
WooCommerce Discount Manager lets you create bulk discounts based on a minimum and maximum quantity for specific products, across your entire WooCommerce store, or for specific categories or even specific products. It's an incredibly advanced WooCommerce discount plugin and you can use simple or advanced logic to create sophisticated pricing rules. You can create multiple prices per WooCommerce product based on a wide range of discount rules and logic.
How it works with WooCommerce Product Table
If you're using WooCommerce Discount Manager on your WordPress site, then customers can choose a quantity from the product table and click the Add to Cart button. When they click through to the cart and checkout page, the correct quantity based pricing discount will be applied based on the quantity ordered.
If your product table page has a sidebar, then you can add the WooCommerce Cart widget. When people add products to the cart, the correct volume discount or quantity discount will be shown in the Cart widget on your WooCommerce store. This reassures customers that the volume discounts are working.
If there's no Cart widget on the page, then customers can see the cart discount when they click through to the cart and checkout.
The 'Price' column in the product table will always show the price for a single item. See below for some suggestions on how you can display available bulk discounts in the product table.
How it works with WooCommerce Quick View Pro
If you're using the Discount Manager dynamic pricing plugin with WooCommerce Quick View Pro, then the correct discounted price will appear in the quick view lightbox.
Can I show the bulk discount prices in the product table?
If your product table includes a product Price column then this will always show the product price for 1 item. This applies whichever bulk discount or dynamic pricing plugin you use - the Price column never changes.
When you create a discount, you can add some text to be displayed about the deal, and/or enable a tiererd pricing table. These always appear on the single product page (and in the WooCommerce Quick View Pro lightbox), and you can also display them in a special discount_content column of the product table like this:
Where to get the plugins
As you can see, WooCommerce Discount Manager works beautifully with the product table layout. It also works nicely with WooCommerce Quick View Pro if you want to show the discounted prices in a quick view lightbox on your WordPress site.