How to add a customizable product builder to WooCommerce

If you’re looking to add a product builder to your online store, it simply can’t be done with WooCommerce as it comes. But if you want to allow customers to customize products without having to add a huge number of variations, you can achieve this by installing the right plugin.

By the end of this article, you’ll know exactly how to add a customizable product builder to your WooCommerce store. This will allow customers to visually create customized products to suit them.

But before we get into the detail of making that happen, let’s go over the reasons why having a product builder is a must-have feature for your store. We'll also compare two fantastic plugins which take different approaches to building customized products so that you can choose the one that best meets your needs.

Why you might want to use a product builder in WooCommerce

Imagine this: a customer lands on your product page, and is excited about the shoe in front of them. They love the sneaker design, the material, and the price. Great! Except, the lacings of the shoe are not in the color they like.

They’re struggling with the purchase because they know this color doesn’t particularly suit them or their personal preferences, but they can’t see other colors available (although you have more!). Without a proper product builder in your WooCommerce store, you might lose this potential customer.

You may also like: Use WooCommerce to sell 'Build Your Own' products: Veg boxes, gift baskets & more!

If you fall into these categories, you’ll benefit from a product builder plugin

You sell customizable clothing or accessories

Let’s use a watch as an example of a customizable product. Today’s watches are highly configurable - from the color of the face to the color and material of the straps. With a product builder plugin, your customer will be able to seamlessly pick and choose the style they prefer.

You sell customizable furniture

If you’re in the furniture business, you might want to offer your customers different fabric colors or leg combinations. If this is the case, you’ll likely want a visible representation of the final selected product rather than having them click through back and forth from dropdown selections.

You sell sports equipment

The tennis player that comes to your store to purchase a racket will want the ability to customize their grip and head size, as well as the racket’s weight, depending upon their level. You don’t want them leaving the product page to go search for these attributes on a separate screen.

If your products are customizable, or configurable, then you’ll need a WooCommerce product builder plugin to help you take your store to the next level.

Can't I just add these options as product variations?

In theory, you can use a normal variable product as a product configurator. However, it would be a bit of a nightmare for you - and not ideal for the customer either!

Here's why:

That's why it's much better to present these options using a WooCommerce customizable product builder plugin.

Which is the best WooCommerce product configurator plugin?

There are two excellent WooCommerce product configurator plugins to choose from. Which one you choose depends on the type of customizable products you sell and how you want to display them on your product pages.

Plugin 1: WooCommerce Product Options

The WooCommerce Product Options plugin is perfect for creating a custom product configurator. It works by letting you add a huge range of options to your products, which are infinitely more flexible (and easier to set up and manage) than variations.

For example, you can add checkboxes, radio buttons, clickable images, color swatches, text buttons, file upload fields, text fields and more. Given the variety of options available, customers will enjoy building the product to their exact specification.

Each option in the product configurator can be associated with its own price. This adjusts the price as the customer configures their products, creating a completely custom product just for them. Alternatively, you can create a custom price calculator for more complex pricing rules.

Plugin 2: WooCommerce Product Configurator

The only limitation of WooCommerce Product Options is that it doesn't visualize the custom product as you are configuring it. If that's important to you then it's worth considering Iconic's WooCommerce Product Configurator plugin instead.

It works with image layers. You upload a transparent PNG image for each option. When the customer configures the product by selecting multiple options, the product image updates to show all the layers associated with their selections.

Note: The WooCommerce Product Configurator plugin doesn’t allow customers to add custom text or designs to the products, which you can do with WooCommerce Product Options (above). It simply allows your customers to play around with the different elements you offer (as attributes) to create a finished product. This is slightly more limited in terms of how you select the options, as it either uses normal variations or the image and color swatches which you can create using Iconic's Attribute Swatches plugin. However, the benefit of this plugin is the way that it updates the main product image to display a new image based on the exact combination of options that the customer has selected.

How to add a custom product builder to WooCommerce

Plugin 1 instructions: WooCommerce Product Options

To use WooCommerce Product Options to create an interactive product configurator, you need to add a series of extra options to your products.

