如何在WooCommerce商品角落添加响应式‘已售罄’丝带横幅？

1. 修正PHP代码（确保横幅嵌入图片容器） #

替换你当前functions.php中的售罄横幅代码，下面的代码会把横幅插入到商品图片的父容器内，这样才能通过CSS实现叠加效果，同时覆盖店铺首页、分类页和商品详情页：

// 店铺首页/分类页添加售罄横幅
add_action('woocommerce_before_shop_loop_item_title', 'add_sold_out_badge_shop', 10);
function add_sold_out_badge_shop() {
    global $product;
    if (!$product->is_in_stock()) {
        echo '<span class="sold-out-badge">已售罄</span>';
    }
}

// 商品详情页添加售罄横幅
add_action('woocommerce_before_single_product_summary', 'add_sold_out_badge_single', 5);
function add_sold_out_badge_single() {
    global $product;
    if (!$product->is_in_stock()) {
        echo '<span class="sold-out-badge">已售罄</span>';
    }
}

2. 编写适配全屏幕的CSS样式 #

替换style.css中的对应代码，核心是给图片容器设置相对定位，横幅设置绝对定位，同时通过媒体查询适配移动端：

/* 给商品图片容器设置相对定位（关键） */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce div.product div.images {
    position: relative;
    overflow: hidden; /* 防止横幅超出容器 */
}

/* 已售罄横幅基础样式 */
.sold-out-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4444;
    color: #fff;
    padding: 5px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    z-index: 10; /* 确保横幅在图片上方 */
}

/* 移动端适配（屏幕宽度小于768px时调整样式） */
@media (max-width: 768px) {
    .sold-out-badge {
        top: 8px;
        right: 8px;
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* 横屏移动端额外适配 */
@media (max-width: 1024px) and (orientation: landscape) {
    .sold-out-badge {
        font-size: 13px;
        padding: 5px 11px;
    }
}

3. 验证与调试 #

• 清除WordPress和浏览器缓存，刷新页面查看效果
• 测试店铺首页、分类页、商品详情页的已售罄商品
• 切换不同屏幕尺寸（手机、平板、桌面）及横竖屏模式，确认横幅始终叠加在图片右上角

内容的提问来源于stack exchange，提问作者Hektor