WooCommerce Product Add-ons: Your Guide To Customizable WooCommerce Products

By Updated: March 27, 2019 4

Want to give your shoppers the ability to customize their own products at your store? With WooCommerce Product Add-ons and WooCommerce Product Table, you can create your own customizable products that your shoppers will be able to build for themselves.

By the end of this easy-to-follow guide, you’ll be able to create products that work like this:

WooCommerce product add-ons example

Shoppers can use checkboxes, radio buttons, and text fields to build their own custom product. And as they make new customizations, your store will automatically tally up the price so that shoppers know exactly how much their customizations will cost.

Keep reading to learn how to create your own WooCommerce custom product builder using WooCommerce Product Add-ons and WooCommerce Product Table.

WooCommerce Product Table

The easy way to create WooCommerce customizable products for your store.

Personalized WooCommerce products give your shoppers more control

There are a ton of potential use cases for offering personalized products via the method in this tutorial. You can give your customers the ability to:

  • Choose/upgrade different materials on their product
  • Add an extra “something” to their product
  • Enter custom text to add personalization to their product. For example, an engraving or a custom printed message.

This functionality is great for all types of products including:

  • T-shirts
  • Hats
  • Hoodies
  • Mousepads
  • Bottles or mugs
  • Keychains
  • Buttons
  • …you get the idea. If your product can be customized, you probably have shoppers who want to customize it.

This approach can also be helpful for both consumer and business sales. For example, beyond the obvious consumer angle, you could sell direct to businesses and let them create their own personalized gear to offer to employees or hand out at events.

Really, there are a seemingly infinite number of use cases for personalized products – you just need an implementation that gives you the flexibility to offer the product personalization options that fit your store.

What you need to create customizable products in WooCommerce

To follow this guide and create your own custom product designer, you’ll need to add two plugins to your WooCommerce store.

The first plugin is the official WooCommerce Product Add-ons plugin. As the name suggests, this plugin lets you offer “add-ons” for your products. Essentially, you’ll offer each customization choice via a product add-on.

The second plugin is WooCommerce Product Table. This plugin helps you take all those add-ons and display them in an easy-to-shop table format. WooCommerce Product Table is built to play nice with WooCommerce Product Add-ons, so the two make for a great pair.

Below, we’ll show you a step-by-step guide for how to use these plugins to create a customizable bottle. While we chose a specific example to focus the tutorial, you can apply these same principles to any type of customizable product.

Get WooCommerce Product Table

How to create your own WooCommerce custom product builder

For this example, let’s say that you want to give your shoppers the following options for your “build your own bottle” product:

  • Bottle color – required
  • Lid type – required
  • Custom text message – optional

Here’s a bird’s eye view of the steps that you’ll follow to create this build your own product functionality:

  1. Create your base product with the regular WC functionality
  2. Use WooCommerce Product Add-ons to add customization options
  3. Use WooCommerce Product Table to display your product builder on the front-end

Step 1: Create your base product using WooCommerce

We won’t go into too much depth here because you’re probably already familiar with the basic WooCommerce functionality.

To get started, go to Products → Add New and set up the basic details for your product like:

  • Title
  • Description
  • Category
  • Image(s)

Then, fill out the Product data box…

Configuring the product data box

Depending on your needs, you’ll typically want to go with either a Simple product or a Variable product.

For this example, we’ll use a variable product because we want people to be able to choose the base color for the bottle that they can customize.

So each base color gets its own product variation. Then, shoppers can build their product on that choice.

There are also plenty of situations where a simple product might work better, though. For example, maybe you have one base mousepad that people can customize. In that case, you don’t need a variable product because everyone is customizing the same basic mousepad.

If you’re unsure whether you should use a product variation or an add-on for one of your product options, here’s a quick guide – and remember, you can mix-and-match product variations and add-ons. It’s not either/or…

Use a variable product if…

The customer must choose from a specific list of options and they can only choose one of those options.

Color is a good example. If you apply it to our bottle example, every bottle must have a color from a specific list. But shoppers can only choose one color. They cannot mix-and-match different colors or provide their own color. That’s why it’s better as a variable product.

Use product add-ons if one or more of these conditions apply…

The customer can:

  • Opt to skip the option (e.g. it’s not a required choice).
  • Enter their own 100% custom characteristic (e.g. a custom text message)
  • Choose more than one of the options (e.g. a set of checkboxes)

Finally, for the price, enter the base price of your customizable product. You can have each customization choice add its own price, so you don’t need to worry about accounting for that right now:

WooCommerce product data

Step 2: Add customization options with WooCommerce Product Add-ons

