How to Create a WooCommerce Custom Product

If you’re looking for an easy way to add a WooCommerce custom product to your online store, this guide is for you.

As a store owner, creating a WooCommerce custom product is your gateway to providing your customers with unique shopping experiences. Customers love personalized experiences – and this is exactly what custom products provide for them.

📈 After all, 80% of customers are likelier to buy from retailers offering personalized experiences. Because of this, offering custom products on your online store can drastically increase your sales and profit margin. 

In this guide, we’ll walk you through how to create a WooCommerce custom product. We’ll cover:

• Why create WooCommerce custom products?
• The different types of custom products in WooCommerce.
• How to create a WooCommerce custom product.

Let’s begin by understanding the importance of custom products to your ecommerce store.

Why create WooCommerce custom products?

Customizable products, or configurable products, cater to the modern consumer’s desire for unique items that accurately represent their unique tastes.

📈 Research by Kickflip shows that 45% of millennials are interested in customized fashion accessories and jewelry. 50% of them are interested in customized furniture, while 48% of Gen Z are interested in customized footwear.

So, if you’re in a business that sells customizable products, you can create these products and enjoy the following benefits. 

Boost your sales and revenue 

Custom products often command higher prices. Store owners can charge different product prices based on different product customizations like engravings, custom designs, premium colors, and materials.

If you sell a customizable watch with a gold or silver casing as the configurable option, you can charge more for the gold casing. 

This will directly increase your store sales and profit margin. In addition, customers are more likely to pay more for products they have designed independently. 

📈 A study by Deloitte reported that 1 in every 5 customers who show interest in personalized products are willing to pay an extra 20% for this custom product. 

Enhance your customer engagement

Customizing a product is an interactive and engaging process. For this reason, shoppers will often continue experimenting with designs and options until they create a product that fits their needs. 

This can reduce bounce rates, cart abandonment rates, and increase their likelihood of purchasing.

NOTE: Ensure that you don’t overwhelm them with too many customization options. This might cause them to abandon the entire process of building their product. 

Improved customer loyalty and retention

When a customer configures a product their way, it becomes unique to them. This personalized experience encourages customers to repeat purchases and become loyal to your brand.

📈 A survey on the latest trends in personalization shows that 60% of customers are likely to become repeat buyers and loyal customers after a personalized experience. 

Loyal customers frequently visit your website again and again. They are even more likely to refer your brand to friends and family. 

From this, you can see how valuable custom products can be to your ecommerce business. That being said, let’s dive deeper and explore the different types of custom products in WooCommerce.

The different types of custom products in WooCommerce

There are multiple customization options store owners can provide their customers with to custom different components of a customizable product.

These include:

• Color variations – allow your customers to choose different face or case colors like red, gray, blue, or green for their selected watch. If you sell t-shirts, for example, you can offer color options for red, blue, etc.
• Engravings – you can let your customers engrave their initials, special short messages, or a special date on the watch wristband or jewelry.
• Materials – for example, you can provide different watch strap-type materials like leather, stainless steel, fabric, etc. 
• Product add-ons – such as pizza toppings, sauces, side dishes, etc. All these options are great ways to upsell.
• This list is endless.

Depending on what you’re selling, you can offer different customization options for various items. These items include print-on-demand t-shirts, personalized clothing, takeaway foods, greeting cards, gift wraps, build-your-products, etc. 

Overall, the above customization options can be added to different types of custom products in WooCommerce as follows:

Using product variations

A product variation refers to a specific version of a product. This type of product is what is called a variable product in WooCommerce.

A variable product normally offers different types of variations. These variations allow customers to choose different options for a product, such as size, color, material, or other customizable features.

For example, if a t-shirt is available in different sizes (small, medium, large) and colors (red, blue, green), then it is considered to have variations. WooCommerce already handles this basic type of product customization.

Product variations usually allow you to define different attributes for a variable product. 

For example, if you’re selling a watch, you can have the face color as your attribute, with options such as red, blue, gray, and green. You can create as many attributes as necessary for a product.

After you’ve defined your attributes in WooCommerce, you need to create a variable product. To do this, set the product type to Variable product. This option is found in the product data section of WooCommerce. Afterward, you can add your attributes and variations to your product.

Using configurable products

Using product variations isn’t a way to create a WooCommerce custom product in the true sense of the word. This is because it only allows your customers to choose which version of the product they want.

