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? By using WooCommerce Product Add-ons and WooCommerce Product Table as a WooCommerce product customization plugin, you can create your own WooCommerce 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:

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 product customization plugin using WooCommerce Product Add-ons and WooCommerce Product Table.

Personalized WooCommerce products give your shoppers more control

There are a ton of potential use cases for offering personalized eCommerce 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 is great for all types of products including:

• Custom t-shirt designer
• Hats
• Hoodies
• Mousepads
• Bottles or mugs
• Keychains
• Buttons
• Business cards with clipart or other designs
• Phone cases or cases for other mobile devices
• ...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 WooCommerce customizable products

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

The first WooCommerce product customization 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 WooCommerce product customization 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 WooCommerce customizable products. Specifically, 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 WooCommerce product designer plugin:

1. Create your base product with the regular WC features
2. Use WooCommerce Product Add-ons as a WooCommerce product customization plugin to add customization options for shoppers
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 features.

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.

A color picker 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)

Product add-ons work for both physical and digital products. For example, for digital products, you could give an add-on option to download a file as a PDF or SVG.

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:

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 as a WooCommerce product customization plugin 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:

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)

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:

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:

Once you've set up Product Add-ons as a WooCommerce product customization plugin, you're ready to create the front-end interface.

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 use the WooCommerce product customization plugin to 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 product table WooCommerce product customization plugin, go to WooCommerce → Settings → Products → Product tables to activate it and configure the default 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,buy: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 with a dedicated add to cart button.

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.

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.

Add WooCommerce Product Table shortcode to order page

Finally, to actually display your real-time 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:

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:

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 size as the individual customization options in your WooCommerce product customization plugin.

To fix that and make your WooCommerce customizable products stand out, 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;
}

To change the font to Google Fonts or another fonts provider, you can use your theme's settings.

Step 5: Too many options? Add WooCommerce 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.

As an alternative, you can use WooCommerce quick view to tidy up the list of WooCommerce 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.

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 WooCommerce 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 buy 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.

Step 6: Change the default quantity

The default quantity in WooCommerce is 1. This means that your table of WooCommerce customizable products will have '1' in all the quantity boxes when the table first loads. The customer can then change the required quantities and add products to the cart as required.

A list of customizable products generally works better when the default quantity is 0. This gives customers a blank slate from which to choose how many of each option to order.

You can easily change this by installing the WooCommerce Default Quantity plugin. This makes it easy to change the initial quantity value to any number, including zero. Customers still have full control over what quantities to order, but it makes for a better starting point.

Free Trial - Sign Up

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 WooCommerce 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 with the WooCommerce product customization plugin, 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 WooCommerce customizable products, they can build multiple products and add them to their cart without any page reloads.

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:

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:

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:

Start offering personalized WooCommerce products at your online 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
• Add text fields

And WooCommerce Product Table, along with its built-in WooCommerce Product Add-ons integration, helps you display one or WooCommerce 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.

And if you have any other questions about creating WooCommerce customizable products with a WooCommerce product customization plugin, don't hesitate to leave a comment!