Once you’ve set up your basic product, you’ll use WooCommerce Product Add-ons to add each customization option.

Remember – for our example, we’ll need:

  • Lid type – we’ll use checkboxes so that people can order multiple different lids if they want to change them out. Another option would be to use radio boxes if you only wanted people to be able to choose a single lid type.
  • Custom text message – this one requires a text field for shoppers to enter the message.

To create a new add-on, you go to the Add-ons tab of the Product data box and click New add-on:

WooCommerce product add-ons interface

Then:

  1. Use the drop-down to select the add-on type
  2. Give it a name
  3. Choose whether or not shoppers are required to select it
  4. Enter a description (this text will display on the front-end product builder – so make it helpful for shoppers)

Create new add-on

For this first one, we’ll use checkboxes for the lid type and make it required because we want to make people choose at least one lid.

Then, use the Label and Price table to add each customization option. The Label is the text field that users will see, and the Price is how much extra the selection costs on top of the base product price:

Fill in options

And that’s it for your first add-on!

Repeat the process for other customization options

To add additional customization options, just click New add-on again and repeat the process.

For example, here’s what the custom text message field looks like. Notice how you can add a min/max for the number of characters. This is helpful when you have limited space for customizing the product:

Text field

Step 3: Create the front-end interface for your customizable product(s)

Once you’ve finished setting up your product(s), you’ll finish things out by using Woo Product Table to display your customizable products and create your front-end order form.

You can either create a separate order form for each customizable product or you can group products together. Or, you can even do both and embed separate order forms for multiple products on the same page.

Once you’ve installed the plugin, go to WooCommerce → Settings → Products → Product tables to activate it and configure the default settings:

WooCommerce product table settings

For many of these settings, you can configure them according to your preferences (that is, your custom product builder will work either way).

There are a few settings you’ll want to pay special attention to, though.

First, the Columns setting lets you control what information appears on your table. For our example, we used the following configuration:

Image,name,add-to-cart:Configure your product

But if you wanted to, say, include the product description, you could add a column for description.

Learn about all the column options

Add to cart column settings

Second, consider the Quantities and Variations options in the Add to cart column settings. Because you’re selling custom products, you might want to disable the quantity selector on your order form.

There are also some use cases where you would want to enable it, though. For example, maybe you’re selling wholesale custom orders to businesses where that business wants to order lots of custom products with the same configuration (e.g. mousepads with their logo).

Second, you’ll want to choose how to handle Variations. You can either let users select the variation as a drop-down. Or, you can give each variation its own row.

Add to cart column

Table controls settings

You also might want to disable the search box and filter options in the Table controls settings. By default, WooCommerce Product Table lets users search and filter all the listed products. However, for a custom product, you might want to just get those settings out of the way.

Table controls

Product add-ons settings

Finally, you might want to configure WooCommerce Product Table’s dedicated settings for the WooCommerce Product Add-ons plugin.

These settings are at the bottom in the Product add-ons section:

  • Add-on groups layout – lets you choose whether to display entire add-on groups above/below each other (vertically) or beside each other when space allows (horizontally). For our example, groups are “Lid Type”, “Custom Message”, etc.
  • Add-on options layout – the same idea but for the individual options inside groups. For our example, this would affect how the individual lid choices are arranged.

Product add-ons settings

Add WooCommerce Product Table shortcode to order page

Finally, to actually display your WooCommerce custom product builder form on the front-end, you can use the new Insert Product Table button in the WP editor to insert the WooCommerce Product Table shortcode:

Insert product table

To target specific products, you can use WooCommerce Product Table’s include/exclude rules to target:

  • Individual products by ID
  • Categories/tags
  • Etc.

Learn more about include/exclude options

Once you do that, you should see your customizable order form on the front-end like so:

Order form

Step 4: Use some custom CSS to clean up your product customizer form (optional)

By default, the add-on description for each option kind of blends in because it’s the exact same font as the individual customization options.

To fix that, you can use some simple CSS targeting the addon-description CSS class.

For example, adding this to the WordPress Customizer (Appearance → Customize → Additional CSS) makes the description bold, which helps break up your product builder into more organized sections:

.wc-pao-addon-description {
font-weight: bold;
}

Custom CSS

Step 4: Too many options? Add WooCommerce quick view

WooCommerce customizable product quick view

If you have lots of options for your WooCommerce customizable products, then each one will take up quite a lot of vertical space. For example, you can easily see this in the screenshots above.

In our examples, we have countered this by increasing the image size in the product table. As a result, the image on the left lines up nicely with the product options on the right.

