Creating a configurable product
We will use a Use Case to portray how to create a configurable product.
Use case: Let’s assume we want to build a sunglasses configurator so our customer will be able to choose his lenses, left and right arms and frame among many others.
A configuration is a set of parameters used to create a configurable product. In order to create our configurable sunglasses product, we need to create a configuration first which will contain the different components and their options, and then assign that configuration to an existing product to
turn it into a configurable product.
Our sunglasses configuration can be summarized like this:
• Green moonshine
- To create a new configuration, click on Product Builder > New configuration.
- Enter your configuration title. The Preview section fills up with the components that you select as “default” in the next section, automatically. We can move to the next section for now.
- In the configuration settings section, we have fields that help to define our configuration.
- Skin: we can change the editor’s look and feel using the “Skin” field. There are default skins, called “Default” and “Right Sidebar skin”. More skins are available and will appear in this list when installed. You can also create your own skin as a plugin, and it will appear in the list when properly installed.
- Components default aspect: this field determines whether or not all the components in the configuration should be opened when the editor is loaded on the page, or closed.
- Components behaviour on click: this field determines whether other components are closed or opened when the user clicks one component.
- Configurator description: This is a text area that you can add description and instructions for your users, to give them instructions and how to navigate your configuration.
- We need to create our components as listed earlier:
- Name: component name
- Icon: component icon, that will be displayed in the editor, to represent this component.
- Single: only a single option can be selected for the component.
- Multiple: Multiple options can be selected for the component.
- Dropdown: The option is displayed as a dropdown field at the front end, but only one can be selected at a time.
- Click on the “Manage options” button to manage your component options:
- Group: groups are the best way to group your component options per category. Leave empty to ignore this setting.
- Name: option name
- Description: option description. This is usually displayed when the user hovers the mouse above the option icon or name.
- Icon: option’s icon. Preferably the image dimensions and size should not be large, to reduce editor load time.
- Image: option image that will be displayed on the preview area when this option is selected.
- Price: option price which will be added to the product price if one is set and option is selected. Leave this field empty to ignore this setting.
- Product/variation ID: WooCommerce shop product to link this option to. When the value is not “none”, the selected WooCommerce product price will be used instead of the one set in the option, when determining what price will be added to the configuration price. Please note that if this option is set and the configurable product is added to the cart, the related product will also be added to the cart.
- Default: allows you to set which option in the component will be selected by default, upon editor load. It is also the option displayed in the “Preview” section inside the configuration.
- Duplicate: this button allows you to duplicate the option that you have created and saved previously, in this configuration.
- Once you’re done, click on the Publish button to save your configuration.
- Now let’s create a new product or edit an existing one to assign our configuration to it.
If it’s a simple product, the configurations list will show up under the General tab.
But if it’s a variable one, the drop-down containing the list of your created configurations will be displayed in the variation settings. This way you can tie any configuration to any variation.
Select the configuration you want to assign to your product from the drop-down, and click on publish (or “update”) when you’re done to save the changes.
Congratulations, you just made a configurable product!
A “build-your-own” button will now appear on the product page and will lead to the configuration page when clicked.