> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Using variations to change the product template in the designer

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 afte****r a selection for the variation has been made. This can be found in the ****WooCommerce tab**** of the settings:

![](https://storage.crisp.chat/users/helpdesk/website/-/9/0/e/9/90e932ce2acf4800/19ab7c38-e0de-4cce-8250-d95f51_5ncvha.png)

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