Staggs Product Configurator for WooCommerce


The Staggs Product Configurator for WooCommerce offers you a complete toolkit to create 2D and 3D product configurators in WooCommerce.

Our configurator is built around the famous stackable image concept: export individual product image layers and the configurator will stack them upon each other, resulting in the final product image. If you upgrade to the PRO version, you will be able to display 3D models in your configurator, showing the product from every angle. You can even put the object in your own space with basic AR capabilities!

View demos on our website

Why Staggs Product Configurator

There are many product configurator plugins to choose from. Why should you choose the Staggs Product Configurator plugin for WooCommerce?

  • Transform simple product pages into product configurators
  • Custom option items and options groups for easy management
  • Easy-to-use product configurator builder
  • Responsive configurator design
  • Showcase your product from multiple angles (all views will be updated simultaneously)
  • Built-in hooks and filters for developers
  • Configurator loads about just as fast as your regular product pages


The Staggs Product Configurator does not extend the WooCommerce Product Variations. Instead, we created our own version of product variations, so that we have more flexibility and to go just one step further than the default WooCommerce product variations. You might need to get used to the different naming schemes, so we have included a definition below to help you out:

Product Attributes: Option Groups
Attributes Terms: Option Items
Variable Product: Product Configurator with Simple Product
Variations: Configurator Steps (displays Option Groups)

Free features

The Staggs Product Configurator comes with a lot of features for free.

  • Stackable images
  • Display USPs
  • Support for multiple product previews
  • Product preview thumbnail labels
  • Product preview thumbnails
  • Real-time image preview and price calculation
  • A built-in dark and light theme
  • Support for custom theme
  • Support for custom fonts
  • Support for custom icons
  • Slide-out panel for detailed descriptions
  • Sticky add to cart button
  • Works well in all popular themes
  • Built right into your WordPress admin dashboard
  • Seamless integration with WooCommerce Products, Cart and Checkout
  • Support for configurator page backgrounds (works best in full page layouts).
  • Collapsible configurator option groups

Advanced Product Variation Options

The Staggs Product configurator comes with a list of different variation views for free:

  • Option List
  • Cards
  • Icons
  • Color Swatches
  • True/False
  • Checkboxes
  • Button group
  • Text input
  • Textarea
  • Number input
  • Range slider
  • Dropdown

Explore features


Our plugin supports a few shortcodes that can be used on product pages. This can be very helpful when using page builders that override the default WooCommerce product page template.

You can use the following shortcodes:
[staggs_configurator] to display complete configurator code;
[staggs_configurator_gallery] to display configurator image gallery;
[staggs_configurator_form] to display the form containing all option groups and values;
[staggs_configurator_totals] to display the add to cart or request invoice button;
[staggs_configurator_popup_button] to display the popup trigger button (the popup is not visible by default).

Note: the shortcodes are not intended to be used on regular posts and pages.

PRO features

Our PRO features include:

  • More templates: horizontal popup and stepper template
  • Ability to split up the configurator options into steps
  • Measurement field type
  • Advanced pricing options based on numeric input values
  • Conditional step display
  • Manage stock quantities for single option items
  • Link your regular WooCommerce Simple Products to option items
  • Request invoice: link to form (support for GravityForms, Contact Form 7, WP Forms and Ninja Forms)
  • Share active configuration as a link
  • Download active configuration as PDF
  • Display 3D product models (GLB and glTF)
  • Change texture, color and variant of the 3D model
  • CSV Import Export for convenient management

Getting Started

The product configurator uses stackable image layers to help you save loads of time creating all the variation images yourselves! Building a product configurator with Staggs is just as easy as 1, 2, 3:

  1. Create option groups: option groups bundle the option items together.
  2. Add option items (you can see option items as the single product variations).
  3. Build your configurable product with the created option groups.

Or use the option generator to generate option groups and items at once.

Preparing the product configurator

Before we set up the configurator, we have to identify the configurator steps. What will we allow our customers to edit? What steps are there going to be? When we have that clear and layout out, we can start creating images for these step options.

The idea here is that you create an image for each product variation. So were are basically cutting the product in various pieces. All pieces combined should display the finished product. The cool thing about this is that you only have to create images for the various options in each step. Not for all the combinations, because the configurator will do that for you.

Important! Keep the same image sizes for all of your images for the configurator. Otherwise you may end up with an incorrectly rendered product image.

Creating the product configurator

When you have finished creating all the images, we can start adding the product configurator groups. The groups will be used to combine all the related options. With all option groups in place, we can then add all the individual option items to the option groups.

With all the option groups in place, we are going to create the configurable product and link the option groups. And there you have it! Your first product configurator is complete.

You can now start customizing the layout: choose your template, change colors, fonts, icons and even apply some custom CSS if you like to.

Need help? Read the documentation for a detailed guide


Here at Staggs, we believe that product configurators are meant to be easy and fun. No more complex configurators and headaches. So we created Staggs, a product configurator for WooCommerce that allows you to easily set up a product configurator in just 3 steps.

