// Add an out of stock overlay to product images when all variations are unavailable //상품 재고가 떨어지면 상품 이미지에 Out of Stock 오버레이 추가 add_action( 'woocommerce_before_shop_loop_item_title', function() { global $product; if ( !$product->is_in_stock() ) { echo '<span class="sold-out-overlay">Sold Out</span>'; } }); 출처: https://launchwoo.com.au/add-a-sold-out-badge-to-out-of-stock-woocommerce-products/ .sold-out-overlay { background: #654ea3; /* 배경색 - 적절히 수정 */ color: #fff; /* 텍스트 색상 - 적절히 수정 */ font-size: 14px; font-weight: 600; padding: 5px 10px; position: absolute; right: 50px; top: 10px; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter