How to add a customizable product builder to WooCommerce

December 17, 2021

woocommerce product builder

If you’re looking to add a product builder to your WooCommerce store, it simply can’t be done with a standard WooCommerce store. But if you want to allow customers to customize products without having to add a huge number of variations, it can be done with the plugin WooCommerce Product Configurator.

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

woocommerce product builder

But before we get into the nitty-gritty details of making that happen, let’s go over the reasons why having a product builder is a must-have feature for your store.

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

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.

How to add a custom product builder to WooCommerce

There are several things you need to do if you want to customize a product in your store. Before we go through the checklist and walk you through the steps, you’ll need to install the plugin, WooCommerce Product Configurator.

Introducing WooCommerce Product Configurator

Let’s look at why we recommend WooCommerce Product Configurator as your main product builder for your WooCommerce store and customization needs.

Here are 3 reasons why you need the WooCommerce Product Configurator plugin

It’s user-friendly

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 because they’ll know it’s the product they chose.

product builder woocommerce checkout

It saves you time

Forget having to upload countless image combinations for each one of your products. By adding layered images, you’ll save yourself countless hours.

Should you want to add an additional option (color, material, size) in the future, all you need to do is add a new PNG layer to your product.

product builder image layers

It has stock-level management

You’ll have an easier time managing your inventory because you have visibility of the stock level for each product on the product edit page. Your customers won’t feel the frustration of seeing the out-of-stock sign since you can quickly view your stock level by product and take action.

stock level management

Note: The WooCommerce Product Configurator plugin doesn’t allow you to add text or designs to the products. It simply allows your customers to play around with the different elements you offer (as attributes) to create a finished product.

With these benefits in mind, let’s go ahead and customize your products with the WooCommerce Product Configurator plugin.

Create a product builder with WooCommerce Product Configurator

There are really only 4 steps in this process, making it easy to configure your products.

Step 1: Install the WooCommerce Product Configurator plugin

To do so, you have to purchase the plugin from the Iconic store here. Once that’s done, here’s what you do next.

  1. Go to your WordPress dashboard and find PluginsAdd New.
  2. Here you can upload the plugin’s files and then click on Activate to continue.
  3. Enter the license key for this plugin (should be in your email confirmation).

Now that it’s installed on your site, let’s go ahead and create your first configurable product in WooCommerce.

Step 2: Create a variable product

We’re going to use 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. 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 have multiple variations to your product variation if it has a different:

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

To enable the Product Configurator, follow these 4 steps:

  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’. Check that box.
  4. Now, click to Save your product.

Now it’s time to get your images ready.

Step 3: Create your configurable product images

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

Here are the steps to create your 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.
image layer product configurator
  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.
customizable product image layers

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.

Step 4: Add the images to your configurable product

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.
woocommerce product builder layer
  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.
background layer
  1. Now that you’re done, Save or Update your product. It will be added to your WooCommerce store.

Create your product builder today

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

Make this task quicker and more efficient with WooCommerce Product Configurator and you’ll get to see a boost in your sales and customer satisfaction!

Please share your thoughts...

Your email address will not be published.