How to create a product configurator in WordPress

If you want to offer product customization directly on your WordPress website, without relying on WooCommerce, the WCB Configurator Builder might be just for you!

Whether you’re selling custom artwork, personalized gifts, or configurable digital products, WCB lets you create beautiful 2D or 3D product configurators that your visitors can use seamlessly.

In this guide, you’ll learn how to set up a product configurator in WordPress using WCB, embed it on any page with a shortcode, and explore the key benefits and use cases for your business.

What is WCB Configurator Builder?

WCB Configurator Builder is a WordPress plugin that allows you to create interactive product configurators featuring layered 2D images or immersive 3D models.

Unlike typical WooCommerce-focused tools, WCB works perfectly as a standalone configurator you can add anywhere on your WordPress site.

Key features:

• Supports 2D layered image configurators
• Supports 3D model configurators with GLB files
• Real-time preview of customizations
• Conditional logic to show/hide options (add-on)
• Dynamic pricing updates (optional)
• Fully responsive and mobile-friendly
• Easy embedding via shortcodes

Why use WCB Configurator Builder for WordPress?

Creating a product configurator on your WordPress site with WCB offers many advantages:

1: No WooCommerce required

No need for WooCommerce or complex eCommerce setups. WCB works seamlessly on any WordPress site, perfect for digital products, services, or consultative sales.

2: Responsive design

Fully responsive and touch-optimized, so your configurator works beautifully on smartphones and tablets.

3: Easy to embed with shortcodes

Add your configurator anywhere on your site with a simple shortcode, whether on pages, posts, or custom templates.

4: Scalable & customizable

From simple 2D image overlays to immersive 3D models, WCB adapts to your product complexity and business needs.

Popular use cases for product configurators in WordPress

Here are some of the most common scenarios where WCB shines as a standalone configurator tool:

1. Custom artwork and prints
   Select colors, add text, choose frames, or mix and match design elements visually before ordering
2. Personalized gifts
   Customize mugs, phone cases, or stationery by selecting styles, patterns, and inscriptions directly on your site
3. Digital products & services
   Design templates, courses, or consulting packages, configurators can help users tailor their purchase options with a clear preview
4. Furniture & home decor
   Showcase configurable furniture or decor items where customers can select fabrics, finishes, and add-ons visually
5. Custom kits & packages
   Build “mix and match” product kits with selectable components that update in real time, such as beauty boxes, subscription bundles, or hobby kits
6. Corporate or event orders
   For bulk or event-specific orders, configurators streamline custom requests (logos, colors, quantities) in an easy, visual way

How to create a product configurator in WordPress with WCB

Step 1: Install and activate WCB Configurator Builder

1. Log in to your WordPress dashboard.
2. Go to Plugins > Add New.
3. Search for WCB Configurator Builder or upload the plugin ZIP file.
4. Click Install Now, then Activate.
5. You’ll see a new WCB menu in your dashboard.

Step 2: Create options for your configurator

Options are the customizable choices your users will pick, like colors, patterns, sizes, or add-ons.

1. Head over to WCB > Choices
2. Click Add new choice to create customizable options (e.g., Color, Material, Accessories).
3. For each choice, click Add option to define individual choices. For example:
   • Name: Red
   • Thumbnail: Upload a thumbnail or icon
   • Price adjustment (optional)
4. Repeat for all necessary options for each layer or part.

To create user input fields, head over to WCB > Inputs and create your inputs

Step 3: Create your configurator

1. Go to WCB Configurator > Add New.
2. Enter a title for your configurator (e.g., “Custom Mug Designer”).
3. Add your created customization options
4. Set conditional logic or default options as needed
5. Publish your configurator

Step 4: Embed your configurator on a WordPress page with a shortcode

1. Edit or create a WordPress page/post.
2. Insert the shortcode below where you want the configurator to appear: [wcb_configurator id=”123″]
   Replace “123” with your actual configurator ID found in the WCB Configurator list.
3. Publish or update the page.
4. Your configurator is now live!

Step 5: Link visuals to options for enhanced interactivity (optional)

To make your configurator more intuitive and visually rich, link specific images or 3D materials to the options you created.

1. Go to WCB > Visuals
2. Create a new visual group
3. Link visuals to the configuration options:
   1. For 2D configurators, assign layered images or icons that appear or update when an option is selected. This helps users see exactly how their choice affects the product design.
   2. For 3D configurators, assign textures, colors, or materials to your options so the 3D model updates dynamically as users pick different customizations.
4. Publish the visual group

This step enhances real-time feedback and improves customer confidence in their selections.

Final thoughts

Creating a product configurator on WordPress with WCB Configurator Builder is a straightforward way to offer interactive, visual customization for your products or services without complex setups. Its flexibility and ease of use make it perfect for a wide range of businesses looking to elevate their website experience.

Just build your configurator, grab the shortcode, and embed it anywhere on your site!