Want your product images to dynamically change as users select different variations? You can use the Multistep Product Configurator (MSPC) plugin to do this with WooCommerce as well as Fancy Product Designer.
Below is the process that will enable this feature for your WooCommerce shop. You can also watch this YouTube video to see the step-by-step process in real time.
Note: If you haven’t created your product in Fancy Product Designer yet, do that first. Then come back here to enable the Multistep Product Configurator.
Tip: MSPC works best with products with only one view.
Step 1: Create your attributes
Let’s say you have a sneaker for sale (like in our Sneaker demo). You want customers to select their preferred sneaker material as well as the laces color before they add it to the cart.
The first thing to do is to create these attributes for the sneaker product.
In WooCommerce, an attribute describes a specific aspect of a product. For sneakers, that could be something like:
Size
Color
Material
Laces color
Heel color
Note: This process will only work if you create the attributes under the Products panel. If you set up attributes from your individual product page or you import them from Printful, the attributes won’t appear.
To create a new attribute, enter the following data into the fields:
Name of the product layer/element you want to offer variations of
Slug (URL) for the attribute
You may also want to configure a custom sort order for your attribute’s terms or variations. You can assign custom ordering, sort them alphabetically, or by Term ID.
When you’re done, click the Add attribute button at the bottom.
Repeat this process until you’ve created all the attributes you need.
Step 2: Create your variations
Now that you’ve determined which elements of your product can be changed, you have to create the variations. In WooCommerce, they’re referred to as “terms”.
In WooCommerce, a variation describes the different options available for the various aspects of your product. For sneaker laces color, for example, that could be:
Silver
Black
White
Multi-colored
Laceless
To create your variations, click on your first Attribute.
In this example, we’ll be modifying our “Sneaker Material” attribute.
To create a new Variation, enter the following data into the fields:
Descriptive name of the variation
Slug (URL) for the variation
Short description (if you’d like that to appear on the frontend)
When the Fancy Product Designer plugin is installed, you’ll see two additional fields on this page that you wouldn’t otherwise with just WooCommerce:
Image URL
Fancy Product Designer Options
This allows to set plenty of options like position, scale, price, colors and much more. You can define these options in different areas of the plugin.
Image URL enables you to attach a thumbnail image to each variation. The thumbnail size is controlled via the dimensions that you set for the "Single Product Image" size in the General settings of WooCommerce.
The image you add to your variation (if any) will appear in the MSPC selection module next to the corresponding variation.
Fancy Product Designer Options needs to be enabled in order to display the featured image on the frontend of your product page.
To do this, click the Set Options button beneath it. A pop-up will open. Switch on the toggle next to Enable Options. This will give you a number of settings to configure for the variation.
Click the Set button in the bottom-right corner to save your changes.
When you’re done creating your variation, click the Add new [variation] button at the bottom of the page to save your changes. Repeat this process until all of your attribute’s variations have been created.
If you’d like to change the order in which your variations appear, do that now.
If you selected “Custom ordering” on the Attribute screen, you can drag-and-drop the order of your variations in the right panel. And if you selected “Name”, they will automatically sort from A to Z.
Step 3: Enable Multistep Product Configurator in your WooCommerce product
Go to Products > Add New. Or select an existing product from your list.
Scroll down to the WooCommerce Product data section.
In the dropdown select Variable Product.
Note: You can only use MSPC with variable products.
A Multistep Product Configurator checkbox will appear to the right of the dropdown. Click the checkbox to enable this feature.
Click on the Attributes tab. From the Add existing dropdown, select the attributes you want to add to this product.
In the Value(s) box, select the terms/variations you just created for each attribute.
Next, go to the new MSPC tab.
By default, WooCommerce displays product variations as dropdown selections. MSPC replaces those dropdowns with a new UI.
These settings give you control over how this new multi-step module appears on your product page.
Module: Select the way in which you want the steps to be displayed.
Grid Item Layout: Choose between Horizontal or Vertical.
Columns: Set the number of columns of items you want to appear in the module.
Auto-Next: Click this checkbox to automatically take customers to the next step after making a variation selection.
Step by Step: Click this checkbox to require customers to make a selection from the current view before they can move to the next.
Show Title In Tooltip: Select this checkbox if you want the name of the variation to appear when someone hovers over it.
Auto-Scroll Selected Tab: As soon as a tab is selected, the page will scroll to the selected tab.
Template Layout: Select the template layout for the MSPC.
Product Image: Decide where you want the product image to go in relation to the content on the page or the MSPC module.
Module Position: Decide where you want the MSPC module to go in relation to the content on the page.
Fancy Product Designer Modules: Display Fancy Product Designer Modules in specific tab position.
Step 4: Replace the default WooCommerce image with Fancy Product Designer
The last thing to do is to replace the WooCommerce default image with the Fancy Product interactive designer view.
To do this, go to Fancy Product Designer > Product Builder.
In the Selected View dropdown on the right, select the product view you’re working on.
Then click on the Layer that corresponds to the new attribute/variation you set up for the product.
In the settings to the right, add a word to the Replace field. For instance, we selected the sneaker Material layer. In the Replace field, we named it “material”. When we complete this process, it will enable us to replace the matching variation with this layer in Fancy Product Designer.
Click the Save View button at the top.
Next, go to Products > Attributes once more.
Select the attribute. Then select the variant you want to match to the layer.
Click the Set Options button at the bottom. The Replace field is a little more than halfway down the list of General settings. Enter the same term you used in the Product Builder here.
Click the Set button in the bottom-right corner to save your changes.
You can now return to your product and preview it.
You should see the Fancy Product Designer UI in place of the WooCommerce default product images. You should also see the Multistep Product Configurator module with all your attributes and variations.
Test it out and make sure it works exactly as you intended it to. When you’re satisfied with the results, publish your product to your store.