How to Add a Custom Product Builder in WooCommerce

Want to add a custom product builder in WooCommerce?

A custom product builder in WooCommerce allows customers to design products and customize them to their own requirements. This interactive way of customizing product orders can improve sales conversions.

In this tutorial, we will show you how to easily add a custom product builder in WooCommerce without having to hire any developers or write any code.

Adding a custom product builder in WooCommerce

Why Add a Custom Product Builder in WooCommerce?

Adding a custom product builder in WooCommerce allows your customers to customize the products before placing an order.

For example, you can add print-on-demand products and let customers add their logos, images, and text to the products.

A custom product designer for WooCommerce can be used to sell your own products that you can customize for the customers before shipping.

Alternatively, you can also start a dropshipping business and let a third-party vendor take care of customization and shipping.

Now, let’s see how to add a custom product builder to your WooCommerce store.

Adding Custom Product Builder to a WooCommmerce Store

For this tutorial, we will be using Zakeke. It is a product customizer tool for WooCommerce and offers a seamless product builder experience for your users. The product designer is super easy to use for customers as well as store owners.

Firstly, you need to sign up for a Zakeke account.

Zakeke website

Then, you will be asked to choose your eCommerce integration. Simply click on the Next button to continue.

Zakeke wizard

Zakeke works with most popular eCommerce platforms including WooCommerce.

To connect your store to Zakeke, switch back to your WordPress website admin area.

Then, you need to install and activate the free Zakeke plugin.

Upon activation, you’ll be asked to connect your WooCommerce store to your Zakeke account. Just click on the Connect button to continue.

Connect Zakeke account

You’ll be then required to allow Zakeke access to perform actions on your WooCommerce store. Click on the Approve button to move forward.

Approve connection

This will bring you back to Zakeke website to start your free trial or choose a pricing plan. Click on the next button to continue.

Activate free trial

Next, you will see pricing options for different plans. Each plan includes a free 14-day trial and does not require a credit card.

Besides the Starter plan, all other plans charge an additional 1.9% transaction fee on sold products.

Choose a plan

Click to choose your plan and you are good to go.

Adding Your First Customizable Product

You can now click on the Next button to launch the Product configurator and start adding your products.

Launch Product Configurator

You can then choose a product from your own store, or you can select a print-on-demand service.

In this tutorial, we will choose to add products from our own demo store.

Choose product type

After that, Zakeke will load products from your store, and you need to choose the product that you want to configure.

Choose product

Then, it will choose your product image from your store. If you want to use a different image, then you can upload it. You can also add a back side of the product image or add variations.

Add product image or variations

Once you are satisfied with the product images, click on the ‘Set print area’ button. This will bring up a popup where you need to set a ruler by simply drawing a line with your mouse and providing a measurement.

Setting the print area

Next, you need to choose a shape for the print area and then draw it on the product image.

Choose area shape

When you are satisfied with your selection, click on the Save button to continue.

Then, you need to click on the Proceed to preview button to finalize your changes.

Finalize changes

You’ll now see your product details. Remember to save your changes as draft or publish it to your store.

Publish your product

Setting The Print Methods

The next step is to set print methods. This is where you can select how you want the design files to be formatted for printing.

From your Zakeke account dashboard, navigate to the Printing Methods from the left column and then click on the Add Printing Method button.

Adding a print method

From here, you can choose what printing features you want to allow to your customers. You can also choose the file types, resolution, and format.

At the bottom, you can choose the existing products that this method would apply to.

Remember to click on the Save Print Method button to store your changes.

Using The Custom Product Builder in WooCommerce

Zakeke will take care of adding the product customization option to all the products that you have added using the product configurator.

You can simply visit the product in your store, and you will see the option to Customize the product.

Customize product button

This will open up the product designer interface with a preview of the product image design tools on the right. Users can add text or upload images from their devices.

Product designer preview

Users can modify the image or text to the print area by simply dragging the corners. They can choose different fonts, colors, and styles.

The product designer also works on mobile devices and automatically adjusts to match the user’s screen size.

Mobile preview of the custom product builder for WooCommerce

Once done, they can download a copy of their design as PDF, save it, or simply add it to the cart.

After that, customers can check out as they would normally do with a preview of their customized product in the cart.

Check out product page

Processing the Custom Product Order in WooCommerce

Zakeke makes it really simple to get the customization files for each order.

Simply visit the WooCommerce » Orders page and click on an order for your customizable product.

Viewing orders in WooCommerce

On the Order details page, you’ll see a preview of the custom design created by the customer with a link to download the customization files.

Download print files for customer design

You can then download the print files and send them for print or to your dropshipping vendor.

Bonus Tip: Selling More Customizable Products in WooCommerce

Customizable products and a sleek product designer would help you make more sales. However, customers may not know that they can customize and design their products.

This is where OptinMonster comes in.

It is the best conversion optimization software available in the market and allows you to easily convert WooCommerce visitors into paying customers.

OptinMonster includes lightbox popups, slide-in popups, notification bars, countdown timers, and more. All these tools help you show the right message to your customers at the precise time.

With its powerful display rules, you can target customers and show them personalized campaigns.

GeoTargetted Popups in WooCommerce

For example, you can offer free shipping to customers in a particular area, show a slide-in popup for customizable products, or give a limited-time coupon to recover abandoned cart sales.

OptinMonster popup preview

We hope this article has helped you learn how to easily add a custom product builder in WooCommerce.

Tags: No tags

Leave A Comment

Your email address will not be published. Required fields are marked *