Using WooCommerce variations to change the Fancy Product in the designer

Modified on Mon, 13 May 2024 at 08:43 AM

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; }


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article