"Pre-Order" Badge for Backorder Products
Labels products that are out of stock but allow backorders with a "Pre-order" badge in the shop and on product pages, so buyers know shipping will be later.
Opens WPIDE on
Code
$wpide_backorder_badge = 'Pre-order'; // Badge text.
$wpide_backorder_badge_html = function () use ( $wpide_backorder_badge ) {
global $product;
if ( $product instanceof WC_Product && $product->is_on_backorder() ) {
printf( '<span class="wpide-backorder-badge">%s</span>', esc_html( $wpide_backorder_badge ) );
}
};
add_action( 'woocommerce_before_shop_loop_item_title', $wpide_backorder_badge_html, 9 );
add_action( 'woocommerce_before_single_product_summary', $wpide_backorder_badge_html, 9 );
add_action( 'wp_head', function () {
if ( is_woocommerce() ) {
echo '<style>.woocommerce ul.products li.product,.woocommerce div.product{position:relative}.wpide-backorder-badge{position:absolute;bottom:.5em;left:.5em;z-index:9;padding:.25em .6em;border-radius:3px;background:#6d28d9;color:#fff;font-size:.8em;font-weight:600}</style>';
}
} );Notes
Shows on products whose stock status is "On backorder"; change the text to "Backorder" or "Ships later" if you prefer.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.