WooCommerce Backorder Display Issues: Solving the 'Available on Backorder' Message Dilemma

Effectively managing inventory and communicating stock availability is paramount for any online store. WooCommerce offers robust backorder functionality, yet its frontend display can sometimes lead to confusion. A recent query in the WordPress support forums, titled "allow backorder not working as designed," highlighted this very issue. A user reported that selecting the "Allow backorders" setting (without customer notification) still resulted in the product page displaying "Available on backorder," which they felt falsely implied a significant waiting period. This article clarifies this common WooCommerce backorder dilemma and provides actionable solutions for store owners and developers.

Understanding WooCommerce Backorder Settings

WooCommerce provides three primary backorder settings for individual products under the "Inventory" tab:

  • Do not allow: Products cannot be purchased once out of stock.
  • Allow, but notify customer: Customers can purchase out-of-stock items, and a clear "Available on backorder" message is displayed on the product page and during checkout.
  • Allow: Customers can purchase out-of-stock items. Crucially, this setting is designed to suppress explicit backorder warnings during the checkout process and in order emails. However, the forum user's problem highlights that the product page often still shows a "backorder" status.

Why "Available on Backorder" Persists: Theme and Plugin Behavior

The user's observation that the feature "used to work properly" suggests an evolution in how WooCommerce, themes, and plugins interact. The core reason for the persistent "Available on backorder" message, even with the "Allow" setting, is that WooCommerce internally flags a product's stock status as 'onbackorder' once its quantity reaches zero and backorders are permitted. While the "Allow" setting (without notification) prevents explicit warnings during checkout, many themes and stock-related plugins are designed to display a general stock status message on the product page whenever an item is not 'instock' – including when it's 'onbackorder'. This is often implemented as a transparency feature, indicating the item isn't immediately available from current inventory, regardless of your specific notification preference.

Actionable Solutions: Customizing Backorder Messaging

To achieve the desired outcome – allowing backorders without displaying the "Available on backorder" message on the product page – typically requires customization. Here are the most effective approaches:

1. Customizing Theme Templates (Developer-level Control)

This method offers the most precise control. The "Available on backorder" message is usually rendered by a WooCommerce template file, most commonly single-product/stock.php.

Step-by-Step Instructions:

  1. Create a Child Theme: Always use a child theme to protect your modifications from theme updates.
  2. Locate and Copy Template: Find wp-content/plugins/woocommerce/templates/single-product/stock.php. Copy the stock.php file (maintaining its directory structure) into your child theme (e.g., wp-content/themes/your-child-theme/woocommerce/single-product/stock.php).
  3. Edit the Template File: Open your child theme's copied stock.php. You'll need to add a conditional statement to hide the backorder message specifically when backorders are allowed without notification. Look for code that outputs the backorder message. The key is to check the specific backorder setting, which can be retrieved via $_product->get_backorders() (returns 'no', 'notify', or 'yes').
  4. Example Conditional Modification: To hide the 'on backorder' message when the backorder setting is 'yes' (allow without notify), locate the relevant

    tag that outputs the message. You would wrap this in a conditional check. For instance:

    
    is_on_backorder() || ( $_product->is_on_backorder() && $_product->get_backorders() === 'notify' ) ) : ?>
        

    get_id() ) ); ?>

    This conditional statement will prevent the "Available on backorder" message from displaying if the product is on backorder AND the backorder setting is 'yes' (allow without notifying). Remember to replace $product->get_id() with $_product->get_id() if $_product is the variable used in your template. Adjust the condition and element based on your theme's specific output.
  5. Test Thoroughly: Always test changes on a staging site.

2. Using Custom CSS (Visual Hiding)

For a quick visual fix that hides the message without altering the HTML structure, custom CSS is an option. Be aware that this typically hides the message for ALL backordered items.

Step-by-Step Instructions:

  1. Inspect Element: Use browser developer tools to identify the CSS class or ID of the "Available on backorder" message (e.g., .stock.onbackorder).
  2. Add Custom CSS: Go to Appearance > Customize > Additional CSS.
  3. Insert CSS Rule: Add a rule to hide the element, for example:
    
    .stock.onbackorder {
        display: none !important;
    }
    
    You might need a more specific selector if other elements share similar classes.
  4. Publish and Test: Save and verify the change on your product pages.

Best Practices for Backorder Management

  • Review Settings: Regularly ensure backorder settings align with your inventory strategy.
  • Clear Communication: Provide clear information in FAQs or shipping policies about lead times for backordered items.
  • Staging Environment: Always test major changes on a staging site.
  • Keep Updated: Maintain up-to-date WooCommerce, theme, and plugin versions.

Conclusion

The "Available on backorder" message, even when backorders are technically allowed without explicit customer notification, is a common source of confusion. By understanding the interplay between WooCommerce core, themes, and plugins, store owners can implement targeted customizations. Whether through modifying theme templates for precise control or using custom CSS for a quicker visual fix, regaining control over backorder messaging ensures a clearer, more consistent customer experience. Always prioritize testing and transparent communication with your customers.

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools