WooCommerce variations can be used to change the product that is loaded in the product designer. This can be useful for example for changing colors or for switching between different clothing cuts etc. . Through the settings a behaviour for the customize button can be chosen.
1. Create a variable WooCommerce product:
2. Create the attributes you need, for example color or size:
3. From the attributes generate the variations:
4. Select the Fancy Products for the variations:
5. Set initial FPD product:
In order to ensure that the product designer is loaded, it is necessary to select an initial FPD product through the meta box, just as you would for any other product.
Optional Configurations
If you use the customize button on your product pages to display the Fancy Product Designer only after it has been clicked, either in Lightbox mode or on the page, there is an option to control if the button shows up before or only after a selection for the variation has been made. This can be found in the WooCommerce tab of the settings:
If you want to hide the variations after the customize button has been clicked and the product designer is showing up in the next page, you can easily do that with CSS:
.fpd-customize-button-hidden .variations { display: none; }