How to create a WooCommerce product customizer – 3 easy examples

A WooCommerce product customizer gives your customers the chance to design their own products. This is an essential feature for many WordPress store owners. In this article, I’m going to give you a step by step guide to building products that your users can customize on the front end, including three easy to follow specific use cases.

• What is a product customizer?
• What are the benefits of using a product customizer?
• How to create a product customizer in WooCommerce
• Product customizer use cases
  
  • How to create a simple teeshirt designer in WooCommerce
  • Designing and personalizing jewellery
  • How to create personalized phone cases

To create your WooCommerce product customizer, you’ll need the WooCommerce Product Add-Ons Ultimate plugin.

Product Add-Ons Ultimate is the perfect custom product designer for your WooCommerce store. One of its main advantages over similar configurator plugins is that it will fit with your theme, giving the user a familiar interface.

Let’s take a look at some of its features.

What is a WooCommerce product customizer?

We can start by defining what we mean by a product customizer. A customizer or product designer should allow the user to configure aspects of the product from the front end – that is from the product page itself.

Tee-shirt product designer

Let’s take a look at a common example – a tee-shirt designer.

You can see the demo product here.

Product workflow

The customer can use different fields, like checkboxes, text fields, file uploads, etc, to define their personalized version of the product.

Each extra field can have an additional price (or even discount) associated with it, so that as the customer makes their selections, the price of the product changes.

After the customer enters their options and adds the product to the cart, the extra fields are displayed as additional meta data in the cart.

When the customer purchases the product you, the store owner, will receive an email listing the product customizations. You’ll also be able to see the customizations in the order summary in the back end.

With all the customizations listed, you can prepare the customer’s order to their exact specification.

What are the benefits of using a product customizer?

Clearly, allowing your customers to configure products to their exact specification is a benefit to your business. Here are some examples of how adding customizable options to your products can benefit you:

• Upsells: encourage the customer to choose options to include upgrades within their purchase
• Complete the look: offer the customer the chance to buy multiple products from the product page with a single click
• Personalization: allow the customer to personalize their products
• Warranties: encourage the user to purchase a warranty direct from the product page
• Gift wrapping: add a checkbox so that the customer can choose to have the product gift wrapped

All these possibilities have one thing in common: they add value to your product.

How to create a product customizer in WooCommerce

In all the examples on this page, we’re using the WooCommerce Product Add-Ons Ultimate plugin. First we’ll look at setting it up and adding some simple fields; then we’ll look at specific examples of products where you would need to use it.

Download, install and activate

• When you purchase the Product Add-Ons Ultimate plugin, you’ll get an email with a download link and licence key.
• Download the zip file to your computer then go to the ‘Plugins’ page in your WordPress admin. Click ‘Add New’ then click ‘Upload Plugin’.

• Upload the WooCommerce Product Add-Ons Ultimate zip file and click ‘Install Now’.
• Once the plugin has uploaded, you’ll have the option to activate it. Click ‘Activate Plugin’.

WooCommerce Product Add-Ons Ultimate should now be installed and active.

Enter your licence key

Before you get started, go to WooCommerce > Settings > WooCommerce Product Add-Ons Ultimate and enter your licence key into the field.

Add a custom field to a product

WooCommerce Product Add-Ons Ultimate allows you to add extra fields direct to individual products or to multiple products through the Global Add-Ons page. In these examples, we’ll just look at adding fields to individual products – though the process is very similar for adding global fields as well.

• Create a new product and ensure you assign a price to it (even if the basic price is 0).
• Click the Product Add-Ons tab in the Product Data section
• Click ‘Add Group’ then ‘Add Field’

• Choose your field type in the ‘Field Type’ setting

In the example above, we’ve added a ‘Checkbox’ field to the product. Publish the product and it’ll something like this on the front end (Storefront theme in this example but will work with any theme).

In the screenshot above, you can see that a checkbox field has been added with a label, description and price. If the user selects that checkbox, it’ll add $5 to the price of the product.

There’s also a table showing the base product price, the cost of additional options, and the grand total. This table is configurable so that you can change the labels, just show the total price, or hide it altogether.

That, in a nutshell, is how to add an extra field using WooCommerce Product Add-Ons Ultimate.

Product customizer use cases

Now let’s look at how to create some specific product designers where users can build up their products from a set of options.

How to create a simple teeshirt designer in WooCommerce

You can allow users to create their own teeshirts very simply in WooCommerce using the Product Add-Ons Ultimate plugin. Let’s create a product that allows users to:

• Add a colour swatch so that users can choose the colour of their shirt
• Then add an upload field for users to upload a graphic that will be printed on the teeshirt
• Add a text field to allow users to enter their own text to be printed on the shirt

Follow the steps above to create a product and then add the following extra fields:

Create an image swatch field

• In the Product Add-Ons panel in the Product Data section, click ‘Add Field’.
• In the ‘Field Type’ option, choose ‘Image Swatch’.

• You can add a title in the ‘Field Label’ field.
• Then click the ‘Add Option’ button for each image swatch that you wish to add. You can create simple images with solid background colours for your swatches.
• Note that because the colour swatch is descriptive enough, you can check the option to ‘Hide Labels’.
• You can also make it compulsory for the user to select a value in this field by choosing ‘Required Field’.

