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

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.

GET THE PLUGIN

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

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.

GET THE PLUGIN

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