Create Your First Configurable Product

Before we start creating a configurable product, please make note of these important items:

  1. Your images must be PNGs.
  2. Layers run from top (highest layer) to bottom (lowest layer) in the configurator tab. This order is defined in the product’s Attributes tab.
  3. You should set a featured image for the product, which will appear in product listings and as a fallback.
  4. The configurator tab will only show once a variable product with attributes is saved.

Once the plugin is installed, you can begin setting up your product. In this example, I’ll show you how to create a configurable watch as per the demo.

Example of configurable product

Create a variable product

WooCommerce Product Configurator only works with variable products. Each image layer is assigned to an attribute value; when the user selects a product option, the layer is loaded in.

As such, we’ll start by creating a variable product. I won’t go too much into detail, as the  WooCommerce docs describe this for you already.

Our product will use 3 attributes:

  • Face
  • Case
  • Strap

Each attribute will then contain a number of different options for changing the appearance of the watch. Face contains 5 options, Case contains 3 options, and Strap contains 11 options.

Usually, we’d need to manually create 165 final images to cater for every combination of these options, but using the Product Configurator plugin we will only need 20 images.

Here you can see the attributes that I’ve configured for the watch:

Variable product example

You can now create the variations. For the purpose of this demo, I only have one variation available:

Example variation

Make sure your variations are in stock and have a price set. Without this, they won’t be available to the user on the frontend.

Save the product using the publish settings.

Publish product

Enable the configurator

So you’ve added your product attributes and variables, and you’re ready to start putting your configurable product together. 

In 1.4.0, we have included a small update to the Configurator tab toolbar. Whilst editing your product, find the Product Data section, and click Configurator. Enable Configurator by clicking the toggle switch, found next to the Update button.

Enable the configurator

Prepare the image layers

Preparation of the images is probably the most important step when using the Product Configurator plugin. You will need to use an image editing program like Adobe Photoshop or Affinity Photo.

  1. Firstly, create an artboard at your preferred size. For example, 1000px by 1000px.
  2. Create your image layers, ensuring everything lines up to the layer below.
  3. Save each layer at the size of the artboard (1000px x 1000px) with the background remaining transparent.
  4. You’ll also need to create a background layer for the configurator. This can be a solid colour, if you like, but it must still be saved as a PNG image.

Add the image layers

Below the checkbox to enable the configurator, you’ll see a list of your attributes and the values available for each. It is here where you can begin to add your image layers.

Adding image layers

You can see that for each attribute value, we are given an image selector. To add an image, click the plus (+) icon and upload or select your image from the media library. Once selected click Set image.

Adding an image

You can remove the image by clicking the minus (-) icon.

Repeat these steps for all attribute values.

Reorder the layers

If you need to reorder the layers, then you can click the 3 lines icon to drag and drop them. 

Adding layers

To make it easier, click the arrow icon to collapse the layer.

Order your images.

As I mentioned earlier, attributes at the top will display on the frontend above the ones below it. For example, we always want the watch face to be displayed on top of the watch strap.

Add a background layer

Add the background layer you created earlier. This is a required part of the configurator and helps the plugin to know the size of your artboard.

Add a background layer

Save the product

When you’re ready, save or update the product from the publish settings. Now when you select the product options on the frontend, you’ll see the appropriate layers loading in.

Are you using WooCommerce Product Configurator yet?

Start your 14-day free trial right now and get instant access to the features described in this article.

or learn more

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.

WooCommerce Product Configurator by Iconic

WooCommerce Product Configurator

Not got the plugin yet? Get instant access right now, free for 14 days.

or learn more

Still need help?

If you haven't found what you're looking for in our documentation, please contact support.

Get Support