Connect with Multistep Product Configurator

Want your product images to dynamically change as users select different variations? You can use the Multistep Product Configurator (MSPC) plugin together with WooCommerce and Chamevo to achieve this.

If you haven’t created your product in Chamevo yet, do that first before enabling MSPC.MSPC works best with products that have only one view.

Step 1: Create Your Attributes

Let’s say you have a sneaker for sale. You want customers to select their preferred material and laces color before adding it to the cart.

In WooCommerce, an attribute describes a specific aspect of a product. Examples for sneakers:|

Size
Color
Material
Laces Color
Heel Color

How to create attributes:

Go to Products > Attributes in WordPress.
Enter Following:

Name: Name of the product layer/element for variations
Slug: URL-friendly version of the name

(Optional) Set a custom sort order for your attribute’s terms.
Click Add Attribute.
Repeat until all required attributes are created.

Attributes must be created under the Products panel. Attributes added directly on individual product pages or imported from external sources may not appear in MSPC.

Step 2: Create Your Variations

A variation describes the different options available for a product attribute. For example, sneaker laces color variations could include:

Silver
Black
White
Multi-colored
Laceless

How to create variations:

Click on the Configure Terms of attribute you want to modify (e.g., “Sneaker Material”).

It will open new Menu, Enter following information

Descriptive name of the variation
Slug (URL)
Short description (optional)

With Chamevo installed, two additional fields appear:

Image URL: Attach a thumbnail image for the variation (size controlled by WooCommerce “Single Product Image” setting)
Chamevo Options: Click Set Options → Enable toggle → configure options such as position, scale, price, and colors

Click Add new [variation] to save, and repeat for all variations.

Step 3: Enable MSPC in Your WooCommerce Product

Go to Products > Add New or edit an existing product.
Scroll to the Product Data section and select Variable Product.
Enable the Multistep Product Configurator checkbox.

MSPC only works with variable products.

Click the Attributes tab → select your attributes → choose the variations created in Step 2.

Go to the new MSPC tab. Configure:

Module: How steps are displayed
Grid Item Layout: Horizontal or Vertical
Columns: Number of items per row
Auto-Next: Move automatically to next step after selection
Step by Step: Require customers to complete current step
Show Title in Tooltip: Show variation name on hover
Auto-Scroll Selected Tab: Scroll to the selected step
Template Layout: Layout for MSPC module
Product Image & Module Position: Adjust positioning on page
Chamevo Modules: Display Chamevo modules in specific tab positions

Step 4: Replace WooCommerce Default Image with Chamevo

Go to Chamevo > Products
Open View in Product Builder
Select the relevant product view in Selected View dropdown.
Click on the Layer corresponding to the attribute/variation.
In the Replace field, enter the same term used for the variation (e.g., “material”).
Click Save View.
Go back to Products > Attributes, select the attribute, choose the variation, click Set Options, and enter the same term in the Replace field.
Click Set to save changes.

Step 5: Preview and Publish

Return to the product page.

You should see:

Chamevo interactive designer view replacing the default WooCommerce image
MSPC module displaying your attributes and variations
Test the flow to ensure it works as intended.
Publish the product when satisfied.

Following these steps allows your customers to dynamically configure products with multiple steps, while Chamevo ensures the product image updates according to the selected variations.

Updated on: 01/12/2025

Was this article helpful?

Thank you!