如何移除WooCommerce商品列表页可变产品属性名称并水平显示属性值

我找到了一段可在WooCommerce商品列表页显示可变产品属性的代码，当前显示效果中包含属性标签“Marime”（意为“尺寸”），且尺寸选项为垂直排列。我需要移除该标签文本，同时让尺寸选项水平显示，达到目标效果。

现有代码 #

/**
 * Replace add to cart button in the loop.
 */
function iconic_change_loop_add_to_cart() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    add_action( 'woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10 );
}

add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );

/**
 * Use single add to cart button for variable products.
 */
function iconic_template_loop_add_to_cart() {
    global $product;

    if ( ! $product->is_type( 'variable' ) ) {
        woocommerce_template_loop_add_to_cart();
        return;
    }

    remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
    add_action( 'woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20 );

    woocommerce_template_single_add_to_cart();
}

/**
 * Customise variable add to cart button for loop.
 *
 * Remove qty selector and simplify.
 */
function iconic_loop_variation_add_to_cart_button() {
    global $product;

    ?>
    <div class="woocommerce-variation-add-to-cart variations_button">
        <button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
        <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
        <input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
        <input type="hidden" name="variation_id" class="variation_id" value="0" />
    </div>
    <?php
}

当前显示效果 #

目标显示效果 #

实现方案 #

1. 移除“Marime”属性标签 #

将以下PHP代码添加到主题的functions.php文件或自定义插件中：

// 在商品列表页移除尺寸属性的标签文本
add_filter( 'woocommerce_attribute_label', 'remove_marime_attribute_label', 10, 3 );
function remove_marime_attribute_label( $label, $name, $product ) {
    // 替换 'pa_marime' 为你实际的尺寸属性slug（WooCommerce属性slug默认以pa_开头）
    if ( 'pa_marime' === $name && ( is_shop() || is_product_category() || is_product_tag() ) ) {
        return '';
    }
    return $label;
}

注意：可在WooCommerce后台产品 > 属性中查看尺寸属性的实际slug，确保代码中对应值正确。

2. 让尺寸选项水平排列 #

将以下CSS代码添加到主题的自定义CSS面板（外观 > 自定义 > 额外CSS）或子主题的style.css文件中：

/* 商品列表页可变属性选项水平排列 */
.woocommerce ul.products li.product .variations {
    display: flex;
    gap: 10px; /* 调整选项之间的间距 */
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.woocommerce ul.products li.product .variations .label {
    display: none; /* 确保标签完全隐藏 */
}

.woocommerce ul.products li.product .variations select {
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    min-width: 60px;
}

若你的属性是单选按钮而非下拉框，可将CSS选择器调整为.woocommerce ul.products li.product .variations input[type="radio"] + label，设置对应水平排列样式。

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