WooCommerce Product Table Quick View Magnifying GlassAs an alternative, you can use WooCommerce quick view to tidy up the list of customizable products. This lets you remove the add to cart column from the product table, and replace it with ‘Customize’ buttons. Customers can click on these to choose the variations and add-on options for each product in a quick view lightbox. They use the lightbox as the WooCommerce product configurator, and add to the cart from there.

WooCommerce Quick View

The quick and easy way for customers to explore and buy your products.

Of course, you could just send customers to the single product page to make their choices. However, it’s better to use WooCommerce quick view because customers aren’t taken to a separate page for each product. This keeps them on the main list of products, encouraging them to buy multiple customizable products at once.

How to sell customizable products in a quick view lightbox

  1. Install and activate the WooCommerce Quick View Pro WordPress plugin.
  2. Visit WooCommerce → Settings → Products → Quick view.
  3. Paste in your license key and choose which information should appear in the quick view. Rename the ‘Quick View’ button text to something more relevant, such as ‘Customize’ or ‘Configure’.
  4. Now visit WooCommerce → Settings → Products → Product table.
  5. Find the ‘Columns’ option and replace add-to-cart with quick-view. (Or if you prefer, you can have a quick view column in addition to the add to cart column – it’s up to you.)

This will remove the add to cart column from your product tables and replace it with Customize buttons. Customers can use these to customize their products in the quick view lightbox.

Some options for displaying multiple customizable products

Before we finish things out, let’s quickly run over some of the ways to display multiple build your own products that we mentioned earlier.

One option is to add multiple customizable products to a “Build Your Own” category and then display all of those products in a single list. For this, you would want to use the category= include rule to target the relevant category slug.

Another option would be to use multiple shortcodes on the same page and include regular text headings to divide your products. To do this, you just add the shortcode multiple times for each product or category that you want to display.

Putting it all together: How the shopping experience works

Once you’ve set up your customizable products, here’s a look at how it will actually work for shoppers to create their own products.

To get started, shoppers will head to your product order form (this is what you created above).

There, they’ll customize their product using all of the options that you’ve included.

If you have multiple customizable products, they can build multiple products and add them to their cart without any page reloads.

WooCommerce product add-ons example

Once they’re finished, they can go to their cart, where they will see both the overall price for each item, as well as a breakdown of how much each individual customization choice cost them.

Beyond that, they’ll also be able to see all the customization choices that they’ve made. This is helpful because it lets them “doublecheck” to make sure they’ve done everything properly:

Shopping cart

Finally, they’ll also be able to see this same summary on the checkout page, which gives them plenty of chances to make sure they configured the product properly:

Checkout Page

And then once they finish their order, you’ll be able to clearly see all of their customization choices from your WooCommerce dashboard so that you know exactly how to build their order:

WooCommerce Dashboard

Start offering personalized WooCommerce products at your store

With WooCommerce Product Add-ons and WooCommerce Product Table, you can offer your shoppers personalized products with a flexible product builder that you can adapt to your needs.

WooCommerce Product Add-ons helps you add a variety of customization options in the form of:

  • Checkboxes
  • Radio buttons
  • Text fields

And WooCommerce Product Table, along with its built-in WooCommerce Product Add-ons integration, helps you display one or customizable products in an easy-to-shop table format.

To get started, get your two essential WordPress plugins: WooCommerce Product Table and Product Add-ons.

WooCommerce Product Table

The easy way to create WooCommerce customizable products for your store.

And if you have any other questions about creating customizable WooCommerce products with this method, don’t hesitate to leave a comment!

Colin Newcomer

Colin Newcomer is a freelance WordPress writer for hire with a background in SEO and affiliate marketing. He helps clients grow their web visibility by writing primarily about digital marketing and WordPress. You can hire him to write for your website.

