When you have the Staggs product configurator plugin installed, your WooCommerce product pages won’t turn into configurable products right away. You can determine for each product whether you want to make that product configurable or not. In order to make it configurable, simply check the box “Enable Staggs Product Configurator”. When checked, the product builder metabox should show up. Don’t see the metabox show up? Please check your screen options (located in the top right-hand corner).
Working with the product builder The product configurator builder allows you to build the main logic of the configurator. The builder uses the Staggs Attributes. If you don’t have any attributes set up, please visit this page to learn how you can add attributes. Building the configurator is as simply as adding all the necessary attributes to your product configurator. You can choose between six types: Attribute Separator Tabs Custom HTML Summary Repeater (pro) Attributes First, we have our configurator attributes. Simply click the button ‘Add new’ and then click ‘Attribute’ to add a new attribute. Now you can select the desired attribute from the list of attributes. By default the attribute will be added to the end. But you can drag and drop the attribute in the desired position. You can also duplicate or remove items whenever you want to. If you have many items, you can also collapse the items to get a better view of what is included.
Hidden attribute You can choose to hide attribute. Hidden attributes can be used to complete price calculations or to complete previews Hidden attributes won’t show up in the configuration summary, PDF, cart and orders. Collapsible attribute You can also mark attributes collapsible. This allows the attribute to be collapsed/expanded by the user. The default collapsed state can be defined as well. Default attribute option You can also configure the default option for the attribute. This allows you to create A/B tests for the configurator for example. The default attribute option will become active on load. Conditional logic If you have the PRO version, you can even display attributes based on other attributes’ values. But this is a PRO feature. You can read more about conditional logic here. Separator
The separator can be used to separate the attributes into sections. You can create three types of sections: Regular sections (only adds border to add visual separation) Collapsable sections (allow sections to be collapsed) Steps (shows one attribute separator section per step) For each separator you can enter a title and mark the group collapsible or not. If you want to create a multi-step form based on the separators, you should check out this article. Tabs If you want to save space, you can split up attributes into tabs. Simply add new row for each tab and link the attributes that should become visible when the tab is clicked. Note: you also need to make sure the attributes are included in the configuration builder. Otherwise the tab will not show up.
Custom HTML If you want to include some custom text or html in the configurator, you can use the block Custom HTML You can enter any html in here:
Summary If you want to include inline summary of options, you can configure this in the configurator theme settings. But if you want to define your own position, you can add summary to the builder
Repeater (pro) Finally, you can create repeatable attributes in the product configurator builder. Add new type repeater and add the attributes that should get repeated. You can also apply conditional logic to the repeater.