Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add a Custom Product Builder in WooCommerce (Easy)

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add a custom product builder in WooCommerce?

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

In this article, we will show you how to easily add a custom product builder in WooCommerce without hiring any developers or writing any code.

How to add 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 instance, you can add print-on-demand products and allow customers to add their logos, images, and text to the products.

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

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

That being said, let’s take a look at 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 WooCommerce product customizer tool and offers a seamless product builder experience for your users. The product designer is really easy to use for customers as well as store owners.

First, you need to visit the Zakeke website and sign up for an account. You can click the ‘Start free trial’ button to get started.

Zakeke

Zakeke works with the most popular eCommerce platforms, including WooCommerce.

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

Next, you need to install and activate the free Zakeke plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

The free plugin acts as a connecter between your website and the Zakeke product builder.

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

Connect Zakeke

You will be then asked to allow Zakeke access to perform actions on your WooCommerce store.

Go ahead and click on the ‘Approve’ button to move forward.

Connect Zakeke to WooCommerce

This will bring you to the Zakeke dashboard.

You can now head to the ‘Customizable Products’ option from the menu on your left.

Go to customizable products

You are now ready to add products that customers can customize.

Adding Your First Customizable Product

Once you are in Customizable Products, go ahead and click the ‘Add’ button.

Add your custom product

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

For the sake of this tutorial, we will choose to add products from our own demo store.

Choose where to get your product from

Next, Zakeke will load products from your store.

You need to choose the product that you want to configure.

Choose a product from your store

After that, Zakeke will choose your product image from your store.

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

Change custom product image

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.

Make a line with the ruler

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

For this tutorial, we will use the rectangular shape.

Create a rectangular area on your product

Once you are done, click the ‘Save’ button to continue.

Next, you need to click the ‘I don’t offer variations, go to preview’ button.

Go to product preview

You will now see your product details.

Don’t forget to click the ‘Save’ button to store your changes.

View preview and save custom product

Zakeke will now show a preview of the custom product builder.

You can test to see if everything is working properly and make changes if needed. There is also an option to place a test order.

Test the custom product builder

When you are happy with the changes, simply click the ‘Publish’ button at the top.

Setting the Print Methods

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

From your Zakeke account dashboard, go to ‘Printing methods’ in the left column and then click the ‘Add’ button.

Add a printing method

From here, you can choose what printing features you want to allow your customers to use.

You can also choose the file types, resolution, and format. If you allow users to add a text box to the product, then you have options to control the text style, font, format, color, size, and more.

Edit printing method details

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

Don’t forget to click on the ‘Save’ button to store your changes.

Select products to apply printing methods

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 your product

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 or social media accounts.

Add image to product in the builder

They can also adjust the image or text within the print area by simply dragging the corners. There are also options to choose different fonts, colors, and styles.

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

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

View cart with custom product

Bonus Tip: Selling More Customizable Products in WooCommerce

Customizable products and a sleek product designer can 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 on the market that allows you to easily convert WooCommerce visitors into paying customers.

OptinMonster comes with lightbox popups, slide-in popups, notification bars, countdown timers, and more. All these tools can help you display the right message to your customers at the right time.

Upsell popup preview

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

For instance, 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 countdown timer

We hope this article helped you learn how to easily add a custom product builder in WooCommerce. You may also want to see our guide on how to track conversions in WooCommerce to grow your business and our comparison of the best WooCommerce hosting providers.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

1 CommentLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.