Adding a product customizer to your WooCommerce store will help you improve the customer experience and give you a competitive edge.
This article will guide you through the step-by-step process of adding a product customizer to your WooCommerce store. I’ll also explain the product customizer in a bit more detail.
On This Page
What is a WooCommerce Product Customizer?
A product customizer is a plugin that allows your customers to customize or personalize the products before purchasing them.
These customizations include adding custom text, choosing colors, uploading images, and selecting from predefined choices. This will help you provide a dynamic and interactive way for your customers to tailor the product according to their preferences.
Some plugins allow your customers to see real-time changes in the product appearance, while some plugins don’t have this feature.
Note: If you are selling products that don’t require customers to see the real-time changes in the product appearance, you can follow the add product add-ons and logic tutorial to learn about it.
However, if you are selling products that require customers to see the real-time changes in the product’s appearance, you can continue to read.
How to Add a WooCommerce Product Customizer to Your Store?
These plugins help you add a product customizer to your online store. I’ll use the Fancy Product Designer plugin to add a product customizer to one of my demo stores.
Which plugin you want to use is up to you. The following is the step-by-step guide to add the WooCommerce product customizer to your store and allow your customers to customize the product.
1. Install and Activate the Fancy Product Designer Plugin
First, you must purchase the Fancy Product Designer plugin from Code Canyon or their official store and download its zip file.
- Once downloaded, navigate to Plugins > Add New from your WordPress dashboard.
- Click the ‘Upload’ button to upload the plugin to your site.
- After that, a pop-up will appear on the screen, click the ‘Choose a file’ button to select the plugin’s zip file from your computer.
- Once you have selected the file, click the ‘Install Now’ button to install the plugin.
- After the plugin installation, you will be redirected to a new page. Click the ‘Activate’ button to activate the plugin.
Once you have installed and activated the plugin, we need to navigate to its settings to create a product customizer. To do so, navigate to ‘Fancy Product Designer’ from your WordPress dashboard.
3. Create a WooCommerce Product Customizer
After that, we need to create the product customizer for customers. To do so, we first need to create a product and then add different views for users to customize each view.
For example, if you are selling a t-shirt, you can add views like ‘Front’ and ‘Back’ to allow customers to customize both the views as they want.
You can also download a demo product and import it to the plugin to edit it. I’ll create a new product by clicking the ‘New’ button.
3.1. Add Product Title
Once you click the button, a pop-up with a single field will appear. You will need to add the product title in the field and click the ‘OK’ button to save it.
I’ll create a t-shirt product and allow customers to customize it. I have added the title in the title field.
3.3. Add the Image
Once you have added the product, we need to add its image. To add it, click the image icon and select the image from your WordPress media library or upload it from your computer.
3.3. Add a View
After that, we need to add a view to allow customers to add text and images or change their desired colors. You can also create some designs to allow customers to select from them and complete the purchase.
To create a view, click the plus icon in front of the product name you added.
3.4. Add the View Title
After that, you will see a pop-up where you must add the view title. After adding it, click the ‘OK’ button.
Once you click it, you will need to upload the view picture. I have added a sample image. Moreover, I have added one more view to the product by following the same steps.
4. Edit the View in Product Builder
After adding the view, you need to edit it and select what type of customizations you want your customers to do. The plugin provides you with a drag-and-drop product builder to do so.
To edit a product view, click the layers icon in front of the view.
4.1. Add an Image Layer
Once on the product builder, you need to create a base design. You can do that by adding layers to this view.
If you want to create a product design yourself, you can add different layers and design it. You also have the option to restrict customers from customizing the base design. They’ll only be able to add additional text or images.
However, if you want your customers to build the design entirely from scratch, you can just upload the base design and let them handle the rest.
As I have taken the example of a t-shirt, I want customers to create their designs. I’ll just add the shirt base so they can add elements.
To do so, click the ‘Image’ box in the layers section, give it a name, and upload the base image from your computer or WordPress media library.
You are free to play with the other available layers.
4.2. Change the Canvas Size
You can change the canvas design on the front-end if you want. You can adjust the width and height from the Canvas settings to change the canvas design.
4.3. Set Price For Each Element
Next, you may also want to set pricing for each element customers will add to the product. To do so, click the ‘View Options’ at the top of the page.
After that, a pop-up will appear from where you can configure different settings, but I’ll focus on adding the price for each text and image element customers will add to the product.
Scroll down to the ‘Miscellaneous’ section in the pop-up and add the price in the ‘Custom Image Price’ and ‘Custom Text Price’ fields for image and text elements, respectively.
To save the settings, don’t forget to click the ‘Set’ button at the bottom right corner of your screen.
4.4. Save View
Once you have made the adjustments per your requirements, click the ‘Save View’ button at the top left corner of the page to save the view.
5. Create a WooCommerce Product
After creating a product in the Fancy Designer plugin, we need to connect this product with the WooCommerce product. You can create a new product or edit an existing one to connect both.
I’ll edit an existing product. To edit the product, navigate to Products > All Products and hover your mouse over the product you want to edit. Click the ‘Edit’ button to edit it.
5.1. Select the Fancy Designer Product
Once on the product edit page, scroll to the bottom, and you will see the ‘Fancy Product Designer’ section. Select the source type.
As we have created a product using the Fancy builder, I’ll select the ‘Product’ as the source type. After that, select the product from the ‘Products’ dropdown.
You can also select multiple products, and users will be able to swap products on the front-end.
5.2. Update the Product
Finally, scroll to the top of the page and click the ‘Update’ button to update the product.
6. Final Results
Once the product has been updated, let’s test the final results.
To test it, I visited the WooCommerce product page as a customer, and as you can see, the product page has been replaced with the WooCommerce product customizer.
I could add the text or the image according to my requirements. I was being charged $5 for each element. I could also see the real-time changes in the preview window.
Note: There are a lot of customizations you can configure from the backend, and you are free to play around with the plugin settings and use them as per your requirements.
Conclusion
That’s it for today’s article.
I hope it was helpful to you and you were able to add a WooCommerce product customizer to your online Woocommerce store. You can create advanced products with the plugin’s help, allowing customers to personalize their products.
It could be beneficial if you sell customizable products like t-shirts, sneakers, gift cards, posters, and more. Adding the product customizer to your store is an excellent way to improve the customer experience and gain a competitive edge.