For more customization flexibility, you have to create a configurable product. A configurable product uses a variable product as its base. So, as the customer selects which version of the product they want, a configurable product updates its product image. 

Essentially, the customer will modify a configurable product using different options or components you’ve provided within each attribute dropdown menu. 

💡 Tip: You can replace variations in the dropdowns with color, image, and text swatches. This will make the process more user-friendly and help your customers configure their products quickly. A great plugin for this is WooCommerce Attribute Swatches.

If your store sells composite products like camera kits with multiple components, configurable products are beneficial.

Using custom products with text and image customization

For this, you can add more custom fields to specific products and allow for unique customer inputs like text or an uploaded image. 

Custom fields can be any type of form field such as text field, textarea, number input, file upload checkbox, radio button, or select/dropdown field.

You can also add conditional logic to a custom field and display additional features for your customers to select. For instance, if a customer selects leather for their watch strap, they can have extra product options such as tan leather, full grain leather, etc. 

These options can only be displayed when a specific condition is met.

If you want to create a custom product for your online store, the basic  WooCommerce install doesn’t cut it. To get this done, you will need the help of a plugin.

How to create a WooCommerce custom product

The standard WooCommerce setup is suitable for creating basic product types like simple products and variable products. However, it is not equipped for creating custom products.

So, if you want to create custom products with customizable elements that update the product image and the final product, you’ll need the help of a plugin. And we’ve got just the right one to help you get it done in no time.

Introducing WooCommerce Product Configurator

WooCommerce Product Configurator is a plugin that enables you to create unique shopping experiences for your customers. It allows you to create customizable products on your WooCommerce store, which customers can personalize to meet their preferences and tastes. 

With a variable product as the base product, you can add configuration options as product attributes. These options could be a change in color, addition or removal of a component, change of material, etc.

When customers visit the WooCommerce product page, they can use this plugin’s product builder to customize the custom product and create its final design. 

WooCommerce Product Configurator works exceptionally well to create a seamless experience with custom products for both customers and store owners in the following ways:

Reducing the product images needed for custom products

If you have several customization options for your custom product, creating the final images of all possible combinations is a daunting task. Thankfully, WooCommerce Product Configurator saves you from hours of painstaking image creation by utilizing image layers. 

You’ll upload transparent image (PNG) layers for each attribute. Each time a customer selects an option, these images will layer on top of each other to create the final image. 

For instance, if you had 3 attributes, each with 5 options, you’d have to create 125 final images with the default WooCommerce. But with the Product Configurator, you only need 15.

In addition, adding extra product options is as simple as adding a new attribute and an image layer.  

A seamless product customization experience for customers

WooCommerce Product Configurator delivers a satisfying product customization experience for your customers by offering a dynamic visual preview of their custom product as they build it. Once they select a product option, the corresponding image layer will update immediately. 

When a customer then adds this product to their checkout, they’ll get a preview in the order details section of their final product on the cart and checkout page. This way, they can confirm their order right before buying.

The best part? They can do this on any device, thanks to this plugin’s mobile-friendly design. This experience encourages them to complete a purchase and keeps them coming back. 

Simplified stock management for store owners

As the store owner, you can manage inventory for the custom product’s options right from the product edit page on the backend of your WordPress site. This way, you can monitor your stock and ensure you have enough of each option to avoid frustrating your customers. 

So, now that we’ve made our case for creating customizable products with WooCommerce Product Configurator. It’s now time to add this plugin to your WooCommerce store and use it to create a WooCommerce custom product.

How to create a WooCommerce custom product using WooCommerce Product Configurator

In this section, we’ll walk you through brief step-by-step instructions on how to create a custom product using the WooCommerce Product Configurator.

Step 1: Install the WooCommerce plugin, WooCommerce Product Configurator

First things first, your website must meet the following requirements to use WooCommerce Product Configurator:

• PHP 5.3+ and a PHP GD Library.
• WooCommerce 2.0+ functionality. 

You can read through this guide on installing the latest version of WooCommerce if you haven’t one set up in your online store.

To install and activate the WooCommerce Product Configurator on your WooCommerce site, you need first to purchase it from the Iconic store: iconicwp.com/woocommerce-product-configurator

You’ll receive two emails. The first will provide you with a link to download WooCommerce Product Configurator, along with your license key. You’ll need this license key later. So, keep it safe.

