如何为Woocommerce短码输出的属性标签与值添加独立CSS类

我正在使用一段可通过短码在前端显示Woocommerce单个商品属性的代码，需要修改代码为属性标签（attribute label）和属性值（attribute value）分别添加独立的CSS类。原代码如下：

/**
 * Attributes shortcode callback.
 */
function so_39394127_attributes_shortcode( $atts ) {

    global $product;

    if( ! is_object( $product ) || ! $product->has_attributes() ){
        return;
    }

    // parse the shortcode attributes
    $args = shortcode_atts( array(
        'attributes' => array_keys( $product->get_attributes() ), // by default show all attributes
    ), $atts );

    // is pass an attributes param, turn into array
    if( is_string( $args['attributes'] ) ){
        $args['attributes'] = array_map( 'trim', explode( '|' , $args['attributes'] ) );
    }

    // start with a null string because shortcodes need to return not echo a value
    $html = '';

    if( ! empty( $args['attributes'] ) ){

        foreach ( $args['attributes'] as $attribute ) {

            // get the WC-standard attribute taxonomy name
            $taxonomy = strpos( $attribute, 'pa_' ) === false ? wc_attribute_taxonomy_name( $attribute ) : $attribute;

            if( taxonomy_is_product_attribute( $taxonomy ) ){

                // Get the attribute label.
                $attribute_label = wc_attribute_label( $taxonomy );

                // Build the html string with the label followed by a clickable list of terms.
                // Updated for WC3.0 to use getters instead of directly accessing property.
                $html .= get_the_term_list( $product->get_id(), $taxonomy, '<li class="bullet-arrow">' . $attribute_label . ': ' , ', ', '</li>' );
            }

        }

        // if we have anything to display, wrap it in a <ul> for proper markup
        // OR: delete these lines if you only wish to return the <li> elements
        if( $html ){
            $html = '<ul class="product-attributes">' . $html . '</ul>';
        }

    }

    return $html;
}
add_shortcode( 'display_attributes', 'so_39394127_attributes_shortcode' );

修改后的代码 #

/**
 * Attributes shortcode callback.
 */
function so_39394127_attributes_shortcode( $atts ) {

    global $product;

    if( ! is_object( $product ) || ! $product->has_attributes() ){
        return;
    }

    // parse the shortcode attributes
    $args = shortcode_atts( array(
        'attributes' => array_keys( $product->get_attributes() ), // by default show all attributes
    ), $atts );

    // is pass an attributes param, turn into array
    if( is_string( $args['attributes'] ) ){
        $args['attributes'] = array_map( 'trim', explode( '|' , $args['attributes'] ) );
    }

    // start with a null string because shortcodes need to return not echo a value
    $html = '';

    if( ! empty( $args['attributes'] ) ){

        foreach ( $args['attributes'] as $attribute ) {

            // get the WC-standard attribute taxonomy name
            $taxonomy = strpos( $attribute, 'pa_' ) === false ? wc_attribute_taxonomy_name( $attribute ) : $attribute;

            if( taxonomy_is_product_attribute( $taxonomy ) ){

                // Get the attribute label.
                $attribute_label = wc_attribute_label( $taxonomy );

                // 为标签和值分别添加独立CSS类
                $label_html = '<span class="product-attribute-label">' . $attribute_label . ':</span> ';
                // 自定义属性值的HTML结构，给每个值添加独立类
                $terms = get_the_terms( $product->get_id(), $taxonomy );
                $value_html = '';
                if ( $terms && ! is_wp_error( $terms ) ) {
                    $term_links = array();
                    foreach ( $terms as $term ) {
                        $term_links[] = '<a href="' . esc_url( get_term_link( $term ) ) . '" class="product-attribute-value">' . $term->name . '</a>';
                    }
                    $value_html = implode( ', ', $term_links );
                }
                
                $html .= '<li class="bullet-arrow">' . $label_html . $value_html . '</li>';
            }

        }

        // if we have anything to display, wrap it in a <ul> for proper markup
        // OR: delete these lines if you only wish to return the <li> elements
        if( $html ){
            $html = '<ul class="product-attributes">' . $html . '</ul>';
        }

    }

    return $html;
}
add_shortcode( 'display_attributes', 'so_39394127_attributes_shortcode' );

修改说明 #

1. 属性标签：用<span class="product-attribute-label">包裹标签文本，可通过该类单独设置标签的字体、颜色、间距等样式
2. 属性值：放弃直接使用get_the_term_list的默认输出，手动遍历属性值并为每个值的链接添加product-attribute-value类，完全控制值的HTML结构和样式
3. 保留了原有的列表容器和列表项类，确保原有布局不受影响，同时新增的类可以灵活扩展样式

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