Hi, I’m encountering a problem with the “Sold Out” badges on my WooCommerce store. I’m not quite sure why the sold-out badge appears on the single product page but not on the main shop. My goal is for these badges to be clearly visible on the main product listings.
Main Shop
https://www.amytwon.com/oil-paintings/ (Image too big to upload)
Single Product Page
I’ve already confirmed the following:
- Products are correctly set to “Out of stock” within WooCommerce.
- Stock management is enabled.
- All relevant caches (site, browser, CDN) have been cleared.
Below is the current CSS and PHP code applied to product images:
.wcsob_soldout {
background-color: #f73636; /* Red background */
color: #ffffff; /* White text */
padding: 4px 8px; /* Padding */
font-size: 0.8em; /* Font size */
font-weight: bold;
text-transform: uppercase;
border-radius: 2px; /* Slightly rounded corners */
line-height: 1; /* Helps with vertical alignment of text */
box-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Subtle shadow for depth */
z-index: 10; /* Good practice, but less critical for non-overlapping */
}
/* This will apply to the badge on the individual product page */
.woocommerce div.product .wcsob_soldout {
position: relative; /* Keep it in the document flow */
display: inline-block; /* Or 'block' depending on where you want it */
margin-bottom: 15px; /* Add some space below it */
/* Reset any conflicting styles if needed */
top: auto;
left: auto;
right: auto;
bottom: auto;
transform: none;
}
PHP:
// For Shop and Archive Pages (now *above* the thumbnail)
add_action( 'woocommerce_before_shop_loop_item', 'my_custom_soldout_badge_above_thumbnail', 5 );
// For Single Product Page (keep this if you want a badge there, no change to its function)
add_action( 'woocommerce_before_single_product_summary', 'my_custom_soldout_badge_display', 30 );
function my_custom_soldout_badge_above_thumbnail() {
global $product;
if ( ! $product->is_in_stock() ) {
// Output the badge with a specific class for above-thumbnail positioning
echo '<span class="wcsob_soldout wcsob_above_thumbnail_badge">SOLD OUT</span>';
}
}
// Function for single product page badge (keep if you want it)
function my_custom_soldout_badge_display() {
global $post, $product;
if ( ! $product->is_in_stock() ) {
echo '<span class="wcsob_soldout">SOLD OUT</span>';
}
}
Any ideas or common fixes for this kind of “Sold Out” badge problem would be super helpful!