How to create a WooCommerce product customizer – 3 easy examples

online shopping e1554294090929

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.

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

WooCommerce Product Add-Ons Ultimate featured image

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

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 WooCommerce custom product designer 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.

WooCommerce custom t-shirt designer product

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.

WooCommerce custom t-shirt designer 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.

WooCommerce custom t-shirt designer order

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’.
WordPress 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’.
WordPress 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’
WooCommerce Product Add Ons Ultimate panel
  • Choose your field type in the ‘Field Type’ setting
WordPress checkbox field

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).

Checkbox field on the front end

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.

Related Tutorial
Find out more about WooCommerce custom fields here

WooCommerce custom fields illustration

Three product customizer use cases

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

Related Tutorial
For further product builder ideas, take a look at this article on building your own product

WooCommerce Composite Products

1. How to create a simple teeshirt designer in WooCommerce

  1. 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

Note that in order to preview text and uploaded images on the main product image, you’ll also need the following plugins:

However, you can still make a version of this product without these extra plugins – the user just won’t be able to preview their options live on the product image.

WooCommerce custom t-shirt designer product

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’.
Image swatch field for t-shirt product
  • 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’
WooCommerce text input field
  • 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’.
WooCommerce file upload field
  • 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:

Add-Ons Ultimate Bundle featured image

Product Add-Ons Ultimate Bundle

Save 70% and get all Add-Ons Ultimate plugins with lifetime updates

Find Out More

2. 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
WooCommerce product customizer for jewellery designer

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’
WooCommerce text field

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:

WooCommerce text input field on the front end

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’.
WooCommerce multiple image swatch field
  • 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:

WooCommerce image swatch field for jewelry charms

Jewellery designer product

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

3. 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:

WooCommerce product customizer for personalized phone cases

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’.
WooCommerce background image file upload field
  • 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’
WooCommerce text input field
  • 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’
WooCommerce font selector field
  • 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:
WooCommerce font selector field frontend
  • 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
WooCommerce select field

Personalized phone case demo product

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

Product Add-Ons Ultimate in action: Ella’s Bubbles’ luxury bathtubs

Understanding the various industry applications of a WooCommerce product customizer is all well and good, but what about its real-life applications? Let’s take a look at how the WooCommerce Product Add-Ons Ultimate plugin has been successfully leveraged in the real world. 

Ella’s Bubbles, a leading company in the luxury bathtub industry, offers walk-in bathtubs, a highly variable product with a wide range of SKUs across over 28 unique models. 

To handle this complexity, they needed a flexible solution for product customizations, and the Product Add-Ons Ultimate plugin proved to be an ideal fit. The plugin allowed them to add images or descriptions based on user selections, set unique prices based on conditional logic, and ensure compatibility with other plugins.

An example of pricing after a customer selects add-ons, as seen on Ella's Bubbles.

Product Add-Ons Ultimate is now an integral part of their product pages. For instance, on their Elite Walk-In Bathtub page, customers can choose jetting, door, and faucet options via default WooCommerce variations. The plugin then offers optional features in a luxurious manner, with a rewarding experience of image/description display upon selection.

Add-ons options available on Ella's Bubbles's products, via WooCommerce Products Add-Ons Ultimate
Additional options available on Ella's Bubbles's products

The results of incorporating Product Add-Ons Ultimate into Ella’s Bubbles have been remarkable. It has enabled the inclusion of thousands of walk-in tub add-ons since its implementation, saving significant time for their order processing team. Ella’s Bubbles plans to continue expanding with the confidence that their product pages are well-managed and luxuriously simplified by the Product Add-Ons Ultimate plugin.

More case studies

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

Buy WooCommerce Product Add-Ons Ultimate

I hope this article has given you plenty of insight into how to create a WordPress product customizer.

Overall, the benefits of using such a customizer are clear, from increased customer interaction to providing upselling opportunities and product personalization. That’s why Creating a WooCommerce product customizer using the Product Add-Ons Ultimate plugin can significantly enhance your online store’s customer experience. 

As demonstrated with our t-shirt designer, personalized jewelry, and custom phone case examples, this tool can be applied to a variety of products and industries, making it a versatile and valuable addition to any WooCommerce store. So, why not transform your customer’s shopping experience from a passive activity into an interactive, memorable experience, building stronger connections between your customers and your brand? All you need to get started is the WooCommerce Product Add-Ons Ultimate plugin.

WooCommerce Product Add-Ons Ultimate featured image

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

28 comments

    • User image

      Hi

      Yes, when you use the ‘Products’ field, your options are other products so the stock is reduced whenever an item is purchased, just as with a standard WooCommerce product.

      Thanks.

  1. User image

    Hello, I added groups and fields but they’re not showing in front . It only showing add to cart button. Anything wrong ? Thank you

  2. User image

    Hi!

    I have a shop with 100 products and would like to know if there is a way of using a “customization template” or do you have to apply the fields for every product?

    Thank you!

  3. User image

    I want 5$ per word to be automatically included in the total, if someone wants to add text on my product. Is this possible ?

    • User image

      Hi

      You can update the main product image based on the user’s selection in an image swatch field; or you can use the Image Preview extension for Add-Ons Ultimate to add an uploaded image to the main product image.

      Thanks.

  4. User image

    Hi
    There Should be an option for preview
    Slogan Text Should Display on Product Moreover There should be an option to chose which font size + common font style option to display on t-shirt With Preview

    If Its Possible Please Let Me Know

  5. User image

    Hey, just wondering if there’s a way to import a SVG so that it outlines the shape (and create a custom 2d template) for the customer to import designs on it? (And that anything that’s out of the outline is masked)
    Thanks

Leave a Reply

Your email address will not be published. All fields are required.