{"id":1917,"date":"2026-03-23T17:45:27","date_gmt":"2026-03-23T17:45:27","guid":{"rendered":"https:\/\/gema75.com\/woocommerce-badges\/?page_id=1917"},"modified":"2026-03-23T19:42:34","modified_gmt":"2026-03-23T19:42:34","slug":"documentation-woo-backorder-badge","status":"publish","type":"page","link":"https:\/\/gema75.com\/woocommerce-badges\/woo-backorder-badge\/documentation-woo-backorder-badge\/","title":{"rendered":"Documentation WOO BackOrder Badge"},"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, #f39c12 0%, #e67e22 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: #e67e22;\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: #e67e22;\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 #e67e22;\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 #e67e22;\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: #e67e22;\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 #e67e22;\n            font-size: 16px;\n        }\n        \n        .requirements-list li strong {\n            color: #e67e22;\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: #e67e22;\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: #e67e22;\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: #e67e22;\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: #e67e22;\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: #e67e22;\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    \n        <!-- Header -->\n        <header class=\"doc-header\">\n            <h1>WooCommerce Backorder 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=\"#backorder-logic\">Backorder Logic<\/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 Backorder Badge is a powerful and flexible badge system for WooCommerce that allows you to create and manage professional badges for products on backorder. Create eye-catching badges that clearly communicate stock status to your customers, whether they&#8217;re waiting for restocks, pre-orders, or coming soon products.<\/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 BACKORDER badges for products with pending stock<\/li>\n                    <li>&#8220;Pre-order&#8221; badges for upcoming product launches<\/li>\n                    <li>&#8220;Coming Soon&#8221; or &#8220;Restocking&#8221; badges for future availability<\/li>\n                    <li>Category-specific backorder 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 Backorder Badges<\/h4>\n                    <ul>\n                        <li>Create unlimited backorder badges<\/li>\n                        <li>Global or category-specific badges<\/li>\n                        <li>Shows on catalog and single product pages<\/li>\n                        <li>Real-time updates for variable products<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Preset Library<\/h4>\n                    <ul>\n                        <li>6 professionally designed SVG badges<\/li>\n                        <li>Options: &#8220;Backorder&#8221;, &#8220;Pre-order&#8221;, &#8220;Coming Soon&#8221;<\/li>\n                        <li>&#8220;Restocking&#8221;, &#8220;Due Soon&#8221;, &#8220;Reserve&#8221; badges<\/li>\n                        <li>Instant preview and selection<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Smart Backorder Logic<\/h4>\n                    <ul>\n                        <li><strong>Simple Products:<\/strong> Shows badge when on backorder<\/li>\n                        <li><strong>Variable Products:<\/strong> Shows badge when ANY variation is on backorder<\/li>\n                        <li>Real-time updates when variations are selected<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Custom Design Options<\/h4>\n                    <ul>\n                        <li>Custom text (e.g., &#8220;Backorder&#8221;, &#8220;Pre-order&#8221;)<\/li>\n                        <li>Custom colors for text and background<\/li>\n                        <li>Adjustable padding and margins<\/li>\n                        <li>Border radius controls for rounded corners<\/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 the badge<\/li>\n                        <li>See changes instantly before publishing<\/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 badge when ANY variation is on backorder<\/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                        <li>Lightweight CSS and JavaScript<\/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 Full Site Editing (FSE) themes<\/li>\n            <\/ul>\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> For variable products, the badge appears when ANY variation is on backorder. This encourages customers to check available options while indicating which variations are delayed.\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>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;Backorder 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>gembackorderbadge<\/code> folder to <code>\/wp-content\/plugins\/<\/code><\/li>\n                <li>Go to WordPress Admin \u2192 Plugins<\/li>\n                <li>Find &#8220;WooCommerce Backorder Badge&#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 Backorder Badge<\/strong>\n                    <p>Go to Backorder Badges \u2192 Add New. Give your badge a title (e.g., &#8220;Default Backorder Badge&#8221;).<\/p>\n                <\/li>\n                <li>\n                    <strong>Choose Assignment Type<\/strong>\n                    <p>Select &#8220;Global&#8221; to show on all backordered 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>Publish Your Badge<\/strong>\n                    <p>Click Publish and the badge will automatically appear on applicable backordered products.<\/p>\n                <\/li>\n            <\/ol>\n\n            <h3>Creating a Simple Backorder Badge &#8211; Step by Step<\/h3>\n            <ol class=\"step-list\">\n                <li>Go to <b>Backorder Badges \u2192 Add New<\/b> in your WordPress admin.<\/li>\n                <li>Enter a title for the badge (internal name, e.g., &#8220;Standard Backorder Badge&#8221;).<\/li>\n                <li>In the <b>Badge Assignment<\/b> section, choose:\n                    <ul style=\"margin-top:5px;\">\n                        <p><b>Global<\/b> &#8211; Shows on all backordered products<\/p>\n                        <p><b>Specific Categories<\/b> &#8211; Shows only in selected categories.<\/p>\n                    <\/ul>\n                <\/li>\n                <li>In the <b>Badge Types<\/b> section, choose &#8220;Use Custom Design&#8221; for a text badge.<\/li>\n                <li>Set your badge text (e.g., &#8220;BACKORDER&#8221;, &#8220;PRE-ORDER&#8221;, &#8220;COMING SOON&#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 <b>Publish<\/b> to save your badge.<\/li>\n            <\/ol>\n            \n            <h3>Creating a Preset Image Badge<\/h3>\n            <ol class=\"step-list\">\n                <li>Follow steps 1-3 above.<\/li>\n                <li>In the <b>Badge Types<\/b> section, choose &#8220;Use Preset Image&#8221;.<\/li>\n                <li>Select from 6 pre-designed SVG badges: Backorder, Pre-order, Coming Soon, Restocking, Due Soon, or Reserve.<\/li>\n                <li>Click on any preset badge to select it.<\/li>\n                <li>Publish your badge.<\/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 & Presets -->\n        <section id=\"badge-types\" class=\"doc-section\">\n            <h2>Badge Types &#038; Presets<\/h2>\n            \n            <h3>Preset Badges<\/h3>\n            <p>The plugin includes 6 professionally designed SVG badges:<\/p>\n           \n            \n            <h3>Custom Design Options<\/h3>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th style=\"width: 30%;\">Option<\/th>\n                        <th>Description<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td><strong>Badge Text<\/strong><\/td>\n                        <td>Custom text for your badge (e.g., &#8220;Backorder&#8221;, &#8220;Pre-order&#8221;, &#8220;Coming Soon&#8221;)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Text Color<\/strong><\/td>\n                        <td>Choose any color for the badge text<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Background Color<\/strong><\/td>\n                        <td>Choose any color for the badge background<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Padding<\/strong><\/td>\n                        <td>Set top, right, bottom, left padding in pixels<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Border Radius<\/strong><\/td>\n                        <td>Individual corner radius for rounded or custom-shaped badges<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Position<\/strong><\/td>\n                        <td>Top and left position (drag in preview to adjust)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Opacity<\/strong><\/td>\n                        <td>Set badge transparency from 0 (transparent) to 10 (opaque)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Custom Image<\/strong><\/td>\n                        <td>Upload your own JPG, PNG, GIF, or SVG badge image<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n\n            <h3>Badge Assignment<\/h3>\n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th style=\"width: 25%;\">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 backordered products<\/td>\n                        <td>One consistent backorder badge for your entire store<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Specific Categories<\/strong><\/td>\n                        <td>Shows only on backordered products in selected categories<\/td>\n                        <td>Different badges for different departments (e.g., &#8220;Backorder&#8221; for electronics, &#8220;Pre-order&#8221; for clothing)<\/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 backordered 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 on backordered items<\/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 on backordered items<\/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        <!-- Backorder Logic -->\n        <section id=\"backorder-logic\" class=\"doc-section\">\n            <h2>Backorder Logic<\/h2>\n            \n            <p>The plugin intelligently determines when to show backorder badges based on product type and backorder status.<\/p>\n            \n            <h3>Simple Products<\/h3>\n            <ul>\n                <li><strong>On Backorder:<\/strong> Badge appears<\/li>\n                <li><strong>In Stock:<\/strong> No badge appears<\/li>\n                <li><strong>Out of Stock (not on backorder):<\/strong> No badge appears<\/li>\n            <\/ul>\n            \n            <h3>Variable Products<\/h3>\n            <div class=\"info-box\">\n                <strong>Smart Logic:<\/strong> For variable products, the badge appears when <strong>ANY variation is on backorder<\/strong>.\n            <\/div>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th>Scenario<\/th>\n                        <th>Badge Display<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td>Catalog &#8211; At least one variation on backorder<\/td>\n                        <td>\u2705 Badge appears<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Catalog &#8211; No variations on backorder<\/td>\n                        <td>\u274c No badge appears<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Product view &#8211; Customer selects on-backorder variation<\/td>\n                        <td>\u2705 Badge appears (real-time update)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Product view &#8211; Customer selects in-stock variation<\/td>\n                        <td>\u274c Badge disappears (real-time update)<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n            \n            <div class=\"tip-box\">\n                <strong>Pro Tip:<\/strong> The real-time badge switching on variable products informs customers which variations are delayed while showing that other options are available immediately.\n            <\/div>\n            \n            <h3>Catalog vs Single Product Views<\/h3>\n            <ul>\n                <li><strong>Catalog\/Shop Pages:<\/strong> Shows badge if ANY variation is on backorder<\/li>\n                <li><strong>Single Product Page:<\/strong> Shows badge with real-time updates when variations are selected<\/li>\n            <\/ul>\n        <\/section>\n\n        <!-- Settings -->\n        <section id=\"settings\" class=\"doc-section\">\n            <h2>Display Settings<\/h2>\n            \n            <p>Access via Backorder 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 backorder 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 backorder 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>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 6 professionally designed backorder 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: #f39c12)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Badge Text<\/td>\n                        <td>Custom text (e.g., &#8220;BACKORDER&#8221;, &#8220;PRE-ORDER&#8221;, &#8220;COMING SOON&#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 for rounded corners<\/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 backorder badges as you need for different categories or styles.<\/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 6 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>Backorder Logic Questions<\/h3>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: How does the badge work with variable products?<\/h4>\n                <p><strong>A:<\/strong> The badge appears when ANY variation is on backorder. This is different from sold out badges, which appear only when ALL variations are out of stock. For backorder, we want customers to know that some variations are delayed while others may be available.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: How do I mark a product as &#8220;on backorder&#8221;?<\/h4>\n                <p><strong>A:<\/strong> In WooCommerce product settings, set &#8220;Stock status&#8221; to &#8220;On backorder&#8221;. The plugin will automatically detect this and display the badge.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Can I show different badges for different backorder scenarios?<\/h4>\n                <p><strong>A:<\/strong> Yes! Create multiple badges and assign them to specific categories. For example, a &#8220;Pre-order&#8221; badge for upcoming products, a &#8220;Backorder&#8221; badge for restocking items, and a &#8220;Coming Soon&#8221; badge for future releases.<\/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>For simple products: verify product is marked &#8220;On backorder&#8221;<\/li>\n                                <li>For variable products: verify at least one variation is on backorder<\/li>\n                                <li>Clear any caching plugins<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Badge Showing When Product Is Not on Backorder<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Check if product stock status is correctly set to &#8220;In stock&#8221;<\/li>\n                                <li>For variable products, check if any variation is on backorder<\/li>\n                                <li>Clear any caching plugins<\/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 have correct backorder status<\/li>\n                                <li>Check browser console for JavaScript errors<\/li>\n                                <li>Clear any caching plugins<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Radius\/Padding Not Applying to Variable Products<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Clear your browser cache<\/li>\n                                <li>Deactivate and reactivate the plugin<\/li>\n                                <li>Check that badge meta includes radius values<\/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 correctly set to &#8220;On backorder&#8221;<\/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 Backorder Badge v4.0.0 | Documentation by Gema75 \u00a9 2026<\/p>\n        <\/footer>\n    \n<\/body1>\n\n","protected":false},"excerpt":{"rendered":"<p>WooCommerce Backorder Badge Version 4.0.0 Last Updated: March 2026 Author: Gema75 Plugin Type: WooCommerce Extension Introduction Features Installation Getting Started Badge Types Backorder Logic Settings FAQ Introduction WooCommerce Backorder Badge is a powerful and flexible badge system for WooCommerce that allows you to create and manage professional badges for products on backorder. Create eye-catching badges&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1903,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-no-sidebar.php","meta":{"footnotes":""},"class_list":["post-1917","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1917","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=1917"}],"version-history":[{"count":6,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1917\/revisions"}],"predecessor-version":[{"id":1934,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1917\/revisions\/1934"}],"up":[{"embeddable":true,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1903"}],"wp:attachment":[{"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/media?parent=1917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}