Then, follow these steps:

1. Go to Plugins > Add New > Upload Plugin on your WordPress dashboard.
2. Choose the zip file you’ve just downloaded, upload it, and click Activate.
3. Once activated, you’ll need to enter your license key.

With the WooCommerce Product Configurator installed, let’s proceed and create your first configurable product.

We’ll do this in three steps:

• First, we’ll create a variable product, and then enable the Product Configurator.
• Next, create the configurable product images. For this, all of your images must be in PNG format.
• Lastly, we’ll add the images to your configurable product.

For this guide, we’ll show you how to create a configurable watch. Let’s get straight into it.

Step 2: Create a variable product in WooCommerce

WooCommerce Product Configurator relies on variable products to work. So, we’ll start by creating one using this tutorial on variable products.

Basically, the watch we’re creating will have three attributes for customers to modify. That is the face, the case, and the strap. 

Each of these attributes then has extra product options available to select from. These options allow customers to personalize their product orders to fit their preferences. Now, you can create your variations. 

You might want to create additional variations if your variations have different:

• Prices (this can be counteracted with WooCommerce Attribute Swatches)
• SKUs.
• Stock amounts.
• Images.

Note: Make sure your variations are in stock and have a price set. Without this, these variations won’t be available to the customer on the product page.

When you’re done, save the product using the publish settings and move on to enable the Product Configurator plugin. 

To do this, scroll down to the Product Data section of the product you’re editing and click the Configurator tab.

1. Once there, check the Enable Configurator checkbox.
2. Lastly, Save your product.

Next, we’re going to prepare the product images.

Step 3: Create your configurable product image

In this step, we’ll prepare the image layers customers will use to configure a product order. This is the most important step when using the Product Configurator plugin and the product images need to be good. 

For this section, you will need to use an image editing program like Adobe Photoshop or Affinity Photo. 

1. Start by creating an artboard at your preferred size. For example, 1000px by 1000px.
2. Create your image layers. These are the individual components of the product that your customer can configure. In this case, we’ve created a layer for each watch strap, case, and face type. 
3. When adding a new product component, put it on a transparent background by itself. This will ensure everything lines up with the layer below it.
4. Save each layer at the size of the artboard (1000px x 1000px) with the background remaining transparent.
5. Once all layers are saved as individual images, you’ll need to create a background layer. This can be a solid color if you like, but it must still be saved as a PNG image. single product page

Once this is done, you can navigate back to the product you’d like to configure in your WooCommerce store. Then, proceed to step 4.

Step 4: Add the image layers to your configurable product

Below the checkbox to Enable Configurator, you’ll see a list of your attributes and the values available for each. This is where you add your image layers. Each attribute value is given an image selector.

To add an image to each attribute value:

1. Click the plus (+) icon on the gray square.

2. Then, upload the image layer you’ve just created in the previous step, from the media library.
3. Once selected, click Set image, and your image layer will be displayed in the gray box.
4. Repeat these steps until all of your individual images are assigned to their respective attribute values. 
5. If you need to, you can remove any images by clicking the minus (-) icon.

The WooCommerce Product Configurator enables you to re-order the image layers to sit properly on the final product. 

For example, we always want the watch face to be displayed on top of the watch strap, so the product order of our attributes will reflect this.

To re-order the attributes:

1. Click the 3 lines icon to drag and drop them. 
2. Or, click the arrow icon to collapse the layer and then reorder. This should make it easier.

Attributes at the top will display on the front end of your WooCommerce site above the ones below it. 

Finally, add the background layer we created earlier. This is a required part of the configurator as it helps the plugin to know the size of your artboard.

When you’re ready, Save or Update the product from the publish settings. Now, your configurable product will now be added to your WooCommerce store. 

When you or the customer select the product options on the product page, you’ll see the appropriate layers loading in.

Create your WooCommerce custom product today

With WooCommerce custom products you have the chance to sell products that are completely unique to specific customers, granting them a personalized experience. This increases their satisfaction with your business and keeps them coming back. 

You can create custom products on your WooCommerce store using the WooCommerce Product Configurator plugin. It is built to make creating WooCommerce custom products quick and easy for you as the store owner.

On the other hand, your customers will have an easy time creating their ideal product, increasing the chance that they will buy the product and come back to do so again.