1. First, get the plugin and install it on your WordPress site.
2. Next, go to Products → Product Options.
3. Create an option group and select the product(s) that you want the configurator to appear on.
4. Now add your first option to the configurator. Choose what you want it to look like (checkboxes, dropdpwn lists, clickable images, etc.). Configure it as needed, for example to add prices, minimum/maximum quantities, or conditional logic so that it only appears when the customer selects a different option.
5. Repeat step 4 to add as many options as you like to the WooCommerce product builder.
6. Save the option group.

Now view the product that you just added the configurator to. You'll see a highly visual product configurator on the product page. Customers can select options one by one to build their customized product.

Plugin 2 instructions: WooCommerce Product Configurator

Customers want an easy and seamless user-friendly experience in the store that’s hassle-free. With this plugin, whenever they select a product option, the image will automatically change, giving them a visual representation of the product they’ll be buying.

When their desired product is in the cart, they’ll be able to see their final choice with the options they selected. This will reduce cart abandonment and returns because they’ll know it’s the product they chose.

First, purchase the WooCommerce Product Configurator plugin and install it in your WordPress dashboard.

Next, you need to create your first configurable product in WooCommerce. We'll do this by using a watch as an example, to give you an idea of what you can do with your own products. For this example, we’re going to attach three attributes to the watch for customers to change, and set them up as variations. You can have more or fewer attributes for your own products.

Our three attributes are the face, the case, and the strap itself. Each one of these has several options associated with it for the customers to pick and choose from. What this means is that while the face is the attribute, the options for the face might be the different colors offered.

Next, you’ll need to create the variations. Keep in mind that you might need to add a separate product variations for each:

• Price
• SKU number
• Stock amount
• Image

Once you’re done setting up the variations, Save the product. Now we can go ahead and enable the product configurator.

Enabling the product configurator for a variable product

1. In the current product you’re editing, scroll down to the ''Product Data' 'section.
2. Click on the ''Configurator'' tab on the left-hand side.
3. Then, you’ll notice on the page the 'Enable Configurator' option. Check that box.
4. Now, Save your product.

Now it’s time to get your images ready. Without a high-quality product image, your efforts might be in vain. Let’s make sure you have great configurable product images for your customer to browse through. For this portion of the work, keep in mind that you’ll need to use a professional editing program (we recommend Adobe Photoshop or Affinity Photo).

To create configurable product images:

1. Open the editing program, and create a 1000px by 1000px (minimum) blank square area to play with.
2. Now, you’re going to put your image layers together. Each attribute you created is an individual configurable element of your product. So, for our watch example, we’ll create a layer for each watch strap, case, and face variation.

1. When you add a new product element (a different color for example) make sure that it has its own layer with a transparent background. That way, everything will line up.
2. Save each one of your layers (as the initial size you created) with a transparent background.
3. Once you have all your layers saved as individual images, you’ll need to create a background layer as the foundation for them. You can make this background layer a solid color, but make sure you save it as a PNG image.

For more details on all these steps, you can go through this in-depth Product Configurator guide.

Now that you’ve created the images in your editing program, let’s add them to your configurable product in WooCommerce.

Add the images to your configurable product

Finally, go back to the product you saved earlier in WooCommerce. Right underneath the 'Enable Configurator' checkbox, you’ll see your attributes list. You need to associate a picture with the value you created in this section:

1. Click on the plus (+) icon on the grey square where an image should be.

1. Upload the image layer you create to your media library.
2. Click on 'Set Image' to have it set up for the value selected.
3. Do these 3 steps for all of the values you’ve created.
4. Keep in mind that the layers need to be layered on properly. You can re-order them to fall in the right place. For example, we want our watch face layer to be on top of the strap layer, so image order will reflect that.
   1. To re-order the attributes, click on the icon with the 3 lines next to your attribute to drag and drop them.
5. Lastly, upload the background layer you created. This is an important step for the configurator as it needs to know the overall size of your image.

1. Now that you’re done, Save or Update your product. It will be added to your WooCommerce store.

Create your customizable product builder today

That’s it! You’re now ready to allow customers to create their own products in your WooCommerce store.

As a reminder, you need to choose one of these recommended plugins:

• WooCommerce Product Options - Perfect for adding a wide range of visually appealing options to create an interactive product builder.
• WooCommerce Product Configurator - Perfect for creating a product builder where the images update to visualize the customer's selections.

Whichever plugin you choose, set it up today and you’ll get to see a boost in your sales and customer satisfaction!