Ekran Görüntüleri

  • Step template
  • Popup horizontal template
  • Popup vertical template
  • Full template
  • Floating template
  • Classic template
  • Slide-out description panel
  • Available Configurator Step Views
  • Staggs Product Configurator Terminology
  • Staggs Product Configurator Dashboard Page
  • Admin Product Configurator Builder
  • Admin Option Item list
  • Admin Option Item edit page
  • Staggs Product Configurator Analtyics Page
  • WooCommerce Cart Support
  • WooCommerce Admin Order View
  • CSV Import Export Tool


  1. Upload to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Go to the ‘Staggs’ tab in the admin menu
  4. Define your configurator option groups
  5. Add your configurator options in the options overview and link it to the option groups
  6. Create a new WooCommerce Simple product and check the box ‘Enable configurator’ in the product advanced tab
  7. Build your product configurator with available step options and configured option groups in the WooCommerce Admin Product Page
  8. Publish the product and enjoy!


What is this plugin?

This plugin offers a complete toolkit to create 2D and 3D configurable products in WooCommerce.

Why use this plugin?

This plugin allows you to transform your regular product pages into product configurators and product customizers! If you are looking for a new way to display your products, you should definitely try this one out!

Is the plugin free to use?

Absolutely! This plugin is free to use. But you can choose to upgrade to a paid version to get more options.

Does it require WooCommerce?

Yes, this plugin uses WooCommerce products and cart system for a convenient and familiar checkout process.

Does it support variable products?

No, we only support WooCommerce Simple Products. WooCommerce Variable Products are a kind of configurable product already.

Does it work with Elementor or any other page builder?

Sure! You can perfectly use any page builder in combination with the Staggs Product Configurator. However, you cannot modify the configurator product page layout.

Can I use it as a design configurator?

No, we have specialized this toolkit for creating configurable products where the final product image consists of product images. We don’t support drag and drop features in the product preview.

Does it work for print-on-demand services?

No, we have specialized this toolkit for creating 2D and 3D configurable products only. This is not a product designer tool.

My question is not listed

If you have any questions regarding the product configurator plugin, you can reach us at We try to respond as soon as possible.


Bu eklenti için herhangi bir değerlendirme bulunmuyor.

Katkıda Bulunanlar ve Geliştiriciler

“Staggs Product Configurator for WooCommerce” açık kaynaklı yazılımdır. Aşağıdaki kişiler bu eklentiye katkıda bulunmuşlardır.

Katkıda bulunanlar

Değişiklik Kaydı


  • Add support for shortcodes
  • Add new option type: button group
  • Update styling of collapsible option step groups
  • Add support for request invoice in combination with a form (PRO)
  • Add support for advanced pricing calculations based on given measurements (PRO)
  • Update Freemius SDK


  • Redirect to cart page on add to cart action
  • Prevent functions from executing when WooCommerce not installed
  • Only show complete option groups in the product configurator screen
  • Fix minor bug in classic view template


  • Added Separator option group for combining option groups
  • Added support for collapsible separators
  • Added support for separator steps
  • Added new stepper template that works great with the new stepper functionality
  • Added new popup template with horizontal layout
  • Added new popup template with vertical layout
  • Added new input type range slider
  • Added new input type textarea
  • Added new input font family for updating text previews
  • Added support for color inputs to update text previews
  • Added support for preview image active when step changes
  • Added support for preview image active when collapsible step is opened
  • Added support for theme header and footer in configurator full templates
  • Added support to display add to cart button only in final step in configurator full templates
  • Added support to optionally display gallery and buttons sticky on mobile devices in configurator full templates
  • Minor bug fixes


  • Added the Staggs Dashboard Page with overview of all actions
  • Added the Staggs Analytics page to see what product configurations are most popular
  • Added the Staggs Option Generator page, to generate multiple option groups and items at once
  • Added button to view 3D model in AR (Premium)
  • Make option for 3D model texture type (base or metallic)
  • Update for WordPress 6.2
  • Update Freemius SDK
  • Bug fixes


  • Added support for Advanced Custom Fields
  • Added support for Deposits & Partial Payments for WooCommerce
  • Update Freemius SDK


  • Added support for 3D model views (Premium)
  • Implement native WooCommerce add to cart functionality
  • Add option to display quantity input
  • Add setting to display totals above add to cart button (instead of in the button)
  • Update floating layout views
  • Remove redundant settings to maintain clean and simple UI
  • Added about page to help users get started
  • Bug fixes


  • Added support for multiple USP locations
  • Added folder in uploads folder to store generated configurator images
  • Added Request invoice support
  • Save configuration and create sharable links
  • Add support for preview labels and preview thumbnails
  • Add multiple locations
  • Allow to hide configurator arrows
  • Speed up conditional step loads
  • Add hooks and filters
  • Update styling
  • Add global stock settings
  • Add global settings to upload your own configurator icons
  • Update configurator notification display
  • Add setting to choose product item ordering in groups (asc or desc)
  • Improve mobile designs
  • Some minor bug fixes


  • Added support for multiple configurator layouts
  • Added step default view and compact views
  • Added box appearance rounded and squared
  • Added support for tooltips in Icons and Swatches step
  • Added toggle switch element for True-False step
  • Added default WooCommerce product hooks for optimal plugin support
  • Optionally set default option indication (like Included)
  • Use default WooCommerce settings for redirecting to cart page
  • Added welcome message to get you started even faster
  • Added hooks and filters
  • Fix loading custom fonts