{"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-11T16:53:23","modified_gmt":"2026-03-11T16:53:23","slug":"documentation","status":"publish","type":"page","link":"https:\/\/gema75.com\/woocommerce-badge-management\/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, #667eea 0%, #764ba2 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: 10px;\n            margin-left: 5px;\n            justify-content: center;\n            padding-inline-start: 0px;\n        }\n        \n        .doc-nav ul li a {\n            color: #667eea;\n            text-decoration: none;\n            font-weight: 500;\n            padding: 8px 10px;\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: #667eea;\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 #667eea;\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 #667eea;\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: #667eea;\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 #667eea;\n            font-size: 16px;\n        }\n        \n        .requirements-list li strong {\n            color: #667eea;\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: #667eea;\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: #667eea;\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;\n            border-radius: 8px;\n            border: 1px solid #e0e0e0;\n        }\n        \n        .feature-card h4 {\n            color: #667eea;\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: 20px;\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: #667eea;\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: #667eea;\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<body1>\n <div class=\"doc-container\">\n        <!-- Header -->\n        <header class=\"doc-header\">\n            <h1>WooCommerce Products Badge Management<\/h1>\n            <p class=\"version\">Version 6.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=\"#settings\">Settings<\/a><\/li>\n                <li><a href=\"#faq\">FAQ<\/a><\/li>\n                <li><a href=\"#changelog\">Changelog<\/a><\/li>\n                <li><a href=\"#support\">Support<\/a><\/li>\n            <\/ul>\n        <\/nav>\n\n        <!-- Introduction (with Requirements) -->\n        <section id=\"introduction\" class=\"doc-section\">\n            <h2>Introduction<\/h2>\n            <p>WooCommerce Products Badge Management is a powerful and flexible badge system for WooCommerce that allows you to create and manage custom badges for your products. Whether you need &#8220;New Arrival&#8221; badges, category-specific badges, or custom product badges, this plugin provides an intuitive interface with live preview and extensive customization options.<\/p>\n            \n            <div class=\"info-box\">\n                <strong>Perfect for:<\/strong>\n                <ul style=\"margin-top: 10px;\">\n                    <li>Highlighting new products<\/li>\n                    <li>Creating category-specific promotions<\/li>\n                    <li>Adding custom badges to individual products<\/li>\n                    <li>Managing variation-specific badges<\/li>\n                    <li>Building brand consistency with custom designs<\/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 (with Advanced Features merged) -->\n        <section id=\"features\" class=\"doc-section\">\n            <h2>Features<\/h2>\n            \n            <div class=\"feature-grid\">\n                <div class=\"feature-card\">\n                    <h4>Multiple Badge Types<\/h4>\n                    <ul>\n                        <li>New Arrival badges with configurable days<\/li>\n                        <li>Category-specific badges<\/li>\n                        <li>Individual product badges<\/li>\n                        <li>Variation-specific badges<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Preset Library<\/h4>\n                    <ul>\n                        <li>33+ professionally designed SVG badges<\/li>\n                        <li>Organized by badge type<\/li>\n                        <li>Instant preview and selection<\/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>Smart Priority System<\/h4>\n                    <ul>\n                        <li>Variation badges (highest)<\/li>\n                        <li>New arrival badges<\/li>\n                        <li>Product-specific badges<\/li>\n                        <li>Category badges<\/li>\n                        <li>Global badges (lowest)<\/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 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 &#038; Block Themes<\/strong> &#8211; Full support for both traditional and FSE themes including Twenty Twenty-Four, Twenty Twenty-Five, Storefront, Astra, Flatsome, and all popular WooCommerce themes<\/li>\n            <\/ul>\n\n            <h3>Caching System<\/h3>\n            <ul>\n                <li>Product-specific badge caching (1 hour expiration)<\/li>\n                <li>Automatic cache clearing on badge updates<\/li>\n                <li>Parent product cache clearing when variations change<\/li>\n                <li>Category-based cache invalidation<\/li>\n            <\/ul>\n\n            <h3>Variation Switching<\/h3>\n            <p>For variable products, badges update in real-time as customers select different variations, showing variation-specific badges when assigned.<\/p>\n\n            <div class=\"tip-box\">\n                <strong>Pro Tip:<\/strong> The plugin automatically detects your theme type (classic or block) and loads the appropriate display methods for optimal performance.\n            <\/div>\n\n            <h3>Badge Previews<\/h3>\n            <div class=\"badge-preview\">\n                <div class=\"badge-sample badge-new\">NEW ARRIVAL<\/div>\n                <div class=\"badge-sample badge-instock\">IN STOCK<\/div>\n                <div class=\"badge-sample badge-product\">SALE<\/div>\n                <div class=\"badge-sample badge-variation\">VARIATION<\/div>\n            <\/div>\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>\n                    <strong>Download the Plugin<\/strong>\n                    <p>Download the plugin ZIP file from CodeCanyon<\/p>\n                <\/li>\n                <li>\n                    <strong>Upload to WordPress<\/strong>\n                    <p>Go to WordPress Admin \u2192 Plugins \u2192 Add New \u2192 Click &#8220;Upload Plugin&#8221; and select the downloaded ZIP file<\/p>\n                <\/li>\n                <li>\n                    <strong>Install and Activate<\/strong>\n                    <p>Click &#8220;Install Now&#8221; and then &#8220;Activate&#8221;<\/p>\n                <\/li>\n                <li>\n                    <strong>Automatic Check<\/strong>\n                    <p>The plugin will automatically check for WooCommerce<\/p>\n                <\/li>\n                <li>\n                    <strong>Access the Plugin<\/strong>\n                    <p>A new menu item &#8220;Product Badges&#8221; will appear in your admin sidebar<\/p>\n                <\/li>\n            <\/ol>\n\n            <h3>FTP Installation<\/h3>\n            <ol class=\"step-list\">\n                <li>\n                    <strong>Extract Files<\/strong>\n                    <p>Extract the plugin ZIP file on your computer<\/p>\n                <\/li>\n                <li>\n                    <strong>Upload via FTP<\/strong>\n                    <p>Upload the <code>woocommerce-badges-management<\/code> folder to <code>\/wp-content\/plugins\/<\/code><\/p>\n                <\/li>\n                <li>\n                    <strong>Activate<\/strong>\n                    <p>Go to WordPress Admin \u2192 Plugins \u2192 Find &#8220;WooCommerce Badges Management&#8221; and click &#8220;Activate&#8221;<\/p>\n                <\/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 (combined with Creating and Customizing Badges) -->\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 Badge<\/strong>\n                    <p>Go to Product Badges \u2192 Add New. Give your badge a title and configure its settings.<\/p>\n                <\/li>\n                <li>\n                    <strong>Choose Badge Type<\/strong>\n                    <p>Select from New Arrival, Category Badge, or Product Badge based on your needs.<\/p>\n                <\/li>\n                <li>\n                    <strong>Design Your Badge<\/strong>\n                    <p>Use preset images or customize colors, text, padding, and position with live preview.<\/p>\n                <\/li>\n                <li>\n                    <strong>Configure Display Settings<\/strong>\n                    <p>Go to Product Badges \u2192 Display Settings to control where badges appear.<\/p>\n                <\/li>\n                <li>\n                    <strong>Assign Badges<\/strong>\n                    <p>For product badges: Edit a product and select your badge in the &#8220;Product Badge&#8221; meta box.<\/p>\n                <\/li>\n            <\/ol>\n\n            <h3>Creating and Customizing Badges &#8211; Step by Step<\/h3>\n            <ol class=\"step-list\">\n                <li>\n                    <strong>Start Creating<\/strong>\n                    <p>Go to > Product Badges \u2192 Add New > in your WordPress admin.<\/p>\n                <\/li>\n                <li>\n                    <strong>Enter a Title<\/strong>\n                    <p>Enter a title for the badge (internal name, e.g., &#8220;Seasonal New Arrival&#8221;).<\/p>\n                <\/li>\n                <li>\n                    <strong>Select Badge Type<\/strong>\n                    <p>Select the Badge Type  \u2013 New Arrival, Category Badge, or Product Badge.<\/p>\n                <\/li>\n                <li>\n                    <strong>Configure Assignment<\/strong>\n                    <p>For Category Badges, choose assignment: Global (all products) or Specific Categories (select categories).<\/p>\n                <\/li>\n                <li>\n                    <strong>Set New Arrival Days<\/strong>\n                    <p>For New Arrival badges, set the number of days a product is considered &#8220;new&#8221; (default 7).<\/p>\n                <\/li>\n                <li>\n                    <strong>Choose Badge Style<\/strong>\n                    <p>Choose between a preset image, a custom uploaded image, or a text badge.<\/p>\n                <\/li>\n                <li>\n                    <strong>Customize Text Badge<\/strong>\n                    <p>If using a text badge , customize the text, colors, padding, border radius, and opacity.<\/p>\n                <\/li>\n                <li>\n                    <strong>Adjust Position<\/strong>\n                    <p>Adjust the badge position by dragging the live preview or entering top\/left margin values.<\/p>\n                <\/li>\n                <li>\n                    <strong>Publish<\/strong>\n                    <p>Click Publish to save your badge.<\/p>\n                <\/li>\n            <\/ol>\n            \n            <h3>Configuration Notes Per Type<\/h3>\n            <ul>\n                <li><strong>New Arrival badges:<\/strong> Only the &#8220;New Arrival Days&#8221; field is configurable \u2013 no category assignment needed.<\/li>\n                <li><strong>Category Badges:<\/strong> Can be global or category-specific. Category hierarchy is respected automatically.<\/li>\n                <li><strong>Product Badges:<\/strong> No assignment options \u2013 these are meant to be assigned directly to products\/variations.<\/li>\n            <\/ul>\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<\/h2>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th>Badge Type<\/th>\n                        <th>Description<\/th>\n                        <th>Assignment Method<\/th>\n                        <th>Priority<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td><strong>New Arrival<\/strong><\/td>\n                        <td>Shows on products added within X days<\/td>\n                        <td>Automatic based on post date<\/td>\n                        <td>High (1st after variations)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Category Badge<\/strong><\/td>\n                        <td>Shows on all products in selected categories<\/td>\n                        <td>Category selection<\/td>\n                        <td>Medium (4th)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Product Badge<\/strong><\/td>\n                        <td>Manually assigned to specific products<\/td>\n                        <td>Product edit page selection<\/td>\n                        <td>High (2nd)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Variation Badge<\/strong><\/td>\n                        <td>Specific to product variations<\/td>\n                        <td>Variation settings<\/td>\n                        <td>Highest (overrides all)<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n\n            <h3>Priority System Explained<\/h3>\n            <div class=\"info-box\">\n                <p>The plugin uses a smart priority system to determine which badge to show when multiple apply:<\/p>\n                <ol style=\"margin-left: 20px;\">\n                    <li><strong>Variation Badge<\/strong> &#8211; Highest priority, overrides all others<\/li>\n                    <li><strong>New Arrival<\/strong> &#8211; Shows if product is within new days threshold<\/li>\n                    <li><strong>Product Badge<\/strong> &#8211; Manually assigned to specific product<\/li>\n                    <li><strong>Category Badge<\/strong> &#8211; Based on product categories<\/li>\n                    <li><strong>Global Badge<\/strong> &#8211; Lowest priority, shows if nothing else matches<\/li>\n                <\/ol>\n                <p>Only ONE badge is shown at a time &#8211; the highest priority that applies.<\/p>\n            <\/div>\n\n            <h3>How Category Hierarchy Priority Works<\/h3>\n            <p>The plugin automatically calculates category depth. Deeper (more specific) categories have higher priority:<\/p>\n            \n            <div class=\"category-tree\">\n                <ul>\n                    <li><strong>Clothing<\/strong> (depth 0, parent category) \u2013 lowest priority<\/li>\n                    <li><strong>\u251c\u2500\u2500 Men&#8217;s Clothing<\/strong> (depth 1) \u2013 medium priority<\/li>\n                    <li><strong>\u2502   \u251c\u2500\u2500 Shirts<\/strong> (depth 2) \u2013 highest priority<\/li>\n                    <li><strong>\u2502   \u2514\u2500\u2500 Pants<\/strong> (depth 2) \u2013 highest priority<\/li>\n                    <li><strong>\u2514\u2500\u2500 Women&#8217;s Clothing<\/strong> (depth 1) \u2013 medium priority<\/li>\n                <\/ul>\n            <\/div>\n            \n            <p>If a product belongs to multiple categories with the same depth, the numeric priority setting (1-10) determines which badge wins.<\/p>\n        <\/section>\n\n        <!-- Settings -->\n        <section id=\"settings\" class=\"doc-section\">\n            <h2>Settings<\/h2>\n            \n            <h3>Display Settings<\/h3>\n            <p>Access via Product Badges \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 badges on shop and category pages<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Display in Single Product View<\/td>\n                        <td>Yes\/No<\/td>\n                        <td>Show badges on individual product pages<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Display on Related Products<\/td>\n                        <td>Yes\/No<\/td>\n                        <td>Show badges on related, upsells, and cross-sells<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Data Retention<\/td>\n                        <td>Keep\/Delete<\/td>\n                        <td>Choose whether to keep data when uninstalling<\/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 Type<\/td>\n                        <td>New Arrival, Category Badge, or Product Badge<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Assignment<\/td>\n                        <td>Global (all products) or Specific Categories<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Category Priority<\/td>\n                        <td>1-10 priority for category badges (1 = highest)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Preset Images<\/td>\n                        <td>Choose from 33+ SVG 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<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Badge Text<\/td>\n                        <td>Custom text (e.g., &#8220;NEW&#8221;, &#8220;SALE&#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=\"faq-card\">\n                <h4>Q: Can I show more than one badge at a time?<\/h4>\n                <p><strong>A:<\/strong> No, the plugin is designed to show a single, most relevant badge per product to avoid visual clutter and maintain a clean design.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\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=\"faq-card\">\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 (including FSE themes like Twenty Twenty-Four) and loads the appropriate display methods. It works with all popular WooCommerce themes.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: How many badges can I create?<\/h4>\n                <p><strong>A:<\/strong> Unlimited! Create as many badges as you need for new arrivals, categories, products, and variations.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\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>Badge Assignment Questions<\/h3>\n            \n            <div class=\"faq-card\">\n                <h4>Q: How do I make a badge appear only on certain categories?<\/h4>\n                <p><strong>A:<\/strong> Create a Category Badge and select &#8220;Specific Categories&#8221; in the assignment section. Choose the categories where it should appear from the hierarchical category selector.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: How do I assign a badge to a specific variation?<\/h4>\n                <p><strong>A:<\/strong> Edit the variable product, expand the variation (in the Variations tab), and look for the &#8220;Variation Badge&#8221; section. Select a badge from the dropdown and save the variation.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: How does category hierarchy priority work?<\/h4>\n                <p><strong>A:<\/strong> The plugin automatically calculates category depth. If a product is in &#8220;Clothing \u2192 Men&#8217;s \u2192 Shirts&#8221;, a badge assigned to &#8220;Shirts&#8221; will win over one assigned to &#8220;Men&#8217;s&#8221; or &#8220;Clothing&#8221;. You can also set numeric priorities (1-10) for category badges.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: How do &#8220;New Arrival&#8221; badges work?<\/h4>\n                <p><strong>A:<\/strong> They&#8217;re based on the product&#8217;s post date. You can configure how many days a product is considered &#8220;new&#8221; (1-90 days) in the badge settings.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: Can I make a &#8220;SALE&#8221; badge?<\/h4>\n                <p><strong>A:<\/strong> Yes! Create a Product Badge with &#8220;SALE&#8221; text, customize its colors, or use one of the included preset images that say &#8220;SALE&#8221;, &#8220;PROMO&#8221;, or &#8220;REDUCED&#8221;.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: Can badges have different positions per product?<\/h4>\n                <p><strong>A:<\/strong> Yes! Use product-level badges with custom positions for each product. The position is saved with the product and overrides the default badge position.<\/p>\n            <\/div>\n            \n            <h3>Priority &#038; Display Questions<\/h3>\n            \n            <div class=\"faq-card\">\n                <h4>Q: Why is my product showing a Category Badge when I assigned a Product Badge?<\/h4>\n                <p><strong>A:<\/strong> Check if you checked the &#8220;Override all category badges&#8221; option when assigning the product badge. If not checked, the priority system determines which badge shows. Also verify if a Variation Badge or New Arrival badge has higher priority.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: How do I control which badge shows first?<\/h4>\n                <p><strong>A:<\/strong> The plugin uses a fixed priority order: Variation Badge (highest) \u2192 New Arrival \u2192 Product Badge \u2192 Category Badge \u2192 Global Badge (lowest). For category badges, you can set numeric priorities (1-10) to control which wins when a product belongs to multiple categories.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: Why isn&#8217;t my badge showing?<\/h4>\n                <p><strong>A:<\/strong> Check these common issues:\n                    <ul>\n                        <li>\u2713 Badge is published (not in draft status)<\/li>\n                        <li>\u2713 Display settings are enabled (Catalog, Single Product, or Related)<\/li>\n                        <li>\u2713 Product meets badge conditions (e.g., new products for NEW badges)<\/li>\n                        <li>\u2713 No higher priority badge is showing instead<\/li>\n                        <li>\u2713 Clear any caching plugins if recently updated<\/li>\n                    <\/ul>\n                <\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: My variation badges aren&#8217;t showing. What should I check?<\/h4>\n                <p><strong>A:<\/strong> Ensure you&#8217;ve saved the variation after selecting a badge. Also check that no higher-priority badge (like a product badge) is showing instead. The badge should update instantly when selecting variations on the frontend.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: Will badges show on related products, upsells, and cross-sells?<\/h4>\n                <p><strong>A:<\/strong> Yes, if enabled in Display Settings \u2192 &#8220;Display on Related Products&#8221;. The plugin loads badges via AJAX to maintain performance while ensuring they appear correctly.<\/p>\n            <\/div>\n            \n            <h3>Technical Questions<\/h3>\n            \n            <div class=\"faq-card\">\n                <h4>Q: Does it work with HPOS (High-Performance Order Storage)?<\/h4>\n                <p><strong>A:<\/strong> Yes, the plugin is fully compatible and declared with WooCommerce HPOS.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: Can I translate the plugin?<\/h4>\n                <p><strong>A:<\/strong> Yes! The plugin is fully translatable. A .pot file is included in the \/languages folder for easy translation.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: Will it work with caching plugins?<\/h4>\n                <p><strong>A:<\/strong> Yes, the plugin is compatible with popular caching plugins like W3 Total Cache, WP Rocket, LiteSpeed Cache, and others. It includes built-in cache clearing on badge updates.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: What happens to my data if I uninstall?<\/h4>\n                <p><strong>A:<\/strong> You can choose to keep or delete all badge data via the Display Settings \u2192 Uninstall Settings section. This includes badges, assignments, and settings.<\/p>\n            <\/div>\n            \n            <div class=\"faq-card\">\n                <h4>Q: Does it work with page builders like Elementor or Divi?<\/h4>\n                <p><strong>A:<\/strong> Yes, the plugin works with all major page builders as it uses standard WooCommerce hooks and filters that page builders respect.<\/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>Clear any caching plugins<\/li>\n                                <li>Check if another badge has higher priority<\/li>\n                                <li>Verify product meets badge conditions<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Wrong Badge Showing<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Review priority order (Variation \u2192 New \u2192 Product \u2192 Category \u2192 Global)<\/li>\n                                <li>Check category assignments<\/li>\n                                <li>Verify no variation badge is overriding<\/li>\n                                <li>Check &#8220;Override categories&#8221; checkbox on products<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Design Not Updating<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Clear browser cache<\/li>\n                                <li>Clear WordPress cache<\/li>\n                                <li>Check if using custom image (styling doesn&#8217;t apply to images)<\/li>\n                                <li>Verify CSS is not being overridden by theme<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Variation Badge Not Updating<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Ensure variation was saved after selection<\/li>\n                                <li>Check parent product cache cleared<\/li>\n                                <li>Verify badge is published<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Badge Position Wrong<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Check if product has custom position saved<\/li>\n                                <li>Verify the product image container has position:relative<\/li>\n                                <li>Theme CSS might be interfering<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n        <\/section>\n\n        <!-- Changelog -->\n        <section id=\"changelog\" class=\"doc-section\">\n            <h2>Changelog<\/h2>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Version 6.0.0 (March 2026)<\/h4>\n                <ul>\n                    <li>Complete code overhaul with modern PHP practices<\/li>\n                    <li>Added 30+ new preset badge designs<\/li>\n                    <li>Optimized performance with improved caching<\/li>\n                    <li>Enhanced block theme compatibility<\/li>\n                    <li>Improved variation badge switching<\/li>\n                    <li>Added responsive design support<\/li>\n                    <li>Enhanced security and sanitization<\/li>\n                    <li>Fixed various minor bugs and issues<\/li>\n                <\/ul>\n            <\/div>\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-top: 10px;\">\n                    <li>Author: Gema75<\/li>\n                    <li>CodeCanyon Profile: <a href=\"http:\/\/codecanyon.net\/user\/Gema75\" target=\"_blank\">http:\/\/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-top: 10px;\">\n                    <li>Check that you meet all system requirements<\/li>\n                    <li>Ensure WooCommerce is active<\/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 class=\"doc-footer\">\n            <p>WooCommerce Products Badge Management v6.0.0 | Documentation by Gema75 \u00a9 2026<\/p>\n       <\/footer>\n    <\/div>\n<\/body1>\n","protected":false},"excerpt":{"rendered":"<p>WooCommerce Products Badge Management Version 6.0.0 Last Updated: March 2026 Author: Gema75 Plugin Type: WooCommerce Extension Introduction Features Installation Getting Started Badge Types Settings FAQ Changelog Support Introduction WooCommerce Products Badge Management is a powerful and flexible badge system for WooCommerce that allows you to create and manage custom badges for your products. Whether you&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"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-badge-management\/wp-json\/wp\/v2\/pages\/1640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gema75.com\/woocommerce-badge-management\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gema75.com\/woocommerce-badge-management\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gema75.com\/woocommerce-badge-management\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gema75.com\/woocommerce-badge-management\/wp-json\/wp\/v2\/comments?post=1640"}],"version-history":[{"count":38,"href":"https:\/\/gema75.com\/woocommerce-badge-management\/wp-json\/wp\/v2\/pages\/1640\/revisions"}],"predecessor-version":[{"id":1717,"href":"https:\/\/gema75.com\/woocommerce-badge-management\/wp-json\/wp\/v2\/pages\/1640\/revisions\/1717"}],"wp:attachment":[{"href":"https:\/\/gema75.com\/woocommerce-badge-management\/wp-json\/wp\/v2\/media?parent=1640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}