For every options set you can have custom display settings. The options are the same for all types of options sets, except for the Product set that will be explained below on this page.
Show an image for this add-on
Enable to show an additional image or icon near the title. You can have both an image for each option and an image for the set.
Example: in the screenshot below, we set a custom image for each option, without any label, plus the additional add-on image (the truck icon), and set the image position to the right (see settings below).
Product image replacing options
Choose to replace the default product image when an option is selected and which image to use to replace it.
- Don’t replace the image
- Replace with add-on image
- Replace with options images
Note: make sure that if you replace the product image either with the add-on image or the option image, you don’t have more than one add-on with these settings in the same product. If you have more, the replacement image will be the one of the last selected add-on.
Options images position
(not available for Label and Image as it has its custom Style tab)
- above label
- below label
- left side
- right side
Show as toggle
- no
- yes, with toggle opened by default
- yes, with toggle closed by default
Hide options images
Hide the images of all the options in this add-on in one click. Please, note, that if you’re using an image color swatch, also this image will be hidden.
Hide options labels
Hide the labels of all the options in this add-on in one click.
Hide options prices
Hide the prices of all options in this add-on in one click.
Options layout
In the second section in this tab, you will also find some extra options layout to control the way the options are displayed on the page.
Options per row: you can set it to 1 to 10 options per row.
Use a grid layout: enable to adjust the options in a grid based on the page width. This is particularly useful when you have many options with texts of different length: forcing them into a grid will make them cover the same space.
Options width (%): if you enable the grid layout, you will be able to choose how much of the grid tile the option will cover. For example, you can set this to 80% to add some extra spacing between tiles.
Example: in the following screenshots, there’s a setting of 4 options per row in a grid view, with 100% or 80% width.
Product options set — custom display settings
The display settings of the “Product” add-on differ from the general ones. It will look like this:
Show an image for this add-on: enable to show an additional image or icon near the title.
Show as toggle:
- no
- yes, with toggle opened by default
- yes, with toggle closed by default
Hide options prices: hide the prices of all options in this add-on in one click.
Show SKU label: enable to show the related product SKU.
Show stock label: enable to show the stock info and quantity (if set).
Show add to cart button: enable if you want that customers can not only select these products as components of the main product, but add them to the cart as individual products.
Show quantity selector: enable to let your customers select the quantity of the add-on product.
Options layout are the same as for all other add-ons (please, see above).
Move on to Conditional logic >