Create a text input field

Let’s allow our customers to add a short slogan.

• Click ‘Add Field’
• Choose ‘Text’ as the field type
• Enter a title in ‘Field Label’

• Note that text fields have some extra options. In this case, we’ve set the max number of characters to be 30.

Create a file upload field

Finally, we can add a field where the customer can upload a graphic to print on their teeshirt.

• Click ‘Add Field’
• In the ‘Field Type’ option, choose ‘Upload’.

• Enter a title for the field in ‘Field Label’
• Check ‘Required Field’ to force the user to upload an image

Teeshirt designer product

Here we’ve created a really simple teeshirt designer product. You can take a look at a working example here.

Note that in the demo product, you can actually preview your text and uploaded image. We’ll take a look at how to do that now.

Bonus: preview your text and image uploads

In the example above, we can also use the Text Preview and Image Preview plugins to allow the user to preview their customisations.

These plugins require the Add-Ons Ultimate plugin and are available as part of the Add-Ons Ultimate Bundle:

Designing and personalizing jewellery

Let’s create a WordPress product customizer so that customers can specify their own engraving for jewellery. In this example, we’ll create a product that will allow your customers to personalize a bracelet by:

• Adding a text field to allow the user to enter a name or other text to be engraved
• Adding an image swatch field for the customer to choose one or more charms to add to the bracelet

Follow the steps above to create a product and then add the following extra fields:

Create a text input field

• In the Product Add-Ons panel in the Product Data section, click ‘Add Field’.
• In the ‘Field Type’ option, choose ‘Text’.
• Enter a title in ‘Field Label’

Note that we’ve set a few extra parameters here:

• In ‘Field Price’ we’ve entered a value for the field. Normally, this would just be added once to the cost of the product but, as this field is a text input, we also selected the ‘Price Per Character’ option. This means that the field price will be multiplied by the number of characters entered
• However, for our product we can allow up to 5 characters to be entered free of charge. So in ‘Free Chars’ we’ve entered ‘5’
• Also, we only want to charge for alphanumeric characters – we don’t want to charge for spaces for example. So we’ve also checked the ‘Only Charge Alphanumeric’ option
• We’ve also entered some additional information in the ‘Field Description’ field to explain things to the customer

On the front end, the field looks like this:

Create an image swatch field

Now we can create a field that will allow users to choose different charms to add to their bracelet.

• In the Product Add -Ons panel in the Product Data section, click ‘Add Field’.
• In the ‘Field Type’ option, choose ‘Image Swatch’.

• Add your title to the ‘Field Label’ field.
• Then click the ‘Add Option’ button for each image swatch that you wish to add. For each charm, you can upload a different image.
• Set the layout by setting a value in the ‘Number Columns’ field
• You can allow the customer to choose more than one option from this field by checking the ‘Allow Multiple’ option

This is how it looks on the front end:

Jewellery designer product

Take a look at a working example of the jewellery product.

How to create personalized phone cases

In this example, we’ll look at creating a WooCommerce product customizer that includes the following features:

• Upload a background image
• Enter the name to be printed on the case
• Choose the font for a name
• Choose the colour for the name

The product will look like this on the front end:

Follow the steps above to create a product and then add the following extra fields:

Create a file upload field

First, create a file upload field so that the user can upload their background image.

• In the Product Add-Ons panel in the Product Data section, click ‘Add Field’
• In the ‘Field Type’ option, choose ‘Upload’.

• Enter a title for the field in ‘Field Label’
• Check ‘Required Field’ to prevent the user from adding the product to the cart without uploading an image
• Enter some text in the ‘Field Description’ to help them know what to do with this field

Create a text input field

• Click ‘Add Field’
• In the ‘Field Type’ option, choose ‘Text’
• Enter a title in ‘Field Label’

• Ensure the user enters their name by checking the ‘Required Field’ option
• Set a limit on the number of characters that the user can input by entering a value in the ‘Max Chars’ field

Create an image swatch field for the font selector

To let the customer choose the font to be used for their name, we’ll create an image swatch field displaying images of the letter ‘A’, each in a different font. In this way, we give the user a nice visual way of picking a font.

• Click ‘Add Field’
• In the ‘Field Type’ option, choose ‘Image Swatch’

• Because we don’t need to display the font names to the customer, we can check the ‘Hide Labels’ field
• This is how the field looks on the front end:

• The customer can click one of the images and the font name will be added to the product

Create a select field

Finally, for the colour of the font, we’ll use a select field. Note that you can use an image swatch here to make it more visual but we’re using a select/dropdown field for variation.

• Click ‘Add Field’
• Choose ‘Select’ in ‘Field Type’
• Click ‘Add Option’ to add each new option

Personalized phone case demo product

Take a look at a working example of the personalized phone case product.

More case studies

If you like case studies with detailed guidance on how to build different products in WooCommerce, check out some of these articles:

• Create a WooCommerce takeaway order form
• Composite products: lets users build their own products
• A guide to creating mixed case wine products in WooCommerce
• How to create a WooCommerce custom product

Buy WooCommerce Product Add-Ons Ultimate

I hope this article has given you plenty of insight into how to create a WordPress product customizer. All you need is the WooCommerce Product Add-Ons Ultimate plugin.