Documentation WOO BackOrder Badge

WooCommerce Backorder Badge

Version 4.0.0

Last Updated: March 2026 Author: Gema75 Plugin Type: WooCommerce Extension

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 that clearly communicate stock status to your customers, whether they’re waiting for restocks, pre-orders, or coming soon products.

Perfect for:
  • Creating professional BACKORDER badges for products with pending stock
  • “Pre-order” badges for upcoming product launches
  • “Coming Soon” or “Restocking” badges for future availability
  • Category-specific backorder badges
  • Variable product support with real-time badge switching

Requirements

  • WordPress: 6.5 or higher
  • WooCommerce: 5.0 or higher (tested up to 10.0.5)
  • PHP: 7.4 or higher
Important: This plugin requires WooCommerce to be installed and activated. It will not function without WooCommerce.

Features

Professional Backorder Badges

  • Create unlimited backorder badges
  • Global or category-specific badges
  • Shows on catalog and single product pages
  • Real-time updates for variable products

Preset Library

  • 6 professionally designed SVG badges
  • Options: “Backorder”, “Pre-order”, “Coming Soon”
  • “Restocking”, “Due Soon”, “Reserve” badges
  • Instant preview and selection

Smart Backorder Logic

  • Simple Products: Shows badge when on backorder
  • Variable Products: Shows badge when ANY variation is on backorder
  • Real-time updates when variations are selected

Custom Design Options

  • Custom text (e.g., “Backorder”, “Pre-order”)
  • Custom colors for text and background
  • Adjustable padding and margins
  • Border radius controls for rounded corners
  • Opacity settings
  • Custom image upload

Live Preview

  • Real-time design updates
  • Drag to position the badge
  • See changes instantly before publishing

Variable Product Support

  • Real-time badge switching
  • Shows badge when ANY variation is on backorder
  • Updates instantly on variation selection

Performance Optimized

  • Built-in caching system
  • Minimal database queries
  • Optimized for block and classic themes
  • Lightweight CSS and JavaScript

Theme Compatibility

The plugin automatically detects your theme type and uses the appropriate display method:

  • Classic Themes: Storefront, Astra, Flatsome, OceanWP, and all traditional WooCommerce themes
  • Block Themes: Twenty Twenty-Four, Twenty Twenty-Five, and all Full Site Editing (FSE) themes

HPOS Compatibility

Fully compatible with WooCommerce High-Performance Order Storage.

Pro Tip: 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.

Installation

Standard Installation

  1. Download the plugin ZIP file from CodeCanyon
  2. Go to WordPress Admin → Plugins → Add New
  3. Click “Upload Plugin” and select the downloaded ZIP file
  4. Click “Install Now” and then “Activate”
  5. The plugin will automatically check for WooCommerce
  6. A new menu item “Backorder Badges” will appear in your admin sidebar

FTP Installation

  1. Extract the plugin ZIP file on your computer
  2. Upload the gembackorderbadge folder to /wp-content/plugins/
  3. Go to WordPress Admin → Plugins
  4. Find “WooCommerce Backorder Badge” and click “Activate”
Note: After activation, the plugin creates a default settings structure. You can modify these settings anytime from the Display Settings page.

Getting Started

Quick Start Guide

  1. Create Your First Backorder Badge

    Go to Backorder Badges → Add New. Give your badge a title (e.g., “Default Backorder Badge”).

  2. Choose Assignment Type

    Select “Global” to show on all backordered products, or “Specific Categories” to limit to certain categories.

  3. Design Your Badge

    Choose a preset image, upload a custom image, or create a text badge with custom colors and styling.

  4. Publish Your Badge

    Click Publish and the badge will automatically appear on applicable backordered products.

Creating a Simple Backorder Badge – Step by Step

  1. Go to Backorder Badges → Add New in your WordPress admin.
  2. Enter a title for the badge (internal name, e.g., “Standard Backorder Badge”).
  3. In the Badge Assignment section, choose:

      Global – Shows on all backordered products

      Specific Categories – Shows only in selected categories.

  4. In the Badge Types section, choose “Use Custom Design” for a text badge.
  5. Set your badge text (e.g., “BACKORDER”, “PRE-ORDER”, “COMING SOON”), colors, padding, and border radius.
  6. Adjust the badge position by dragging the live preview or entering top/left values.
  7. Click Publish to save your badge.

Creating a Preset Image Badge

  1. Follow steps 1-3 above.
  2. In the Badge Types section, choose “Use Preset Image”.
  3. Select from 6 pre-designed SVG badges: Backorder, Pre-order, Coming Soon, Restocking, Due Soon, or Reserve.
  4. Click on any preset badge to select it.
  5. Publish your badge.
Live preview: The preview area updates in real-time as you adjust colors, padding, and position. Drag the badge to position it visually.

Badge Types & Presets

Preset Badges

The plugin includes 6 professionally designed SVG badges:

Custom Design Options

