Staggs Product Configurator for WooCommerce

Skildring

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

Terminology

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

Shortcodes

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

About

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.