如何修改WooCommerce代码实现商品尺寸属性单独带边框显示

直接用下面的代码替换你原来的属性展示逻辑，就能实现每个尺寸单独用带边框的span包裹：

PHP代码（添加到主题functions.php或自定义代码插件） #

add_action( 'woocommerce_after_shop_loop_item_title', 'display_product_size_attributes', 15 );
function display_product_size_attributes() {
    global $product;
    
    // 替换成你商店里Size属性的slug，默认是pa_size
    $size_attr_slug = 'pa_size';
    $size_values = $product->get_attribute( $size_attr_slug );
    
    if ( ! empty( $size_values ) ) {
        // 拆分逗号分隔的尺寸值
        $sizes = explode( ', ', $size_values );
        
        echo '<div class="product-sizes">';
        foreach ( $sizes as $size ) {
            // 给每个尺寸套上span标签
            echo '<span class="size-item">' . esc_html( trim( $size ) ) . '</span>';
        }
        echo '</div>';
    }
}

CSS样式（添加到主题自定义CSS或子主题style.css） #

.product-sizes {
    margin: 10px 0;
}

.size-item {
    display: inline-block;
    padding: 3px 7px;
    margin: 0 5px 5px 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    color: #555;
    background: #f7f7f7;
}

/* 可选：鼠标悬停效果 */
.size-item:hover {
    border-color: #666;
    background: #f0f0f0;
}

注意事项 #

• 确认pa_size是你商店中Size属性的正确slug，可在WooCommerce后台「产品 > 属性」中查看对应属性的slug
• 如果原来的代码已经用了woocommerce_after_shop_loop_item_title钩子，注意调整优先级（代码中的15）避免冲突

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