{"id":1640,"date":"2026-03-09T17:42:02","date_gmt":"2026-03-09T17:42:02","guid":{"rendered":"https:\/\/gema75.com\/woocommerce-badge-management\/?page_id=1640"},"modified":"2026-03-22T20:53:22","modified_gmt":"2026-03-22T20:53:22","slug":"woo-sale-badge-documentation","status":"publish","type":"page","link":"https:\/\/gema75.com\/woocommerce-badges\/woo-sale-badge\/woo-sale-badge-documentation\/","title":{"rendered":"Documentation"},"content":{"rendered":"\n<style>body1{\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\n            line-height: 1.6;\n            color: #333;\n            background: #f5f5f5;\n            padding: 0px;\n        }\n        \n        .doc-container {\n            max-width: 1150px;\n            margin: 0 auto;\n            background: transparent;\n        }\n        \n        \/* Header *\/\n        .doc-header {\n            background: linear-gradient(135deg, #f976c6 0%, #ca55a0 100%);\n            color: white;\n            padding: 20px 20px;\n            text-align: center;\n            margin-bottom: 30px;\n        }\n        \n        .doc-header h1 {\n            font-size: 40px;\n            margin-bottom: 10px;\n            font-weight: 600;\n            line-height: 1.2;\n        }\n        \n        .doc-header .version {\n            font-size: 18px;\n            opacity: 0.9;\n            background: rgba(255,255,255,0.2);\n            display: inline-block;\n            padding: 5px 15px;\n            border-radius: 20px;\n            margin-top: 15px;\n        }\n        \n        .doc-header .meta-info {\n            margin-top: 20px;\n            font-size: 16px;\n        }\n        \n        .doc-header .meta-info span {\n            margin: 0 15px;\n            display: inline-block;\n        }\n        \n        \/* Navigation *\/\n        .doc-nav {\n            background: white;\n            border-radius: 10px;\n            padding: 20px 10px;\n            margin-bottom: 30px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            position: sticky;\n            top: 20px;\n            z-index: 100;\n        }\n        \n        .doc-nav ul {\n            list-style: none;\n            display: flex;\n            flex-wrap: wrap;\n            gap: 5px;\n            margin-left: 5px;\n            justify-content: center;\n            padding-inline-start: 0px;\n        }\n        \n        .doc-nav ul li a {\n            color: #309dbe;\n            text-decoration: none;\n            font-weight: 500;\n            padding: 8px;\n            border-radius: 5px;\n            transition: all 0.3s;\n            display: inline-block;\n            background: #f8f9fa;\n        }\n        \n        .doc-nav ul li a:hover {\n            background: #309dbe;\n            color: white;\n        }\n        \n        \/* Content Sections *\/\n        .doc-section {\n            background: white;\n            border-radius: 10px;\n            padding: 30px;\n            margin-bottom: 30px;}\n        \n        .doc-section h2 {\n            color: #333;\n            font-size: 32px;\n            margin-bottom: 25px;\n            padding-bottom: 10px;\n            border-bottom: 3px solid #309dbe;\n        }\n        \n        .doc-section h3 {\n            color: #555;\n            font-size: 24px;\n            margin: 30px 0 20px;\n        }\n        \n        .doc-section h4 {\n            color: #666;\n            font-size: 20px;\n            margin: 25px 0 15px;\n        }\n        \n        .doc-section p {\n            margin-bottom: 15px;\n            font-size: 16px;\n        }\n        \n        \/* Info Boxes *\/\n        .info-box {\n            background: #f0f8ff;\n            border-left: 4px solid #2196F3;\n            padding: 20px;\n            margin: 25px 0;\n            border-radius: 0 5px 5px 0;\n        }\n        \n        .warning-box {\n            background: #fff3cd;\n            border-left: 4px solid #ffc107;\n            padding: 20px;\n            margin: 25px 0;\n            border-radius: 0 5px 5px 0;\n        }\n        \n        .tip-box {\n            background: #d4edda;\n            border-left: 4px solid #28a745;\n            padding: 20px;\n            margin: 25px 0;\n            border-radius: 0 5px 5px 0;\n        }\n        \n        .note-box {\n            background: #e7f3ff;\n            border-left: 4px solid #309dbe;\n            padding: 20px;\n            margin: 25px 0;\n            border-radius: 0 5px 5px 0;\n        }\n        \n        \/* Tables *\/\n        .feature-table {\n            width: 100%;\n            border-collapse: collapse;\n            margin: 25px 0;\n            font-size: 16px;\n        }\n        \n        .feature-table th {\n            background: #309dbe;\n            color: white;\n            padding: 15px;\n            text-align: left;\n            font-weight: 600;\n        }\n        \n        .feature-table td {\n            padding: 15px;\n            border-bottom: 1px solid #ddd;\n        }\n        \n        .feature-table tr:hover {\n            background: #f5f5f5;\n        }\n        \n        \/* Badge Previews *\/\n        .badge-preview {\n            display: flex;\n            gap: 20px;\n            flex-wrap: wrap;\n            margin: 25px 0;\n        }\n        \n        .badge-sample {\n            padding: 15px 25px;\n            border-radius: 5px;\n            color: white;\n            font-weight: bold;\n            text-align: center;\n            min-width: 120px;\n            font-size: 16px;\n        }\n        \n        .badge-new {\n            background: #be74bf;\n        }\n        \n        .badge-instock {\n            background: #638863;\n        }\n        \n        .badge-product {\n            background: #d3883c;\n        }\n        \n        .badge-variation {\n            background: #3498db;\n        }\n        \n        \/* Requirements List *\/\n        .requirements-list {\n            list-style: none;\n            padding: 0;\n        }\n        \n        .requirements-list li {\n            padding: 12px 15px;\n            margin: 8px 0;\n            background: #f9f9f9;\n            border-radius: 5px;\n            border-left: 3px solid #309dbe;\n            font-size: 16px;\n        }\n        \n        .requirements-list li strong {\n            color: #309dbe;\n            min-width: 100px;\n            display: inline-block;\n        }\n        \n        \/* Step by Step *\/\n        .step-list {\n            counter-reset: step;\n            list-style: none;\n        }\n        \n        .step-list li {\n            counter-increment: step;\n            margin-bottom: 25px;\n            padding-left: 60px;\n            position: relative;\n            font-size: 16px;\n        }\n        \n        .step-list li:before {\n            content: counter(step);\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 40px;\n            height: 40px;\n            background: #309dbe;\n            color: white;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-weight: bold;\n            font-size: 18px;\n        }\n        \n        .step-list li strong {\n            color: #309dbe;\n            display: block;\n            margin-bottom: 5px;\n            font-size: 18px;\n        }\n        \n        .step-list li p {\n            margin: 5px 0 0;\n        }\n        \n        \/* Feature Grid *\/\n        .feature-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 25px;\n            margin: 25px 0;\n        }\n        \n        .feature-card {\n            background: #f9f9f9;\n            padding: 25px 15px;\n            border-radius: 8px;\n            border: 1px solid #e0e0e0;\n        }\n        \n        .feature-card h4 {\n            color: #309dbe;\n            margin-top: 0;\n            margin-bottom: 15px;\n            font-size: 20px;\n        }\n        \n        .feature-card ul {\n            list-style: disc;\n            margin-left: 0px;\n        }\n        \n        .feature-card ul li {\n            margin-bottom: 8px;\n            font-size: 15px;\n        }\n        \n        \/* Category Tree *\/\n        .category-tree {\n            background: #f5f5f5;\n            padding: 25px;\n            border-radius: 8px;\n            font-family: 'Courier New', monospace;\n            line-height: 2;\n            margin: 25px 0;\n            font-size: 16px;\n            overflow-x: auto;\n        }\n        \n        .category-tree ul {\n            list-style: none;\n            padding-left: 25px;\n        }\n        \n        .category-tree li {\n            margin: 8px 0;\n            white-space: nowrap;\n        }\n        \n        \/* FAQ Cards *\/\n        .faq-card {\n            background: #f9f9f9;\n            padding: 25px;\n            border-radius: 8px;\n            border: 1px solid #e0e0e0;\n            margin-bottom: 20px;\n        }\n        \n        .faq-card h4 {\n            color: #309dbe;\n            margin-top: 0;\n            margin-bottom: 10px;\n            font-size: 18px;\n        }\n        \n        .faq-card p {\n            margin: 0;\n        }\n        \n        .faq-card ul {\n            margin-top: 10px;\n            margin-left: 25px;\n        }\n        \n        \/* Footer *\/\n        .doc-footer {\n            text-align: center;\n            padding: 30px;\n            color: #666;\n            background: white;\n            border-radius: 10px;\n            margin-top: 30px;\n        }\n        \n        \/* Lists *\/\n        ul, ol {\n            margin-left: 25px;\n            margin-bottom: 20px;\n        }\n        \n        li {\n            margin-bottom: 8px;\n        }\n        \n        \/* Links *\/\n        a {\n            color: #309dbe;\n            text-decoration: none;\n        }\n        \n        a:hover {\n            text-decoration: underline;\n        }\n        \n        \/* Responsive *\/\n        @media (max-width: 768px) {\n            body1 {\n                padding: 0px;\n            }\n            \n            .doc-header h1 {\n                font-size: 32px;\n            }\n            \n            .doc-header .meta-info span {\n                display: block;\n                margin: 10px 0;\n            }\n            \n            .doc-nav ul {\n                flex-direction: column;\n                align-items: stretch;\n                gap: 10px;\n            }\n            \n            .doc-nav ul li a {\n                display: block;\n                text-align: center;\n            }\n            \n            .doc-section {\n                padding: 20px;\n            }\n            \n            .doc-section h2 {\n                font-size: 28px;\n            }\n            \n            .doc-section h3 {\n                font-size: 22px;\n            }\n            \n            .feature-table {\n                font-size: 14px;\n                display: block;\n                overflow-x: auto;\n            }\n            \n            .feature-table th,\n            .feature-table td {\n                padding: 10px;\n            }\n            \n            .requirements-list li strong {\n                display: block;\n                margin-bottom: 5px;\n            }\n            \n            .category-tree {\n                font-size: 14px;\n            }\n            \n            .step-list li {\n                padding-left: 50px;\n            }\n            \n            .step-list li:before {\n                width: 35px;\n                height: 35px;\n                font-size: 16px;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            .doc-header h1 {\n                font-size: 28px;\n            }\n            \n            .badge-preview {\n                justify-content: center;\n            }\n            \n            .badge-sample {\n                width: 100%;\n            }\n            \n            .feature-grid {\n                grid-template-columns: 1fr;\n            }\n        }<\/style>\n\n<body1>\n        <header class=\"doc-header\">\n            <h1>Woocommerce Sale Badge<\/h1>\n            <p class=\"version\">Version 4.0.0<\/p>\n            <div class=\"meta-info\">\n                <span>Last Updated: March 2026<\/span>\n                <span>Author: Gema75<\/span>\n                <span>Plugin Type: WooCommerce Extension<\/span>\n            <\/div>\n        <\/header>\n\n        <!-- Navigation -->\n        <nav class=\"doc-nav\">\n            <ul>\n                <li><a href=\"#introduction\">Introduction<\/a><\/li>\n                <li><a href=\"#features\">Features<\/a><\/li>\n                <li><a href=\"#installation\">Installation<\/a><\/li>\n                <li><a href=\"#getting-started\">Getting Started<\/a><\/li>\n                <li><a href=\"#badge-types\">Badge Types<\/a><\/li>\n                <li><a href=\"#dynamic-content\">Dynamic Content<\/a><\/li>\n                <li><a href=\"#scheduling\">Scheduling<\/a><\/li>\n                <li><a href=\"#settings\">Settings<\/a><\/li>\n                <li><a href=\"#faq\">FAQ<\/a><\/li>\n                <\/ul>\n        <\/nav>\n\n        <!-- Introduction -->\n        <section id=\"introduction\" class=\"doc-section\">\n            <h2>Introduction<\/h2>\n            <p>Woocommerce Sale Badge is a powerful and flexible sale badge system for WooCommerce that allows you to create and manage professional sale badges for your products. Create eye-catching &#8220;SALE&#8221; badges, dynamic discount badges showing percentages or amounts, and schedule them for specific promotions.<\/p>\n            \n            <div class=\"info-box\">\n                <strong>Perfect for:<\/strong>\n                <ul style=\"margin-top: 10px; margin-left: 20px;\">\n                    <li>Creating professional SALE badges for discounted products<\/li>\n                    <li>Dynamic badges showing exact discount percentages (e.g., &#8220;Save 20%&#8221;)<\/li>\n                    <li>Scheduling time-limited promotions<\/li>\n                    <li>Category-specific sale badges<\/li>\n                    <li>Variable product support with real-time badge switching<\/li>\n                <\/ul>\n            <\/div>\n\n            <h3>Requirements<\/h3>\n            <ul class=\"requirements-list\">\n                <li><strong>WordPress:<\/strong> 6.5 or higher<\/li>\n                <li><strong>WooCommerce:<\/strong> 5.0 or higher (tested up to 10.0.5)<\/li>\n                <li><strong>PHP:<\/strong> 7.4 or higher<\/li>\n            <\/ul>\n\n            <div class=\"warning-box\">\n                <strong>Important:<\/strong> This plugin requires WooCommerce to be installed and activated. It will not function without WooCommerce.\n            <\/div>\n        <\/section>\n\n        <!-- Features -->\n        <section id=\"features\" class=\"doc-section\">\n            <h2>Features<\/h2>\n            \n            <div class=\"feature-grid\">\n                <div class=\"feature-card\">\n                    <h4>Professional Sale Badges<\/h4>\n                    <ul>\n                        <li>Create unlimited sale badges<\/li>\n                        <li>Global or category-specific badges<\/li>\n                        <li>Visible on Individual product<\/li>\n                        <li>Visible on Single Variation<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Preset Library<\/h4>\n                    <ul>\n                        <li>18 professionally designed SVG badges<\/li>\n                        <li>Various &#8220;SALE&#8221; designs and styles<\/li>\n                        <li>Instant preview and selection<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Dynamic Content<\/h4>\n                    <ul>\n                        <li><code>{percentage}<\/code> &#8211; Show discount percentage<\/li>\n                        <li><code>{amount}<\/code> &#8211; Show discount amount<\/li>\n                        <li><code>{price}<\/code> &#8211; Show sale price<\/li>\n                        <li>Perfect for &#8220;Save 20%&#8221; style badges<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Badge Scheduling<\/h4>\n                    <ul>\n                        <li>Set start and end dates for promotions<\/li>\n                        <li>Automatic badge activation\/deactivation<\/li>\n                        <li>Expired badge options (hide or show &#8220;Expired&#8221;)<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Custom Design Options<\/h4>\n                    <ul>\n                        <li>Custom text and colors<\/li>\n                        <li>Adjustable padding and margins<\/li>\n                        <li>Border radius controls<\/li>\n                        <li>Opacity settings<\/li>\n                        <li>Custom image upload<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Live Preview<\/h4>\n                    <ul>\n                        <li>Real-time design updates<\/li>\n                        <li>Drag to position<\/li>\n                        <li>See changes instantly<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Variable Product Support<\/h4>\n                    <ul>\n                        <li>Real-time badge switching<\/li>\n                        <li>Shows highest discount by default<\/li>\n                        <li>Updates instantly on variation selection<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Performance Optimized<\/h4>\n                    <ul>\n                        <li>Built-in caching system<\/li>\n                        <li>Minimal database queries<\/li>\n                        <li>Optimized for block and classic themes<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n\n            <h3>Theme Compatibility<\/h3>\n            <p>The plugin automatically detects your theme type and uses the appropriate display method:<\/p>\n            <ul>\n                <li><strong>Classic Themes:<\/strong> Storefront, Astra, Flatsome, OceanWP, and all traditional WooCommerce themes<\/li>\n                <li><strong>Block Themes:<\/strong> Twenty Twenty-Four, Twenty Twenty-Five, and all FSE themes<\/li>\n            <\/ul>\n\n            \n            <h3>HPOS Compatibility<\/h3>\n            <p>Fully compatible with WooCommerce High-Performance Order Storage.<\/p>\n\n            <div class=\"tip-box\">\n                <strong>Pro Tip:<\/strong> The plugin automatically shows the highest discount for variable products in catalog views, and updates in real-time when customers select variations.\n            <\/div>\n\n        <\/section>\n\n        <!-- Installation -->\n        <section id=\"installation\" class=\"doc-section\">\n            <h2>Installation<\/h2>\n            \n            <h3>Standard Installation<\/h3>\n            <ol class=\"step-list\">\n                <li>Download the plugin ZIP file from CodeCanyon<\/li>\n                <li>Go to WordPress Admin \u2192 Plugins \u2192 Add New<\/li>\n                <li>Click &#8220;Upload Plugin&#8221; and select the downloaded ZIP file<\/li>\n                <li>Click &#8220;Install Now&#8221; and then &#8220;Activate&#8221;<\/li>\n                <li>The plugin will automatically check for WooCommerce<\/li>\n                <li>A new menu item &#8220;Sale Badges&#8221; will appear in your admin sidebar<\/li>\n            <\/ol>\n\n            <h3>FTP Installation<\/h3>\n            <ol class=\"step-list\">\n                <li>Extract the plugin ZIP file on your computer<\/li>\n                <li>Upload the <code>gema_woo_sale_badges<\/code> folder to <code>\/wp-content\/plugins\/<\/code><\/li>\n                <li>Go to WordPress Admin \u2192 Plugins<\/li>\n                <li>Find &#8220;Woocommerce Sale Badges&#8221; and click &#8220;Activate&#8221;<\/li>\n            <\/ol>\n\n            <div class=\"info-box\">\n                <strong>Note:<\/strong> After activation, the plugin creates a default settings structure. You can modify these settings anytime from the Display Settings page.\n            <\/div>\n        <\/section>\n\n        <!-- Getting Started -->\n        <section id=\"getting-started\" class=\"doc-section\">\n            <h2>Getting Started<\/h2>\n            \n            <h3>Quick Start Guide<\/h3>\n            <ol class=\"step-list\">\n                <li>\n                    <strong>Create Your First Sale Badge<\/strong>\n                    <p>Go to Sale Badges \u2192 Add New. Give your badge a title (e.g., &#8220;Summer Sale Badge&#8221;).<\/p>\n                <\/li>\n                <li>\n                    <strong>Choose Assignment Type<\/strong>\n                    <p>Select &#8220;Global&#8221; to show on all products, or &#8220;Specific Categories&#8221; to limit to certain categories.<\/p>\n                <\/li>\n                <li>\n                    <strong>Design Your Badge<\/strong>\n                    <p>Choose a preset image, upload a custom image, or create a text badge with custom colors and styling.<\/p>\n                <\/li>\n                <li>\n                    <strong>Configure Dynamic Content (Optional)<\/strong>\n                    <p>Enable dynamic content to show actual discount percentages or amounts (e.g., &#8220;Save 20%&#8221;).<\/p>\n                <\/li>\n                <li>\n                    <strong>Set Schedule (Optional)<\/strong>\n                    <p>Set start and end dates for time-limited promotions.<\/p>\n                <\/li>\n                <li>\n                    <strong>Publish Your Badge<\/strong>\n                    <p>Click Publish and the badge will automatically appear on applicable products.<\/p>\n                <\/li>\n            <\/ol>\n\n            <h3>Creating a Simple Sale Badge &#8211; Step by Step<\/h3>\n            <ol class=\"step-list\">\n                <li>Go to Sale Badges \u2192 Add New in your WordPress admin.<\/li>\n                <li>Enter a title for the badge (internal name, e.g., &#8220;Standard Sale Badge&#8221;).<\/li>\n                <li>In the Badge Assignment  section, choose:\n                    <ul style=\"margin-top:5px;\">\n                        <p> Global &#8211; Shows on all products  <\/p>\n                        <p> Specific Categories  &#8211; Shows only in selected categories <\/p>\n                    <\/ul>\n                <\/li>\n                <li>In the Badge Types section, choose &#8220;Use Custom Design&#8221; for a text badge.<\/li>\n                <li>Set your badge text (e.g., &#8220;SALE&#8221;), colors, padding, and border radius.<\/li>\n                <li>Adjust the badge position by dragging the live preview or entering top\/left values.<\/li>\n                <li>Click Publish to save your badge.<\/li>\n            <\/ol>\n            \n            <h3>Creating a Dynamic Discount Badge<\/h3>\n            <ol class=\"step-list\">\n                <li>Follow steps 1-3 above.<\/li>\n                <li>In the  Dynamic Content section, check &#8220;Enable dynamic content&#8221;.<\/li>\n                <li>Set your badge format using variables:\n                    <ul style=\"margin-top:5px;\">\n                        <p><strong><code>Save {percentage}<\/code> <\/strong>&#8211; shows &#8220;Save 20%&#8221;<\/p>\n                        <p><strong><code>Sale {percentage} OFF<\/code> <\/strong>&#8211; shows &#8220;Sale 20% OFF&#8221;<\/p>\n                        <p><strong><code>Only {price}<\/code> <\/strong>&#8211; shows &#8220;Only $39.99&#8221;<\/p>\n                    <\/ul>\n                <\/li>\n                <li>Complete the design and publish.<\/li>\n            <\/ol>\n            \n            <div class=\"note-box\">\n                <strong>Live preview: <\/strong> The preview area updates in real-time as you adjust colors, padding, and position. Drag the badge to position it visually.\n            <\/div>\n        <\/section>\n\n        <!-- Badge Types -->\n        <section id=\"badge-types\" class=\"doc-section\">\n            <h2>Badge Types &#038; Assignment<\/h2>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th>Assignment Type<\/th>\n                        <th>Description<\/th>\n                        <th>Use Case<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td><strong>Global<\/strong><\/td>\n                        <td>Shows on all products that are on sale<\/td>\n                        <td>One consistent sale badge for your entire store<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Specific Categories<\/strong><\/td>\n                        <td>Shows only on products in selected categories<\/td>\n                        <td>Different badges for different departments (e.g., &#8220;Clearance&#8221; for clothing, &#8220;Special Offer&#8221; for electronics)<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n\n            <h3>How Category Selection Works<\/h3>\n            <p>When you select &#8220;Specific Categories&#8221;, you can choose multiple categories. The badge will appear on any product that belongs to at least one of the selected categories.<\/p>\n            \n            <div class=\"category-tree\">\n                <strong>Example:<\/strong>\n                <ul>\n                    <li>\u2713 Clothing (selected) \u2013 Badge appears<\/li>\n                    <li>  \u251c\u2500\u2500 Men&#8217;s Clothing \u2013 Badge appears (inherits from parent)<\/li>\n                    <li>  \u2502   \u251c\u2500\u2500 Shirts \u2013 Badge appears<\/li>\n                    <li>  \u2502   \u2514\u2500\u2500 Pants \u2013 Badge appears<\/li>\n                    <li>  \u2514\u2500\u2500 Women&#8217;s Clothing \u2013 Badge appears<\/li>\n                    <li>\u2717 Electronics (not selected) \u2013 No badge<\/li>\n                    <li>  \u2514\u2500\u2500 Phones \u2013 No badge<\/li>\n                <\/ul>\n            <\/div>\n            \n            <p><strong>Note:<\/strong> Category hierarchy is respected automatically. Selecting a parent category applies the badge to all child categories.<\/p>\n        <\/section>\n\n        <!-- Dynamic Content -->\n        <section id=\"dynamic-content\" class=\"doc-section\">\n            <h2>Dynamic Content<\/h2>\n            \n            <p>Dynamic content allows you to create badges that show actual discount information based on the product&#8217;s sale price. This is perfect for creating badges like &#8220;Save 20%&#8221; or &#8220;-$10 OFF&#8221;.<\/p>\n            \n            <div class=\"info-box\">\n                <strong>How it works:<\/strong> When dynamic content is enabled, the plugin replaces variables in your badge text with the actual values from the product.\n            <\/div>\n            \n            <h3>Available Variables<\/h3>\n            \n            <div class=\"variable-grid\">\n                <div class=\"variable-card\">\n                    <code>{percentage}<\/code>\n                    <p>Shows the discount percentage (e.g., 20%)<\/p>\n                <\/div>\n                \n                <div class=\"variable-card\">\n                    <code>{amount}<\/code>\n                    <p>Shows the discount amount (e.g., $10)<\/p>\n                <\/div>\n                \n                <div class=\"variable-card\">\n                    <code>{price}<\/code>\n                    <p>Shows the sale price (e.g., $39.99)<\/p>\n                <\/div>\n            <\/div>\n            \n            <h3>Format Examples<\/h3>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th>Format<\/th>\n                        <th>Result (20% off $50 \u2192 $40)<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td><code>Save {percentage}<\/code><\/td>\n                        <td>Save 20%<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><code>-{percentage} OFF<\/code><\/td>\n                        <td>-20% OFF<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><code>Save {amount}<\/code><\/td>\n                        <td>Save $10<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><code>Only {price}<\/code><\/td>\n                        <td>Only $40<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><code>{percentage}% OFF ({amount} off)<\/code><\/td>\n                        <td>20% OFF ($10 off)<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n            \n            <h3>Variable Products<\/h3>\n            <p>For variable products:<\/p>\n            <ul>\n                <li><strong>Catalog\/Shop Pages:<\/strong> Shows the highest discount available across all variations<\/li>\n                <li><strong>Single Product Page:<\/strong> Updates in real-time as customers select variations<\/li>\n            <\/ul>\n            \n            <div class=\"tip-box\">\n                <strong>Pro Tip:<\/strong> Use <code>{percentage}<\/code> for percentage-based stores, or <code>{amount}<\/code> for stores showing exact savings. You can combine them for maximum impact!\n            <\/div>\n        <\/section>\n\n        <!-- Scheduling -->\n        <section id=\"scheduling\" class=\"doc-section\">\n            <h2>Badge Scheduling<\/h2>\n            \n            <p>Schedule your sale badge to automatically appear and disappear based on dates. Perfect for time-limited promotions, seasonal sales, and flash deals.<\/p>\n            \n            <h3>Schedule Options<\/h3>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th>Setting<\/th>\n                        <th>Description<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td><strong>Start Date<\/strong><\/td>\n                        <td>Badge will not appear before this date (leave empty for no start date)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>End Date<\/strong><\/td>\n                        <td>Badge will expire after this date (leave empty for no end date)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Expiry Behavior<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin:0;\">\n                                <li><strong>Hide badge completely<\/strong> &#8211; Badge disappears after end date<\/li>\n                                <li><strong>Show &#8220;Expired&#8221; text<\/strong> &#8211; Shows an &#8220;Expired&#8221; badge (configurable text)<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n            \n            <h3>Schedule Examples<\/h3>\n            \n            <div class=\"feature-card\" style=\"margin-bottom:15px;\">\n                <h4>Black Friday Sale<\/h4>\n                <p><strong>Start:<\/strong> November 24, 2024<br>\n                <strong>End:<\/strong> November 27, 2024<br>\n                <strong>Result:<\/strong> Badge only appears during Black Friday weekend<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom:15px;\">\n                <h4>Summer Clearance with Expiry Message<\/h4>\n                <p><strong>Start:<\/strong> June 1, 2024<br>\n                <strong>End:<\/strong> August 31, 2024<br>\n                <strong>Expiry Behavior:<\/strong> Show &#8220;Expired&#8221; text with custom message &#8220;Sale Ended&#8221;<br>\n                <strong>Result:<\/strong> Shows sale badge during summer, then shows &#8220;Sale Ended&#8221; badge afterward<\/p>\n            <\/div>\n            \n            <div class=\"warning-box\">\n                <strong>Important:<\/strong> Scheduling uses your WordPress site&#8217;s timezone settings (Settings \u2192 General \u2192 Timezone). Make sure your timezone is set correctly.\n            <\/div>\n        <\/section>\n\n        <!-- Settings -->\n        <section id=\"settings\" class=\"doc-section\">\n            <h2>Display Settings<\/h2>\n            \n            <p>Access via Sale Badge \u2192 Display Settings<\/p>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th>Setting<\/th>\n                        <th>Options<\/th>\n                        <th>Description<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td>Display in Catalog View<\/td>\n                        <td>Yes\/No<\/td>\n                        <td>Show sale badges on shop, category, and archive pages<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Display in Single Product View<\/td>\n                        <td>Yes\/No<\/td>\n                        <td>Show sale badges on individual product pages<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n\n            <h3>Badge Creation Settings<\/h3>\n            <p>When creating\/editing a badge, you&#8217;ll find these options:<\/p>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th>Field<\/th>\n                        <th>Description<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td>Badge Assignment<\/td>\n                        <td>Global (all products) or Specific Categories<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Schedule Badge<\/td>\n                        <td>Enable date scheduling with start\/end dates and expiry behavior<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Dynamic Content<\/td>\n                        <td>Enable and set format with {percentage}, {amount}, {price} variables<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Badge Types<\/td>\n                        <td>Use Custom Design or Use Preset Image<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Preset Images<\/td>\n                        <td>Choose from 18 professionally designed SVG sale badges<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Text Color<\/td>\n                        <td>Customize text color<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Background Color<\/td>\n                        <td>Customize background color (default: #309dbe)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Badge Text<\/td>\n                        <td>Custom text (e.g., &#8220;SALE&#8221;, &#8220;HOT&#8221;, &#8220;CLEARANCE&#8221;)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Padding<\/td>\n                        <td>Top, Bottom, Left, Right padding in pixels<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Border Radius<\/td>\n                        <td>Individual corner radius settings<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Position<\/td>\n                        <td>Top and Left position (draggable preview)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Opacity<\/td>\n                        <td>0-10 opacity setting<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Custom Image<\/td>\n                        <td>Upload your own badge image<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/section>\n\n        <!-- FAQ -->\n        <section id=\"faq\" class=\"doc-section\">\n            <h2>Frequently Asked Questions<\/h2>\n            \n            <h3>General Questions<\/h3>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: How many badges can I create?<\/h4>\n                <p><strong>A:<\/strong> Unlimited! Create as many sale badges as you need for different categories, promotions, or seasons.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Can I use my own images for badges?<\/h4>\n                <p><strong>A:<\/strong> Absolutely! You can upload any image (JPG, PNG, GIF, SVG) from your media library, or choose from our 33+ preset SVG badges.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Will this work with my theme?<\/h4>\n                <p><strong>A:<\/strong> Yes! The plugin automatically detects whether you&#8217;re using a classic or block theme and loads the appropriate display methods. It works with Storefront, Astra, Flatsome, Twenty Twenty-Four, and all popular WooCommerce themes.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Will this slow down my site?<\/h4>\n                <p><strong>A:<\/strong> No \u2013 the plugin is optimized with caching, minified assets, and conditional loading. It only loads scripts and styles where needed, ensuring minimal performance impact.<\/p>\n            <\/div>\n            \n            <h3>Dynamic Content Questions<\/h3>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Can I create a badge that shows &#8220;Save 20%&#8221; automatically?<\/h4>\n                <p><strong>A:<\/strong> Yes! Enable dynamic content and use the format <code>Save {percentage}<\/code>. The plugin will automatically calculate and display the actual discount percentage.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: How does dynamic content work with variable products?<\/h4>\n                <p><strong>A:<\/strong> In catalog views, it shows the highest discount available. On single product pages, it updates in real-time as customers select variations.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Can I combine text with variables?<\/h4>\n                <p><strong>A:<\/strong> Yes! For example: <code>Limited Time: Save {percentage}!<\/code> becomes &#8220;Limited Time: Save 20%!&#8221;<\/p>\n            <\/div>\n            \n            <h3>Scheduling Questions<\/h3>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Can I schedule badges for Black Friday?<\/h4>\n                <p><strong>A:<\/strong> Yes! Set a start date for Black Friday and an end date for Cyber Monday. The badge will automatically appear and disappear on those dates.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: What happens when a badge expires?<\/h4>\n                <p><strong>A:<\/strong> You have two options: hide the badge completely, or show an &#8220;Expired&#8221; badge (with customizable text like &#8220;Sale Ended&#8221;).<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Can I have overlapping schedules?<\/h4>\n                <p><strong>A:<\/strong> Yes, but only one badge shows per product. The badge with active schedule will display. Multiple badges on the same product aren&#8217;t supported to maintain a clean design.<\/p>\n            <\/div>\n            \n            <h3>Variable Product Questions<\/h3>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: How do variable product badges work?<\/h4>\n                <p><strong>A:<\/strong> In catalog\/shop pages, the badge shows the highest discount available. On single product pages, the badge updates instantly when customers select different variations.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Can I assign different badges to different variations?<\/h4>\n                <p><strong>A:<\/strong> Currently, the plugin shows one badge per product based on assignment rules. For variation-specific badges, you would need to create different products.<\/p>\n            <\/div>\n            \n            <h3>Troubleshooting<\/h3>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th>Issue<\/th>\n                        <th>Solution<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td><strong>Badge Not Showing<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Verify badge is published (not draft)<\/li>\n                                <li>Check display settings are enabled<\/li>\n                                <li>Verify product is IN STOCK and ON SALE<\/li>\n                                <li>Check if badge is scheduled (maybe outside active dates)<\/li>\n                                <li>Clear any caching plugins<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Dynamic Content Not Working<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Verify product has valid sale price<\/li>\n                                <li>Check format syntax (use correct curly braces)<\/li>\n                                <li>For variable products, ensure variations have sale prices<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Scheduled Badge Not Appearing<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Check your WordPress timezone settings<\/li>\n                                <li>Verify current date is between start and end dates<\/li>\n                                <li>If using expiry text, check expiry behavior setting<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Variable Badge Not Updating<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Ensure variations are saved with sale prices<\/li>\n                                <li>Check browser console for JavaScript errors<\/li>\n                                <li>Clear any caching plugins<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/section>\n\n      <!-- Support -->\n        <section id=\"support\" class=\"doc-section\">\n            <h2>Support<\/h2>\n            \n            <div class=\"info-box\">\n                <p><strong>For support, please contact us through CodeCanyon:<\/strong><\/p>\n                <ul style=\"margin-left: 20px; margin-top: 10px;\">\n                    <li>Author: Gema75<\/li>\n                    <li>CodeCanyon Profile: <a href=\"https:\/\/codecanyon.net\/user\/gema75\" target=\"_blank\">https:\/\/codecanyon.net\/user\/gema75<\/a><\/li>\n                <\/ul>\n            <\/div>\n            \n            <div class=\"warning-box\">\n                <strong>Before contacting support:<\/strong>\n                <ul style=\"margin-left: 20px; margin-top: 10px;\">\n                    <li>Check that you meet all system requirements<\/li>\n                    <li>Ensure WooCommerce is active and up to date<\/li>\n                    <li>Verify your products are in stock and on sale<\/li>\n                    <li>Try disabling other plugins to test for conflicts<\/li>\n                    <li>Check your PHP error logs for clues<\/li>\n                <\/ul>\n            <\/div>\n        <\/section>\n\n        <!-- Footer -->\n        <footer style=\"text-align: center; padding: 20px; color: #666;\">\n            <p>Woocommerce Sale Badge v4.0.0 | Documentation by Gema75 \u00a9 2026<\/p>\n        <\/footer>\n    <\/div>\n<\/body1>\n","protected":false},"excerpt":{"rendered":"<p>Woocommerce Sale Badge Version 4.0.0 Last Updated: March 2026 Author: Gema75 Plugin Type: WooCommerce Extension Introduction Features Installation Getting Started Badge Types Dynamic Content Scheduling Settings FAQ Introduction Woocommerce Sale Badge is a powerful and flexible sale badge system for WooCommerce that allows you to create and manage professional sale badges for your products. Create&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1436,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-no-sidebar.php","meta":{"footnotes":""},"class_list":["post-1640","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/comments?post=1640"}],"version-history":[{"count":55,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1640\/revisions"}],"predecessor-version":[{"id":1869,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1640\/revisions\/1869"}],"up":[{"embeddable":true,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1436"}],"wp:attachment":[{"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/media?parent=1640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}