You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改代码在WooCommerce商品标题下方显示属性slug而非属性名

问题描述

我已经尝试了三天时间,想要在WooCommerce商品标题下方展示4个商品属性的slug,而非属性名称。目前我使用的PHP代码基本符合需求,但唯一的问题是它输出的是属性名称而非我需要的slug值。

当前使用的代码
/**
 * Display available attributes.
 * 
 * @return array|void
 */
function iconic_available_attributes() {
    global $product;

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

    $attributes = iconic_get_available_attributes( $product );

    if ( empty( $attributes ) ) {
        return;
    }

    foreach ( $attributes as $attribute ) {
        ?>
        <div class="iconic-available-attributes">
            <p class="iconic-available-attributes__title"><?php _e( 'Available', 'iconic' ); ?> <strong><?php echo $attribute['name']; ?></strong></p>

            <ul class="iconic-available-attributes__values">
                <?php foreach ( $attribute['values'] as $value ) { ?>
                    <li class="iconic-available-attributes__value <?php echo $value['available'] ? '' : 'iconic-available-attributes__value--unavailable'; ?>"><?php echo $value['name']; ?></li>
                <?php } ?>
            </ul>
        </div>
        <?php
    }
}


/**
 * Get available attributes.
 *
 * @param WC_Product_Variable $product
 *
 * @return array
 */
/**

 * @snippet       Display Custom Products Attributes on the Products Page

*/

function cw_woo_attribute(){

    global $product;

    $attributes = $product->get_attributes();

    if ( ! $attributes ) {

        return;

    }

    $display_result = '';

    foreach ( $attributes as $attribute ) {

        if ( $attribute->get_variation() ) {

            continue;

        }

        $name = $attribute->get_name();

        if ( $attribute->is_taxonomy() ) {

            $terms = wp_get_post_terms( $product->get_id(), $name, 'all' );

            $cwtax = $terms[0]->taxonomy;

            $cw_object_taxonomy = get_taxonomy($cwtax);

            if ( isset ($cw_object_taxonomy->labels->singular_name) ) {

                $tax_label = $cw_object_taxonomy->labels->singular_name;

            } elseif ( isset( $cw_object_taxonomy->label ) ) {

                $tax_label = $cw_object_taxonomy->label;

                if ( 0 === strpos( $tax_label, 'Product ' ) ) {

                    $tax_label = substr( $tax_label, 8 );

                }

            }
            $display_result .="<span class='attribute'>" .  $tax_label . "</span>";

            $tax_terms = array();

            foreach ( $terms as $term ) {

                $single_term = esc_html( $term->name );

                array_push( $tax_terms);

            }
            $display_result .= implode(', ', $tax_terms);

        } else {

            $display_result .= $name;

            $display_result .= esc_html( implode( ', ', $attribute->get_options() ) );

        }
    }

    echo "<span class='attributeline'>" .  "| " . "</span>" .  $display_result;

}
add_action('woocommerce_shop_loop_item_title', 'cw_woo_attribute', 25);
当前效果

目前页面会显示属性名“plant type”,而不是想要的属性值“annual”,效果截图如下:
当前效果截图

解决方案

将原有代码中的cw_woo_attribute函数整体替换为下方修改后的代码即可:

function cw_woo_attribute(){
    global $product;
    $attributes = $product->get_attributes();
    if ( ! $attributes ) {
        return;
    }
    $display_result = '';
    // 配置你需要展示的4个属性的slug,不在列表内的属性不会输出
    $allowed_attributes = ['plant-type', 'color', 'size', 'material']; // 请替换为你自己的属性slug
    foreach ( $attributes as $attribute ) {
        if ( $attribute->get_variation() ) {
            continue;
        }
        $attr_slug = $attribute->get_name();
        // 只输出配置允许的属性
        if(!in_array($attr_slug, $allowed_attributes)){
            continue;
        }
        if ( $attribute->is_taxonomy() ) {
            $terms = wp_get_post_terms( $product->get_id(), $attr_slug, 'all' );
            $tax_terms = array();
            foreach ( $terms as $term ) {
                // 改为获取属性值的slug
                $single_term = esc_html( $term->slug );
                // 修复原代码array_push未传值的bug
                array_push( $tax_terms, $single_term);
            }
            $display_result .= implode(', ', $tax_terms) . ' ';
        } else {
            $options = $attribute->get_options();
            // 非分类属性自动转换为slug格式
            $slug_options = array_map('sanitize_title', $options);
            $display_result .= esc_html( implode( ', ', $slug_options ) ) . ' ';
        }
    }
    if(!empty($display_result)){
        echo "<span class='attributeline'>| </span>" .  $display_result;
    }
}
add_action('woocommerce_shop_loop_item_title', 'cw_woo_attribute', 25);

修改说明:

  • 删除了原有输出属性名称的逻辑,仅保留属性值输出
  • 将属性值的获取从$term->name改为$term->slug,直接输出你需要的slug值
  • 修复了原代码中array_push没有传入属性值的逻辑bug
  • 增加了属性过滤配置,你可以把需要展示的4个属性的slug填入$allowed_attributes数组,避免多余属性输出
  • 适配非分类类型属性的slug转换,兼容所有属性类型

内容的提问来源于stack exchange,提问作者Raymond Meijer

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.25 08:06:04