{"id":1830,"date":"2026-03-22T12:34:28","date_gmt":"2026-03-22T12:34:28","guid":{"rendered":"https:\/\/gema75.com\/woocommerce-badges\/?page_id=1830"},"modified":"2026-03-22T16:01:24","modified_gmt":"2026-03-22T16:01:24","slug":"woo-soldout-badge-documentation","status":"publish","type":"page","link":"https:\/\/gema75.com\/woocommerce-badges\/woo-soldout-badge\/woo-soldout-badge-documentation\/","title":{"rendered":"Documentation Woo Sold Out 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, #c9326c 0%, #8b244a 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: #c9326c;\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: #c9326c;\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 #c9326c;\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 #c9326c;\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: #c9326c;\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 #c9326c;\n            font-size: 16px;\n        }\n        \n        .requirements-list li strong {\n            color: #c9326c;\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: #c9326c;\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: #c9326c;\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: #c9326c;\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: #c9326c;\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: #c9326c;\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 Sold Out 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=\"#stock-status\">Stock Status 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 Sold Out Badge is a powerful and flexible badge system for WooCommerce that allows you to create and manage professional &#8220;Sold Out&#8221; badges for out-of-stock products. Create eye-catching badges that clearly communicate stock status to your customers.<\/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 SOLD OUT badges for out-of-stock products<\/li>\n                    <li>&#8220;Back Soon&#8221; or &#8220;Restocking&#8221; badges for restocking items<\/li>\n                    <li>Category-specific sold out 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 Sold Out Badges<\/h4>\n                    <ul>\n                        <li>Create unlimited sold out 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>12 professionally designed SVG badges<\/li>\n                        <li>Various &#8220;SOLD OUT&#8221; designs and styles<\/li>\n                        <li>Options: &#8220;GONE&#8221;, &#8220;ALL GONE&#8221;, &#8220;BACK SOON&#8221;, and more<\/li>\n                        <li>Instant preview and selection<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"feature-card\">\n                    <h4>Smart Stock Logic<\/h4>\n                    <ul>\n                        <li><strong>Simple Products:<\/strong> Shows badge when out of stock<\/li>\n                        <li><strong>Variable Products:<\/strong> Shows badge only when ALL variations are out of stock<\/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;Sold Out&#8221;, &#8220;Gone&#8221;, &#8220;Back Soon&#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 only when ALL variations are out of stock<\/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 only when ALL variations are out of stock. If any variation is available, no badge is shown &#8211; encouraging customers to purchase the available options.\n            <\/div>\n\n           \n        <\/section>\n\n        <!-- Installation -->\n        <section id=\"installation\" class=\"doc-section\">\n            <h2>Installation<\/h2>\n            \n            <h3>Standard Installation<\/h3>\n            <ol class=\"step-list\">\n                <li>Download the plugin ZIP file from CodeCanyon<\/li>\n                <li>Go to WordPress Admin \u2192 Plugins \u2192 Add New<\/li>\n                <li>Click &#8220;Upload Plugin&#8221; and select the downloaded ZIP file<\/li>\n                <li>Click &#8220;Install Now&#8221; and then &#8220;Activate&#8221;<\/li>\n                <li>The plugin will automatically check for WooCommerce<\/li>\n                <li>A new menu item &#8220;Sold Out 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>soldout-badges<\/code> folder to <code>\/wp-content\/plugins\/<\/code><\/li>\n                <li>Go to WordPress Admin \u2192 Plugins<\/li>\n                <li>Find &#8220;Woocommerce Sold Out 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 Sold Out Badge<\/strong>\n                    <p>Go to Sold Out Badges \u2192 Add New. Give your badge a title (e.g., &#8220;Default Sold Out Badge&#8221;).<\/p>\n                <\/li>\n                <li>\n                    <strong>Choose Assignment Type<\/strong>\n                    <p>Select &#8220;Global&#8221; to show on all out-of-stock 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 out-of-stock products.<\/p>\n                <\/li>\n            <\/ol>\n\n            <h3>Creating a Simple Sold Out Badge &#8211; Step by Step<\/h3>\n            <ol class=\"step-list\">\n                <li>Go to <b>Sold Out Badges \u2192 Add New<\/b> in your WordPress admin.<\/li>\n                <li>Enter a title for the badge (internal name, e.g., &#8220;Standard Sold Out Badge&#8221;).<\/li>\n                <li>In the <b>Badge Assignment<\/b> section, choose:\n                    <ul style=\"margin-top:5px;\">\n                        <p>&#8211; <b>Global &#8211; <\/b>Shows on all out-of-stock products<\/p>\n                        <p>&#8211; <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;SOLD OUT&#8221;, &#8220;GONE&#8221;, &#8220;BACK 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 an 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; to select from 12 pre-designed badges.<\/li>\n                <li>Click on any preset badge to select it.<\/li>\n                <li>Alternatively, choose &#8220;Use Custom Design&#8221; and upload your own image in the &#8220;Custom Badge Image&#8221; section.<\/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 -->\n        <section id=\"badge-types\" class=\"doc-section\">\n            <h2>Badge Types &#038; Assignment<\/h2>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th 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 out-of-stock products<\/td>\n                        <td>One consistent sold out badge for your entire store<\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Specific Categories<\/strong><\/td>\n                        <td>Shows only on out-of-stock products in selected categories<\/td>\n                        <td>Different badges for different departments (e.g., &#8220;SOLD OUT&#8221; for clothing, &#8220;DISCONTINUED&#8221; for electronics)<\/td>\n                    <\/tr>\n                <\/tbody>\n            <\/table>\n\n            <h3>How Category Selection Works<\/h3>\n            <p>When you select &#8220;Specific Categories&#8221;, you can choose multiple categories. The badge will appear on any product that belongs to at least one of the selected categories.<\/p>\n            \n            <div class=\"category-tree\">\n                <strong>Example:<\/strong>\n                <ul>\n                    <li>\u2713 Clothing (selected) \u2013 Badge appears on out-of-stock 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 out-of-stock 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        <!-- Stock Status Logic -->\n        <section id=\"stock-status\" class=\"doc-section\">\n            <h2>Stock Status Logic<\/h2>\n            \n            <p>The plugin intelligently determines when to show sold out badges based on product type and stock status.<\/p>\n            \n            <h3>Simple Products<\/h3>\n            <ul>\n                <li><strong>Out of Stock:<\/strong> Badge appears<\/li>\n                <li><strong>In Stock:<\/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 only when <strong>ALL variations are out of stock<\/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; All variations out of stock<\/td>\n                        <td>\u2705 Badge appears<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Catalog &#8211; At least one variation in stock<\/td>\n                        <td>\u274c No badge appears<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Product view &#8211; Customer selects an out-of-stock variation<\/td>\n                        <td>\u2705 Badge appears (real-time update)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Product view &#8211; Customer selects an 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 encourages customers to purchase available variations instead of leaving when they see a &#8220;Sold Out&#8221; badge.\n            <\/div>\n            \n            <h3>Catalog vs Single Product Views<\/h3>\n            <ul>\n                <li><strong>Catalog\/Shop Pages:<\/strong> Shows badge based on overall product stock status<\/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 Sold Out Badge \u2192 Display Settings<\/p>\n            \n            <table class=\"feature-table\">\n                <thead>\n                    <tr>\n                        <th>Setting<\/th>\n                        <th>Options<\/th>\n                        <th>Description<\/th>\n                    <\/tr>\n                <\/thead>\n                <tbody>\n                    <tr>\n                        <td>Display in Catalog View<\/td>\n                        <td>Yes\/No<\/td>\n                        <td>Show sold out 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 sold out 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 12 professionally designed sold out 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: #c9326c)<\/td>\n                    <\/tr>\n                    <tr>\n                        <td>Badge Text<\/td>\n                        <td>Custom text (e.g., &#8220;SOLD OUT&#8221;, &#8220;GONE&#8221;, &#8220;BACK 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 sold out 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 12 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>Stock 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 only when ALL variations are out of stock. If any variation is available, no badge is shown. When a customer selects a variation, the badge updates in real-time based on that variation&#8217;s stock status.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Can I show a &#8220;Low Stock&#8221; badge instead of &#8220;Sold Out&#8221;?<\/h4>\n                <p><strong>A:<\/strong> Yes! You can customize the badge text to anything you want, such as &#8220;Only X Left!&#8221;, &#8220;Low Stock&#8221;, or &#8220;Hurry Up!&#8221;. The badge will appear based on stock status (out of stock). For low stock thresholds, you would need to customize the logic.<\/p>\n            <\/div>\n            \n            <div class=\"feature-card\" style=\"margin-bottom: 15px;\">\n                <h4>Q: Does it work with backordered products?<\/h4>\n                <p><strong>A:<\/strong> Yes. If a product is marked as &#8220;in stock&#8221; but on backorder, no badge will appear. If it&#8217;s out of stock, the badge will appear.<\/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 OUT OF STOCK<\/li>\n                                <li>For variable products: verify ALL variations are out of stock<\/li>\n                                <li>Clear any caching plugins<\/li>\n                            <\/ul>\n                        <\/td>\n                    <\/tr>\n                    <tr>\n                        <td><strong>Badge Showing When Product is In Stock<\/strong><\/td>\n                        <td>\n                            <ul style=\"margin: 0; padding-left: 20px;\">\n                                <li>Check if product is correctly set to &#8220;In Stock&#8221;<\/li>\n                                <li>For variable products, check if any variation is in stock<\/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 stock 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 out of stock (or check variable products)<\/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 Sold Out Badge v4.0.0 | Documentation by Gema75 \u00a9 2026<\/p>\n        <\/footer>\n    \n<\/body1>\n","protected":false},"excerpt":{"rendered":"<p>Woocommerce Sold Out Badge Version 4.0.0 Last Updated: March 2026 Author: Gema75 Plugin Type: WooCommerce Extension Introduction Features Installation Getting Started Badge Types Stock Status Logic Settings FAQ Introduction Woocommerce Sold Out Badge is a powerful and flexible badge system for WooCommerce that allows you to create and manage professional &#8220;Sold Out&#8221; badges for out-of-stock&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1816,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-no-sidebar.php","meta":{"footnotes":""},"class_list":["post-1830","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1830","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=1830"}],"version-history":[{"count":10,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1830\/revisions"}],"predecessor-version":[{"id":1865,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1830\/revisions\/1865"}],"up":[{"embeddable":true,"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/pages\/1816"}],"wp:attachment":[{"href":"https:\/\/gema75.com\/woocommerce-badges\/wp-json\/wp\/v2\/media?parent=1830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}