{"id":71,"date":"2018-01-05T15:34:54","date_gmt":"2018-01-05T15:34:54","guid":{"rendered":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management-new\/?p=71"},"modified":"2024-01-09T12:27:29","modified_gmt":"2024-01-09T12:27:29","slug":"css-badge","status":"publish","type":"post","link":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/","title":{"rendered":"CSS badge"},"content":{"rendered":"\n<p>To create your CSS badge, start by entering a name to identify it (<em><strong>N.B.<\/strong>&nbsp;<strong>this is a required field<\/strong><\/em>) then select <i>CSS <\/i>from the dropdown in&nbsp;<strong>Badge type<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1332\" height=\"820\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg\" alt=\"Create CSS badge\" class=\"wp-image-838\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg 1332w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge-300x185.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge-1024x630.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge-768x473.jpg 768w\" sizes=\"auto, (max-width: 1332px) 100vw, 1332px\" \/><\/a><\/figure>\n\n\n\n<p>Choose the image for your badge from those available in the library or extra badges.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/24.css-badge-library.jpg\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1900\" height=\"859\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/24.css-badge-library.jpg\" alt=\"css badge library\" class=\"wp-image-839\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/24.css-badge-library.jpg 1900w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/24.css-badge-library-300x136.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/24.css-badge-library-1024x463.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/24.css-badge-library-768x347.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/24.css-badge-library-1536x694.jpg 1536w\" sizes=\"auto, (max-width: 1900px) 100vw, 1900px\" \/><\/a><\/figure>\n\n\n\n<p>You can download extra badges from <strong>Get more badges<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/25.css-get-more-badges.jpg\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1270\" height=\"898\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/25.css-get-more-badges.jpg\" alt=\"Get more css badges\" class=\"wp-image-840\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/25.css-get-more-badges.jpg 1270w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/25.css-get-more-badges-300x212.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/25.css-get-more-badges-1024x724.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/25.css-get-more-badges-768x543.jpg 768w\" sizes=\"auto, (max-width: 1270px) 100vw, 1270px\" \/><\/a><\/figure>\n\n\n\n<p>Here, you can either download them all or only those you want to use through the related buttons that will add the badges to your library.<\/p>\n\n\n\n<div class=\"alert alert-danger\">NOTE: You can <strong>download and use<\/strong> extra badges only if you have activated a valid license key. You can enter the key in YITH License activation.<\/div>\n\n\n\n<p>Now you can start setting all the available options through the <strong>built-in editor<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/26.css-badge-settings.jpg\" data-rel=\"lightbox-image-3\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"937\" height=\"900\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/26.css-badge-settings.jpg\" alt=\"CSS badge settings\" class=\"wp-image-841\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/26.css-badge-settings.jpg 937w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/26.css-badge-settings-300x288.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/26.css-badge-settings-768x738.jpg 768w\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text<\/strong>: here, you can customize the text style (font, size, color, alignment, etc.) as you like;<\/li>\n\n\n\n<li><strong>Background color:&nbsp;<\/strong>choose the color of the badge background;<\/li>\n\n\n\n<li><strong>Opacity (%):&nbsp;<\/strong>set the percentage of opacity for the badge.&nbsp;<em>Min. 0 = transparent; max 100 = solid color;<\/em><\/li>\n\n\n\n<li><strong>Rotation:<\/strong> With the rotation option, you can rotate the image like a 3D object. You can rotate it using the three main axes X, Y, and Z. You can either choose to use numbers or the slider as shown in the image below.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/81.css-badge-rotation.jpg\" data-rel=\"lightbox-image-4\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"2148\" height=\"1038\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/81.css-badge-rotation.jpg\" alt=\"\" class=\"wp-image-1098\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/81.css-badge-rotation.jpg 2148w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/81.css-badge-rotation-300x145.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/81.css-badge-rotation-1024x495.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/81.css-badge-rotation-768x371.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/81.css-badge-rotation-1536x742.jpg 1536w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/81.css-badge-rotation-2048x990.jpg 2048w\" sizes=\"auto, (max-width: 2148px) 100vw, 2148px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Flip\/Mirror text: <\/strong>enable if you want to apply a mirror effect on the text. If enabled, you can choose how to flip it through the option <strong>Flip orientation<\/strong>;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/82.css-badge-flip.jpg\" data-rel=\"lightbox-image-5\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"2172\" height=\"1022\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/82.css-badge-flip.jpg\" alt=\"\" class=\"wp-image-1097\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/82.css-badge-flip.jpg 2172w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/82.css-badge-flip-300x141.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/82.css-badge-flip-1024x482.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/82.css-badge-flip-768x361.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/82.css-badge-flip-1536x723.jpg 1536w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/82.css-badge-flip-2048x964.jpg 2048w\" sizes=\"auto, (max-width: 2172px) 100vw, 2172px\" \/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Badge position<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/27.css-badge-px-position.jpg\" data-rel=\"lightbox-image-6\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1585\" height=\"900\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/27.css-badge-px-position.jpg\" alt=\"CSS badge px position\" class=\"wp-image-842\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/27.css-badge-px-position.jpg 1585w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/27.css-badge-px-position-300x170.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/27.css-badge-px-position-1024x581.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/27.css-badge-px-position-768x436.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/27.css-badge-px-position-1536x872.jpg 1536w\" sizes=\"auto, (max-width: 1585px) 100vw, 1585px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Set position:&nbsp;<\/strong>choose how to set the badge position in the product image from&nbsp;<em>in px or % and&nbsp;<\/em><em>fixed.&nbsp;<\/em>By selecting&nbsp;<em>in px or %,&nbsp;<\/em>you will have the following options:\n<ul class=\"wp-block-list\">\n<li><strong>Anchor Point:&nbsp;<\/strong>select the anchor point for the badge (<em>top left, top right, bottom, left, bottom right<\/em>). E.g. in the image above, we have selected&nbsp;<em>top right;<\/em><\/li>\n\n\n\n<li><strong>Position:&nbsp;<\/strong>based on the selected anchor point, the position will automatically show two options&nbsp;<em>(in this case top and right) <\/em>and their values. Adjust them according to your needs in px or %;<\/li>\n\n\n\n<li><strong>Margin:&nbsp;<\/strong>based on the selected anchor point, the margin will automatically show two options&nbsp;<em>(in this case top and right) <\/em>and their values. Adjust them according to your needs in px or %.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/28.css-badge-fixed-position.jpg\" data-rel=\"lightbox-image-7\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1548\" height=\"900\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/28.css-badge-fixed-position.jpg\" alt=\"CSS badge fixed position\" class=\"wp-image-843\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/28.css-badge-fixed-position.jpg 1548w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/28.css-badge-fixed-position-300x174.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/28.css-badge-fixed-position-1024x595.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/28.css-badge-fixed-position-768x447.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/28.css-badge-fixed-position-1536x893.jpg 1536w\" sizes=\"auto, (max-width: 1548px) 100vw, 1548px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Set position:&nbsp;<\/strong>choose how to set the badge position in the product image from&nbsp;<em>in px or % and&nbsp;<\/em><em>fixed.&nbsp;<\/em>By selecting&nbsp;<em>fixed,&nbsp;<\/em>you will have the following options:\n<ul class=\"wp-block-list\">\n<li><strong>Position:&nbsp;<\/strong>choose the badge position from&nbsp;<em>top, middle&nbsp;<\/em>or<em>&nbsp;bottom.&nbsp;<\/em>E.g. in the image above, we have selected&nbsp;<em>top;<\/em><\/li>\n\n\n\n<li><strong>Alignment:&nbsp;<\/strong>choose the badge alignment from&nbsp;<em>left, center&nbsp;<\/em>or&nbsp;<em>right.&nbsp;<\/em>E.g. in the image above, we have selected&nbsp;<em>right;<\/em><\/li>\n\n\n\n<li><strong>Margin:&nbsp;<\/strong>based on the previous selections, the margin will automatically show two options&nbsp;<em>(in this case top and right) <\/em>and their values. Adjust them according to your needs in px or %.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management-new\/wp-content\/uploads\/sites\/271\/2018\/01\/Scale-on-mobile.jpg\" data-rel=\"lightbox-image-8\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"544\" height=\"89\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management-new\/wp-content\/uploads\/sites\/271\/2018\/01\/Scale-on-mobile.jpg\" alt=\"Scale on mobile\" class=\"wp-image-619\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/Scale-on-mobile.jpg 544w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/Scale-on-mobile-300x49.jpg 300w\" sizes=\"auto, (max-width: 544px) 100vw, 544px\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Scale on mobile:&nbsp;<\/strong>insert the value to scale the badge on mobile devices. Default value: 1.<\/li>\n<\/ul>\n\n\n\n<p><strong>Preview<\/strong><\/p>\n\n\n\n<p>Any of the above option settings will reflect in the&nbsp;<strong>preview<\/strong>&nbsp;box on the right so you will be able to see in real-time the badge you are creating and apply any necessary adjustments. To move the badge above the product image, you can use drag and drop. When applying this action, the position will be automatically set to&nbsp;<em>in px or %<\/em>&nbsp;and the values will update based on where you\u2019re moving the badge.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/29.css-badge-preview.jpg\" data-rel=\"lightbox-image-9\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1662\" height=\"900\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/29.css-badge-preview.jpg\" alt=\"CSS badge preview\" class=\"wp-image-845\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/29.css-badge-preview.jpg 1662w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/29.css-badge-preview-300x162.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/29.css-badge-preview-1024x555.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/29.css-badge-preview-768x416.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/29.css-badge-preview-1536x832.jpg 1536w\" sizes=\"auto, (max-width: 1662px) 100vw, 1662px\" \/><\/a><\/figure>\n\n\n\n<p><em>CSS badge on frontend<\/em><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management-new\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-badge-on-frontend-1.jpg\" data-rel=\"lightbox-image-10\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"519\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management-new\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-badge-on-frontend-1.jpg\" alt=\"CSS badge on frontend\" class=\"wp-image-631\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-badge-on-frontend-1.jpg 900w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-badge-on-frontend-1-300x173.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-badge-on-frontend-1-768x443.jpg 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\">Placeholders<\/h4>\n\n\n\n<p>When using the built-in editor, you can add dynamic content to show on the badge through the available placeholders that you can find by clicking on the link under the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-placeholders.jpg\" data-rel=\"lightbox-image-11\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1402\" height=\"888\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-placeholders.jpg\" alt=\"Placeholders link\" class=\"wp-image-1175\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-placeholders.jpg 1402w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-placeholders-300x190.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-placeholders-1024x649.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/CSS-placeholders-768x486.jpg 768w\" sizes=\"auto, (max-width: 1402px) 100vw, 1402px\" \/><\/a><\/figure>\n\n\n\n<p>In the modal, you will be able to copy placeholders for simple and variable products.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Simple products<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2024\/01\/simple-products.jpg\" data-rel=\"lightbox-image-12\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"950\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2024\/01\/simple-products.jpg\" alt=\"Simple product placeholders\" class=\"wp-image-1169\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2024\/01\/simple-products.jpg 1022w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2024\/01\/simple-products-300x279.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2024\/01\/simple-products-768x714.jpg 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/a><\/figure>\n\n\n\n<p>The available placeholders are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>{{regular_price}}<\/strong> &#8211; this shows the product regular price;<\/li>\n\n\n\n<li><strong>{{sale_price}} <\/strong>&#8211; this shows the product sale price;<\/li>\n\n\n\n<li><strong>{{stock_quantity}}<\/strong> &#8211; this shows the product stock. For products with stock management disabled, the badge won&#8217;t show;<\/li>\n\n\n\n<li><strong>{{saved_amount}}<\/strong> &#8211; this shows the amount saved by customers;<\/li>\n\n\n\n<li><strong>{{saved_percentage}}<\/strong> &#8211; this shows the percentage saved by customers.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/01\/placeholder-example-1.jpg\" data-rel=\"lightbox-image-13\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1896\" height=\"1056\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/01\/placeholder-example-1.jpg\" alt=\"Placeholder example\" class=\"wp-image-780\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/01\/placeholder-example-1.jpg 1896w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/01\/placeholder-example-1-300x167.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/01\/placeholder-example-1-1024x570.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/01\/placeholder-example-1-768x428.jpg 768w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/01\/placeholder-example-1-1536x855.jpg 1536w\" sizes=\"auto, (max-width: 1896px) 100vw, 1896px\" \/><\/a><figcaption class=\"wp-element-caption\">Regular price placeholder<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Variable products<\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/variable-products-1.jpg\" data-rel=\"lightbox-image-14\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"1294\" height=\"1046\" src=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/variable-products-1.jpg\" alt=\"Variable product placeholders\" class=\"wp-image-1171\" srcset=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/variable-products-1.jpg 1294w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/variable-products-1-300x243.jpg 300w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/variable-products-1-1024x828.jpg 1024w, https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2018\/01\/variable-products-1-768x621.jpg 768w\" sizes=\"auto, (max-width: 1294px) 100vw, 1294px\" \/><\/a><\/figure>\n\n\n\n<p>The available placeholders are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>{{min_regular_price}}<\/strong>&nbsp;\u2013 this shows the minimum regular price of product variations;<\/li>\n\n\n\n<li><strong>{{min_sale_price}}<\/strong>&nbsp;\u2013 this shows the minimum on-sale price of product variations;<\/li>\n\n\n\n<li><strong>{{min_stock_quantity}}<\/strong>&nbsp;\u2013 this shows the minimum stock quantity of product variations. For products with stock management disabled, the badge won\u2019t show;<\/li>\n\n\n\n<li><strong>{{min_saved_amount}}<\/strong>&nbsp;\u2013 this shows the minimum amount saved by customers;<\/li>\n\n\n\n<li><strong>{{min_saved_percentage}}<\/strong>&nbsp;\u2013 this shows the minimum percentage saved by customers.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-docs-light-blue-background-color has-background\"><strong>Please note:<\/strong>\u00a0by default, the placeholders show the minimum value. If you want to show the maximum value, just replace\u00a0<em>min<\/em>\u00a0with\u00a0<em><strong>max<\/strong><\/em>. For example,\u00a0<em><strong>{{max_sale_price}}<\/strong><\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To create your CSS badge, start by entering a name to identify it (N.B.&nbsp;this is a required field) then select CSS from the dropdown in&nbsp;Badge type. Choose the image for your badge from those available in the library or extra badges. You can download extra badges from Get more badges. Here, you can either download &hellip; <a href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">CSS badge<\/span><\/a><\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-71","post","type-post","status-publish","format-standard","hentry","category-premium-version-settings"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>YITH Badge Management: CSS badge<\/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-badge-management\/premium-version-settings\/css-badge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"YITH Badge Management: CSS badge\" \/>\n<meta property=\"og:description\" content=\"To create your CSS badge, start by entering a name to identify it (N.B.&nbsp;this is a required field) then select CSS from the dropdown in&nbsp;Badge type. Choose the image for your badge from those available in the library or extra badges. You can download extra badges from Get more badges. Here, you can either download &hellip; Continue reading CSS badge\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/\" \/>\n<meta property=\"og:site_name\" content=\"YITH WooCommerce Badge Management\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-05T15:34:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T12:27:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\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-badge-management\/premium-version-settings\/css-badge\/\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/\",\"name\":\"YITH Badge Management: CSS badge\",\"isPartOf\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg\",\"datePublished\":\"2018-01-05T15:34:54+00:00\",\"dateModified\":\"2024-01-09T12:27:29+00:00\",\"author\":{\"@id\":\"\"},\"breadcrumb\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#primaryimage\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg\",\"contentUrl\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg\",\"width\":1332,\"height\":820},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS badge\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/#website\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/\",\"name\":\"YITH WooCommerce Badge Management\",\"description\":\"Plugin documentation\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/author\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"YITH Badge Management: CSS badge","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-badge-management\/premium-version-settings\/css-badge\/","og_locale":"en_US","og_type":"article","og_title":"YITH Badge Management: CSS badge","og_description":"To create your CSS badge, start by entering a name to identify it (N.B.&nbsp;this is a required field) then select CSS from the dropdown in&nbsp;Badge type. Choose the image for your badge from those available in the library or extra badges. You can download extra badges from Get more badges. Here, you can either download &hellip; Continue reading CSS badge","og_url":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/","og_site_name":"YITH WooCommerce Badge Management","article_published_time":"2018-01-05T15:34:54+00:00","article_modified_time":"2024-01-09T12:27:29+00:00","og_image":[{"url":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/","name":"YITH Badge Management: CSS badge","isPartOf":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/#website"},"primaryImageOfPage":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#primaryimage"},"image":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#primaryimage"},"thumbnailUrl":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg","datePublished":"2018-01-05T15:34:54+00:00","dateModified":"2024-01-09T12:27:29+00:00","author":{"@id":""},"breadcrumb":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#primaryimage","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg","contentUrl":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-content\/uploads\/sites\/271\/2023\/10\/23.create-css-badge.jpg","width":1332,"height":820},{"@type":"BreadcrumbList","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/premium-version-settings\/css-badge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/"},{"@type":"ListItem","position":2,"name":"CSS badge"}]},{"@type":"WebSite","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/#website","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/","name":"YITH WooCommerce Badge Management","description":"Plugin documentation","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/author\/"}]}},"_links":{"self":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/posts\/71","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/comments?post=71"}],"version-history":[{"count":21,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/posts\/71\/revisions"}],"predecessor-version":[{"id":1176,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/posts\/71\/revisions\/1176"}],"wp:attachment":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/media?parent=71"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/categories?post=71"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-badge-management\/wp-json\/wp\/v2\/tags?post=71"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}