Giving users the ability to create customisable products in WooCommerce is essential for many store owners. In this article, I’m going to give you a step by step guide to building products that your users can customise on the front end, including several specific use cases.

To create customisable products in WooCommerce, you’ll need WooCommerce (obviously) and the Product Extras for WooCommerce plugin.

What is a customisable product?

Let’s start by defining what we mean by a customisable product. A customisable product should be configurable from the front end, that is from the product page itself, by the user.

WooCommerce teeshirt designer product

The customer can use different fields, like checkboxes, text fields, file uploads, etc, to define their personalised 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 customisations. You’ll also be able to see the customisations in the order summary in the back end.

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

What are the benefits of allowing customers to customise products?

Clearly, allowing your customers to configure products to their exact specification is a benefit to your business. Here are some examples of how adding customisable 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
  • Personalisation: allow the customer to personalise 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 customisable product in WooCommerce

In all the examples on this page, we’re using the Product Extras 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 Extras 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 Product Extras 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

Product Extras should now be installed and active.

Enter your licence key

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

Product Extras licence field

Add a custom field to a product

Product Extras allows you to add extra fields direct to individual products or to multiple products through the Global Extras page. In these examples, we’ll just look at adding fields to individual products – though the process is very similar.

  • Create a new product and ensure you assign a price to it (even if the basic price is 0).
  • Click the Product Extras 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 Product Extras. You can check out this support article for more information.

Now let’s have a look at how to create specific customisable products.

Examples of customisable product in WooCommerce

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 Extras 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
WooCommerce teeshirt designer

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

Create an image swatch field

  • In the Product Extras panel in the Product Data section, click ‘Add Field’.
  • In the ‘Field Type’ option, choose ‘Image Swatch’.
WooCommerce image swatch field
  • 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 file upload field

Now you 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

Create a text input field

Finally, let’s allow our customers to add a short slogan under their graphic.

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

Teeshirt designer product

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

Designing and personalising jewellery

Let customers specify their own engraving for jewellery. In this example, we’ll create a product that will allow your customers to personalise 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 jewellery product designer

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

Create a text input field

  • In the Product Extras 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:

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 Extras 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:

Jewellery designer product

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

How to create personalised phone cases

In this example, we’ll look at creating a product that the user can customise by:

  • Uploading a background image
  • Entering their name to be printed on the case
  • Choosing the font for their name
  • Choosing the colour for their 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 Extras 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

Personalised phone case demo product

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

Buy Product Extras for WooCommerce

I hope this article has given you plenty of insight into how to create customised products in WooCommerce. All you need is the Product Extras plugin.


Popular Posts

Leave a Reply

Your email address will not be published. Required fields are marked *