Option Description
Badge Text Custom text for your badge (e.g., “Backorder”, “Pre-order”, “Coming Soon”)
Text Color Choose any color for the badge text
Background Color Choose any color for the badge background
Padding Set top, right, bottom, left padding in pixels
Border Radius Individual corner radius for rounded or custom-shaped badges
Position Top and left position (drag in preview to adjust)
Opacity Set badge transparency from 0 (transparent) to 10 (opaque)
Custom Image Upload your own JPG, PNG, GIF, or SVG badge image

Badge Assignment

Assignment Type Description Use Case
Global Shows on all backordered products One consistent backorder badge for your entire store
Specific Categories Shows only on backordered products in selected categories Different badges for different departments (e.g., “Backorder” for electronics, “Pre-order” for clothing)

How Category Selection Works

When you select “Specific Categories”, you can choose multiple categories. The badge will appear on any backordered product that belongs to at least one of the selected categories.

Example:
  • ✓ Clothing (selected) – Badge appears on backordered items
  • ├── Men’s Clothing – Badge appears (inherits from parent)
  • │ ├── Shirts – Badge appears
  • │ └── Pants – Badge appears
  • └── Women’s Clothing – Badge appears
  • ✗ Electronics (not selected) – No badge on backordered items
  • └── Phones – No badge

Note: Category hierarchy is respected automatically. Selecting a parent category applies the badge to all child categories.

Backorder Logic

The plugin intelligently determines when to show backorder badges based on product type and backorder status.

Simple Products

  • On Backorder: Badge appears
  • In Stock: No badge appears
  • Out of Stock (not on backorder): No badge appears

Variable Products

Smart Logic: For variable products, the badge appears when ANY variation is on backorder.
Scenario Badge Display
Catalog – At least one variation on backorder ✅ Badge appears
Catalog – No variations on backorder ❌ No badge appears
Product view – Customer selects on-backorder variation ✅ Badge appears (real-time update)
Product view – Customer selects in-stock variation ❌ Badge disappears (real-time update)
Pro Tip: The real-time badge switching on variable products informs customers which variations are delayed while showing that other options are available immediately.

Catalog vs Single Product Views

  • Catalog/Shop Pages: Shows badge if ANY variation is on backorder
  • Single Product Page: Shows badge with real-time updates when variations are selected

Display Settings

Access via Backorder Badges → Display Settings

Setting Options Description
Display in Catalog View Yes/No Show backorder badges on shop, category, and archive pages
Display in Single Product View Yes/No Show backorder badges on individual product pages

Badge Creation Settings

When creating/editing a badge, you’ll find these options:

Field Description
Badge Assignment Global (all products) or Specific Categories
Badge Types Use Custom Design or Use Preset Image
Preset Images Choose from 6 professionally designed backorder badges
Text Color Customize text color
Background Color Customize background color (default: #f39c12)
Badge Text Custom text (e.g., “BACKORDER”, “PRE-ORDER”, “COMING SOON”)
Padding Top, Bottom, Left, Right padding in pixels
Border Radius Individual corner radius settings for rounded corners
Position Top and Left position (draggable preview)
Opacity 0-10 opacity setting
Custom Image Upload your own badge image

Frequently Asked Questions

General Questions

Q: How many badges can I create?

A: Unlimited! Create as many backorder badges as you need for different categories or styles.

Q: Can I use my own images for badges?

A: Absolutely! You can upload any image (JPG, PNG, GIF, SVG) from your media library, or choose from our 6 preset SVG badges.

Q: Will this work with my theme?

A: Yes! The plugin automatically detects whether you’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.

Q: Will this slow down my site?

A: No – the plugin is optimized with caching, minified assets, and conditional loading. It only loads scripts and styles where needed, ensuring minimal performance impact.

Backorder Logic Questions

Q: How does the badge work with variable products?

A: 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.

Q: How do I mark a product as “on backorder”?

A: In WooCommerce product settings, set “Stock status” to “On backorder”. The plugin will automatically detect this and display the badge.

Q: Can I show different badges for different backorder scenarios?

A: Yes! Create multiple badges and assign them to specific categories. For example, a “Pre-order” badge for upcoming products, a “Backorder” badge for restocking items, and a “Coming Soon” badge for future releases.

Troubleshooting

Issue Solution
Badge Not Showing
  • Verify badge is published (not draft)
  • Check display settings are enabled
  • For simple products: verify product is marked “On backorder”
  • For variable products: verify at least one variation is on backorder
  • Clear any caching plugins
Badge Showing When Product Is Not on Backorder
  • Check if product stock status is correctly set to “In stock”
  • For variable products, check if any variation is on backorder
  • Clear any caching plugins
Variable Badge Not Updating
  • Ensure variations have correct backorder status
  • Check browser console for JavaScript errors
  • Clear any caching plugins
Radius/Padding Not Applying to Variable Products
  • Clear your browser cache
  • Deactivate and reactivate the plugin
  • Check that badge meta includes radius values

Support

For support, please contact us through CodeCanyon:

Before contacting support:
  • Check that you meet all system requirements
  • Ensure WooCommerce is active and up to date
  • Verify your products are correctly set to “On backorder”
  • Try disabling other plugins to test for conflicts
  • Check your PHP error logs for clues

WooCommerce Backorder Badge v4.0.0 | Documentation by Gema75 © 2026