Create a configuration

A custom product configuration is a set of parameters that can be assigned to one or more WooCommerce products that regulate how they work. Assigning a custom product configuration to a normal WooCommerce product turns it into a customizable product.

1. Make a new configuration

The first step to making our product customizable is to create a configuration. A configuration is a set of options which once defined will allow our plugin to take charge of the process of customizing your product from the designer to the generation of printable output files.

Click on Dashboard > CSD > Configurations, to access the list of existing configurations.
Next, click on New Configuration to have access to the page on which you can create a new configuration.
Add a Configuration name.
Choose your skin right here.
The canvas section allows you to apply a custom canvas size to your signs. The canvas can be smaller than the expected output files to fit inside the website pages but it needs to be a scaled version of the expected output.
Also in the canvas section, we have a lot of helpful options for you:
- Background color selector: This option allows you to choose how your customers will select the background color.
The Text section gives you a lot of funny options that will allow you to choose how your customers should manage their texts in the designer.
- Color Type: This option allow you to choose if your customer will have a color picker or if you want to define a palette of color for him to choose the text color in the designer.
- Default font size: This option allows you to choose the default font size the texts your customers will add to the designer will have.
The Fonts section allows you to choose which fonts will be available for the customers to choose from. When “Use global fonts” is set to “Yes”, all the fonts defined are automatically used to populate the customer’s selection. When choosing “No”, you define the list of fonts that you want your customers to choose from.
The Pricing rules section enables the admin user to charge any extra for the customization depending on the rules defined. A pricing rule has 5 components. The rule parameter allows you to set which condition should be checked. The parameters currently included in the tool are:
- Character square unit (WxH): this calculates the character square value by multiplying its height with its width
- Several characters in text (NB Chars in text): this has to do with the number of alphabets or numeric figures in a text.
- Several lines in the text (NB Lines in text): this has to do with the lines of a text.
- Selected font: this checks the selected font
- If character spacing: this is related to the spacing between characters
- The rule operator: allows you to define the kind of comparison to perform against the rule value. The operators included in the tool are:
  - Less than
  - Less or equals to.
  - Equals.
  - More than.
  - More or equal to.
- The rule value to check against.
- The Price: this allows you to define the price or extra price to add to the product base price if the rule is verified.
- The scope: allows you to set the rule scope. 2 scopes are currently supported:
  - Per item: the extra will be added for each design element that matches the rule defined.
  - On Whole design: the extra will be added only once even if more than one element matches the rule defined.
- Please also note that the administrator can combine simple rules to create a complex one. Click on the Add rule group to set a whole new group pricing rule.
Click on the Publish button to save your configuration.

2. Assign a configuration to a WooCommerce product

Once the configuration is created, we’ll assign it to a product to make the product customizable.

For a new product, click on Products > Add New to access the product creation screen.
Enter your product name.
Select the product type (only simple and variable products are supported at this time).
- For simple products:
  - Enter product price (note that the price is mandatory for the product to be customizable, even the value ‘zero’).
  - Now select the previously created configuration.
  - Publish your product.
- For variable products:
  - In the product creation view, select “variable product” as product data.
  - Click on the “variations” tab.
  - Select the variations you want to configure.
  - Enter “variation price”.
  - Now select the corresponding configuration previously created.
  - Publish your product.

3. FAQ

3.1. How can a customer customize a product?

Once a product has been set as customizable, there are 2 ways for customers to customize it:

From the shop page (simple products only): a Design from blank button will appear under the Add to cart button. A click on it will lead the user to the editor page with the product data you previously created already loaded.
From the product page: a Design from blank button will appear under the Add to cart button. A click on it will lead the user to the editor page with the product data already loaded. For variable products, selecting the right option will lead to the right configuration when you click the Design from blank button.

3.2. Can I add a configuration to an existing product?

Yes, but the existing WooCommerce product must either be simple or variable. The configuration field appears in existing WooCommerce products as well. You can follow the steps above for either product type, to add the configuration.

3.3. Will this work for themes that do not have any reference to WooCommerce?

This works for WooCommerce-enabled themes. It also works for themes that do not have any reference to WooCommerce. If the theme the customer is using is a WooCommerce compatible theme or a custom theme, and all hooks are properly triggered, then all buttons will appear. If not, then troubleshoot and verify that all hooks are properly triggered in the theme.

Last updated on May 11, 2023