{"id":819,"date":"2021-05-28T08:32:24","date_gmt":"2021-05-28T08:32:24","guid":{"rendered":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons-new-new\/?p=819"},"modified":"2024-05-30T09:40:44","modified_gmt":"2024-05-30T09:40:44","slug":"display-and-style","status":"publish","type":"post","link":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/","title":{"rendered":"Display &#038; Style"},"content":{"rendered":"\n<p>From this tab, you can configure a set of display and style options. The options are the same for all types of options sets, except for the <em><a href=\"#select\">Select<\/a><\/em> and <em><a href=\"#product\">Product<\/a> <\/em>sets which will be explained below on this page<em>. <\/em>Let&#8217;s analyze them together.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1608\" height=\"1366\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg\" alt=\"\" class=\"wp-image-1671\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg 1608w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style-300x255.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style-1024x870.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style-768x652.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style-1536x1305.jpg 1536w\" sizes=\"auto, (max-width: 1608px) 100vw, 1608px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/Screenshot-2023-04-20-alle-15.34.18.png\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1546\" height=\"838\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/Screenshot-2023-04-20-alle-15.34.18.png\" alt=\"Display &amp; Style options\" class=\"wp-image-1682\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/Screenshot-2023-04-20-alle-15.34.18.png 1546w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/Screenshot-2023-04-20-alle-15.34.18-300x163.png 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/Screenshot-2023-04-20-alle-15.34.18-1024x555.png 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/Screenshot-2023-04-20-alle-15.34.18-768x416.png 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/Screenshot-2023-04-20-alle-15.34.18-1536x833.png 1536w\" sizes=\"auto, (max-width: 1546px) 100vw, 1546px\" \/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Show an image for this set of options<\/strong><\/h4>\n\n\n\n<p>By enabling this option, you can show an additional image or icon near the title. You can have both an image for each option and an image for the set.<\/p>\n\n\n\n<p class=\"has-light-blue-background-color has-background\"><strong>Example<\/strong>: in the screenshot below, we set a custom image for each option plus the additional add-on image (the &#8220;truck&#8221; icon), and set the images position to the right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"516\" height=\"472\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/block-image.jpg\" alt=\"Block image\" class=\"wp-image-1821\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/block-image.jpg 516w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/block-image-300x274.jpg 300w\" sizes=\"auto, (max-width: 516px) 100vw, 516px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Product image replacing options<\/strong><\/h4>\n\n\n\n<p>Choose to replace the default product image when an option is selected and which image to use to replace it.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Don\u2019t replace the image<\/li>\n\n\n\n<li>Replace with block image<\/li>\n\n\n\n<li>Replace with options image<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2358\" height=\"994\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-image.png\" alt=\"\" class=\"wp-image-1822\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-image.png 2358w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-image-300x126.png 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-image-1024x432.png 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-image-768x324.png 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-image-1536x647.png 1536w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-image-2048x863.png 2048w\" sizes=\"auto, (max-width: 2358px) 100vw, 2358px\" \/><figcaption class=\"wp-element-caption\">Replace with block image<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2328\" height=\"1024\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-option.png\" alt=\"\" class=\"wp-image-1823\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-option.png 2328w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-option-300x132.png 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-option-1024x450.png 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-option-768x338.png 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-option-1536x676.png 1536w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/replace-option-2048x901.png 2048w\" sizes=\"auto, (max-width: 2328px) 100vw, 2328px\" \/><figcaption class=\"wp-element-caption\">Replace with options image<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-light-gray-background-color has-background\"><strong>Note<\/strong>: make sure that if you replace the product image either with the block image or the options image, you don\u2019t 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 option.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Hide options images<\/strong><\/h4>\n\n\n\n<p>Hide the images of all the options of this block in one click. Please note, that if you\u2019re using an image color swatch, also this image will be hidden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/hide-images.jpg\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"294\" height=\"230\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/hide-images.jpg\" alt=\"Hide options images\" class=\"wp-image-1675\"\/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Options images position<\/strong><\/h4>\n\n\n\n<p>Choose the position to show the options images from:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>above label<\/li>\n\n\n\n<li>under label<\/li>\n\n\n\n<li>left side<\/li>\n\n\n\n<li>right side<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"438\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/above-label.jpg\" alt=\"\" class=\"wp-image-1676\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/above-label.jpg 340w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/above-label-233x300.jpg 233w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><figcaption class=\"wp-element-caption\">Above label<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"362\" height=\"442\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/under-label.jpg\" alt=\"\" class=\"wp-image-1677\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/under-label.jpg 362w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/under-label-246x300.jpg 246w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><figcaption class=\"wp-element-caption\">Under label<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"314\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/left-side.jpg\" alt=\"\" class=\"wp-image-1678\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/left-side.jpg 512w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/left-side-300x184.jpg 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><figcaption class=\"wp-element-caption\">Left side<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"476\" height=\"320\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/right-side.jpg\" alt=\"\" class=\"wp-image-1679\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/right-side.jpg 476w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/right-side-300x202.jpg 300w\" sizes=\"auto, (max-width: 476px) 100vw, 476px\" \/><figcaption class=\"wp-element-caption\">Right side<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Show as toggle<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>no<\/strong><\/li>\n\n\n\n<li>yes, with toggle&nbsp;<strong>opened&nbsp;<\/strong>by default<\/li>\n\n\n\n<li>yes, with toggle&nbsp;<strong>closed&nbsp;<\/strong>by default<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"456\" height=\"320\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/open-toggle.jpg\" alt=\"\" class=\"wp-image-1680\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/open-toggle.jpg 456w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/open-toggle-300x211.jpg 300w\" sizes=\"auto, (max-width: 456px) 100vw, 456px\" \/><figcaption class=\"wp-element-caption\">Toggle opened by default<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"574\" height=\"122\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/closed-toggle.jpg\" alt=\"\" class=\"wp-image-1681\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/closed-toggle.jpg 574w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/closed-toggle-300x64.jpg 300w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><figcaption class=\"wp-element-caption\">Toggle closed by default<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Hide options labels<\/strong><\/h4>\n\n\n\n<p>Hide the labels of all the options of this block in one click.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Hide options prices<\/strong><\/h4>\n\n\n\n<p>Hide the prices of all options in this add-on in one click.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Options per row<\/h4>\n\n\n\n<p>Use the slider to choose the number of options (from 1 to 10) to show in each row.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Use a grid layout<\/strong> <\/h4>\n\n\n\n<p>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 lengths: forcing them into a grid will make them cover the same space.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1380\" height=\"370\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2021\/05\/grid.jpg\" alt=\"Grid example\" class=\"wp-image-1683\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2021\/05\/grid.jpg 1380w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2021\/05\/grid-300x80.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2021\/05\/grid-1024x275.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2021\/05\/grid-768x206.jpg 768w\" sizes=\"auto, (max-width: 1380px) 100vw, 1380px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"select\"><strong>Select<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/select-style.jpg\" data-rel=\"lightbox-image-3\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1499\" height=\"1521\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/select-style.jpg\" alt=\"Select - Display &amp; Style options\" class=\"wp-image-1685\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/select-style.jpg 1499w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/select-style-296x300.jpg 296w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/select-style-1009x1024.jpg 1009w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/select-style-768x779.jpg 768w\" sizes=\"auto, (max-width: 1499px) 100vw, 1499px\" \/><\/a><\/figure>\n\n\n\n<p>For the <em>Select<\/em> type, in addition to the other display and style options, you will also be able to define the width (in %) of the select in relation to the container. The value can be configured from 1 to 100.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"product\"><strong>Product<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1477\" height=\"2010\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/product-style.jpg\" alt=\"Product - Dispaly &amp; Style options\" class=\"wp-image-1687\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/product-style.jpg 1477w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/product-style-220x300.jpg 220w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/product-style-752x1024.jpg 752w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/product-style-768x1045.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/product-style-1129x1536.jpg 1129w\" sizes=\"auto, (max-width: 1477px) 100vw, 1477px\" \/><\/figure>\n\n\n\n<p>The Display &amp; Style options of the \u201cProduct\u201d type differ from the general ones.<\/p>\n\n\n\n<p><strong>Show an image for this add-on<\/strong>: enable to show an additional image or icon near the title.<\/p>\n\n\n\n<p><strong>Show as toggle<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>no<\/strong><\/li>\n\n\n\n<li>yes, with toggle&nbsp;<strong>opened&nbsp;<\/strong>by default<\/li>\n\n\n\n<li>yes, with toggle&nbsp;<strong>closed&nbsp;<\/strong>by default<\/li>\n<\/ul>\n\n\n\n<p><strong>Hide options prices<\/strong>: hide the prices of all options of this block in one click.<\/p>\n\n\n\n<p><strong>Show SKU label<\/strong>: enable to show the related product SKU.<\/p>\n\n\n\n<p><strong>Show stock label<\/strong>: enable to show the stock info and quantity (if set).<\/p>\n\n\n\n<p><strong>Show add to cart button<\/strong>: enable if you want that customers can not only select these products as options of the main product but also add them to the cart as individual products.<\/p>\n\n\n\n<p><strong>Show quantity selector<\/strong>: enable to let your customers select the quantity of the product.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/quantity-selector-1.jpg\" data-rel=\"lightbox-image-4\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1293\" height=\"1612\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/quantity-selector-1.jpg\" alt=\"Quantity selector example\" class=\"wp-image-1689\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/quantity-selector-1.jpg 1293w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/quantity-selector-1-241x300.jpg 241w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/quantity-selector-1-821x1024.jpg 821w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/quantity-selector-1-768x957.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/quantity-selector-1-1232x1536.jpg 1232w\" sizes=\"auto, (max-width: 1293px) 100vw, 1293px\" \/><\/a><\/figure>\n\n\n\n<p><strong>When a product is out of stock:<\/strong> you can either hide the product or disable it so that users can&#8217;t select it. Below is an example of an out-of-stock product disabled.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/disable-product.jpg\" data-rel=\"lightbox-image-5\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1202\" height=\"1306\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/disable-product.jpg\" alt=\"Disabled product\" class=\"wp-image-1690\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/disable-product.jpg 1202w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/disable-product-276x300.jpg 276w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/disable-product-942x1024.jpg 942w, https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/disable-product-768x834.jpg 768w\" sizes=\"auto, (max-width: 1202px) 100vw, 1202px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Options per row:<\/strong> use the slider to choose the number of options (from 1 to 10) to show in each row.<\/p>\n\n\n\n<p><strong>Adjust options in a grid:<\/strong> enable to adjust the options in a grid based on the page width.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From this tab, you can configure a set of display and style options. The options are the same for all types of options sets, except for the Select and Product sets which will be explained below on this page. Let&#8217;s analyze them together. Show an image for this set of options By enabling this option, &hellip; <a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Display &#038; Style<\/span><\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-819","post","type-post","status-publish","format-standard","hentry","category-options-sets"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>YITH Product Add-Ons: Display &amp; Style<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"YITH Product Add-Ons: Display &amp; Style\" \/>\n<meta property=\"og:description\" content=\"From this tab, you can configure a set of display and style options. The options are the same for all types of options sets, except for the Select and Product sets which will be explained below on this page. Let&#8217;s analyze them together. Show an image for this set of options By enabling this option, &hellip; Continue reading Display &#038; Style\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/\" \/>\n<meta property=\"og:site_name\" content=\"YITH WooCommerce Product Add-Ons\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-28T08:32:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-30T09:40:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg\" \/>\n<meta name=\"author\" content=\"ausilia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ausilia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/\",\"name\":\"YITH Product Add-Ons: Display & Style\",\"isPartOf\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg\",\"datePublished\":\"2021-05-28T08:32:24+00:00\",\"dateModified\":\"2024-05-30T09:40:44+00:00\",\"author\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#\/schema\/person\/5689fc6012d168000704e80bf26087da\"},\"breadcrumb\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#primaryimage\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg\",\"contentUrl\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg\",\"width\":1608,\"height\":1366},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Display &#038; Style\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#website\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/\",\"name\":\"YITH WooCommerce Product Add-Ons\",\"description\":\"Plugin documentation\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#\/schema\/person\/5689fc6012d168000704e80bf26087da\",\"name\":\"ausilia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b8d070e41e47a70dee7611c4d905ff05?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b8d070e41e47a70dee7611c4d905ff05?s=96&d=mm&r=g\",\"caption\":\"ausilia\"},\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/author\/ausilia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"YITH Product Add-Ons: Display & Style","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/","og_locale":"en_US","og_type":"article","og_title":"YITH Product Add-Ons: Display & Style","og_description":"From this tab, you can configure a set of display and style options. The options are the same for all types of options sets, except for the Select and Product sets which will be explained below on this page. Let&#8217;s analyze them together. Show an image for this set of options By enabling this option, &hellip; Continue reading Display &#038; Style","og_url":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/","og_site_name":"YITH WooCommerce Product Add-Ons","article_published_time":"2021-05-28T08:32:24+00:00","article_modified_time":"2024-05-30T09:40:44+00:00","og_image":[{"url":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg","type":"","width":"","height":""}],"author":"ausilia","twitter_card":"summary_large_image","twitter_misc":{"Written by":"ausilia","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/","name":"YITH Product Add-Ons: Display & Style","isPartOf":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#website"},"primaryImageOfPage":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#primaryimage"},"image":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#primaryimage"},"thumbnailUrl":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg","datePublished":"2021-05-28T08:32:24+00:00","dateModified":"2024-05-30T09:40:44+00:00","author":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#\/schema\/person\/5689fc6012d168000704e80bf26087da"},"breadcrumb":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#primaryimage","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg","contentUrl":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-content\/uploads\/sites\/249\/2023\/04\/checkbox-style.jpg","width":1608,"height":1366},{"@type":"BreadcrumbList","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/display-and-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/"},{"@type":"ListItem","position":2,"name":"Display &#038; Style"}]},{"@type":"WebSite","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#website","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/","name":"YITH WooCommerce Product Add-Ons","description":"Plugin documentation","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#\/schema\/person\/5689fc6012d168000704e80bf26087da","name":"ausilia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b8d070e41e47a70dee7611c4d905ff05?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8d070e41e47a70dee7611c4d905ff05?s=96&d=mm&r=g","caption":"ausilia"},"url":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/author\/ausilia\/"}]}},"_links":{"self":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/posts\/819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/comments?post=819"}],"version-history":[{"count":17,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/posts\/819\/revisions"}],"predecessor-version":[{"id":2118,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/posts\/819\/revisions\/2118"}],"wp:attachment":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/media?parent=819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/categories?post=819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-product-add-ons\/wp-json\/wp\/v2\/tags?post=819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}