4 Comments

  1. GPL Lives!
    December 1, 2018 Reply

    Hello Katie
    "You only need an active license in order to enable the plugin on any new domains, or access plugin updates or support - all of which is compliant with GPL"

    That's not *strictly* true is it? The product will not work initially unless the license is activated - and it is *that* part that violates the GPL. Every other top plugin whether from Code Canyon or premier plugins like Gravity Forms or Woocommerce add-ons, will still work whether the license is input or not (and this is why Wordpress and Woocommerce will actually recommend those plugins). You just don't get access to automatic updates or support without the license but you can use the plugins just fine from the start.

    In your case the plugin will not work without activating the license, so yeah you are not the first to play fast and loose with GPL compliance, and Wordpress frowns on companies who do that. Take a read of the GPL folder in your plugin, and *your* license requirements make that a nonsense if you can't use it initially.

    I'm a designer/developer (more designer as coding ability is minimal) and I use and test a number of plugins on localhost when I build client sites. Many times I have bought plugins that I thought would go into the final build only to find they were unsuitable for one reason or another. I don't do that anymore, especially when they are high cost.

    There is absolutely no way I'd be spending money for these plugins until I know what works for a particular site and what doesn't. Fortunately GPL has me covered there, and if a company abuses GPL by crippling it from working initially without a valid license, then I'll get it nulled.

    If a plugin is actually going to be used on site and it has license requirements then I will get it for the client because he will likely need support and certainly updates. The cost will be built in - he'll also be aware of his annual costs for said plugin support/updates. I have Developer licenses from many plugins too, but I didn't buy them blindly I tested the plugins well before deciding they would suit me.

    So may I respectfully request that you comply with the true spirit of the license and junk the license activation for the initial installation. Do as other reputable companies do and keep it optional for support and updates. You'll actually find you get more sales in the end because the majority of users will WANT the comfort of support and auto updates..

    And if some people who can't afford a license or don't need support or upgrades use your plugin? Well that's just the risk you take with GPL. Many of those people would never have bought your plugin anyway so your not losing sales, think of it as PR because the upside is your product will become MUCH more widely used and maybe one day Woocommerce may make you an offer you can't refuse by incorporating your plugin into their core. :-)

    Woocommerce are now incorprated with Automattic - which includes the Wordpress.com platform (and how many users are on THAT!) There's huge potential for this plugin but it will not be on Wordpress/Woocommerce radar in a positive way as long as that license abuse continues.

    Which is a pity as it's actually a very good plugin, and between yours and the other one might vote would go to yours. :(

    Eventually someone will code something comparable to yours and use the license in a more compliant sense purely for support/updates. That plugin will take the spot you could have had which is a shame.

    PS.: You should remove the reference to your competitor plugin. I shouldn't have done that it was mean, but I was mad and blowing off steam and I didn't think you'd publish it. ;-)

    • Katie Keith
      December 2, 2018 Reply

      Thanks for your reply. I won't delete your previous reference to our competitor, as we don't edit it sensor genuine comments like yours!

      We have been advised multiple times that is acceptable under GPL to require a license key in order to activate software in the first place, but not to stop it from working in the future. That's why you need to activate your license key when you first install our plugins, but they continue working if you let your license key expire. The source code is fully accessible to developers who can make changes as required.

      I appreciate your feedback and agree that this area of GPL is open to interpretation, and that not all plugin companies have implemented it in this way. We will continue to research this and take advice to ensure our plugins are fully compliant.

      We offer a no-questions-asked 30-day money back guarantee so that people can try our plugins risk-free and get a refund if it doesn't suit for any reason. As you say, a lot of designers/developers try them on a client's site and then decide that it doesn't fully meet their requirements, so they need to be able to get a refund if there are any problems or if it's just not the right plugin for the project.

  2. GPL Lives!
    December 1, 2018 Reply

    Hey, in your FAQs you say that the plugin can still be used after the license expires - but in your license section you state that if the license has expired (and hence the products won't load) then the license would have to be renewed. In other words, you have to keep paying for the plugin annually in order to use it.

    This is completely against GPL (and Wordpress and Woocommerce licenses). It must be free software that cannot be crippled in any way. The only reason it is ok to charge a license fee is for support and updates ONLY. You cannot require the license in order for the product to actually work.

    This is very dishonest practice, and if you publish this (you won't- or you'll delete it if not monitored) I would advise people to get a nulled version of this to remove the license requirement so the product functions as per the GPL license. Especially if they don't need or want support or updates (and definitely if they don't even know whether it is suited to their needs till they've tested it out thoroughly.

    Or get a similar product from Code Canyon that costs a one off $29 with 6 months support and will still be updated for free years after support has expired (you can always pay for another 6 months support if ever needed).

    As for Barns2 Media I hope you and others who are guilty of this GPL violation come to Wordpress's attention and they do to you what they did to the Thesis guy. Was a pity he caved,and started adhering to the GPL license he abused, I'd have like to see Wordpress kick his ass in Court.

    • Katie Keith
      December 1, 2018 Reply

      Thanks for your comment. You only need an active license in order to enable the plugin on any new domains, or access plugin updates or support - all of which is compliant with GPL. The plugin will NOT stop working when your license expires. It sounds like we need to make the License page in our knowledge base clearer and we will review this. Once your license key expires, you can keep using the plugin forever.

Please share your thoughts...

Your email address will not be published.