Woocommerce 属性标签作为图像

Question

我正在使用 woocommerce 并且在商店产品页面上我显示了`attribute-label: attribute-value。

例如：Tire: Snow

有没有办法将属性标签显示为图像？

add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25);
function isa_woocommerce_all_pa(){
    global $product;

    $attributes = $product->get_attributes();

    if ( ! $attributes ) return;

    $out = '<ul class="custom-attributes">';

    foreach ( $attributes as $attribute ) {

        if ( $attribute->get_variation() ) continue; // skip variations

        if ( $attribute->is_taxonomy() ) {
            $taxonomy = $attribute->get_name();
            $taxo_obj = $attribute->get_taxonomy_object();
            $name = $taxo_obj->name;
            $label = $taxo_obj->label;

            $out .= '<li class="' . esc_attr( $taxonomy ) . '">';

            ## ATTRIBUTE IMAGE ##
            // For a child theme use get_stylesheet_directory_uri() instead.
            $out .= '<img class="attribute-image" src="'.get_template_directory_uri().'/images/attributes/'.$name.'.jpg" alt="Attribute '.$label.'"/> ';
            $out .= '<span class="attribute-values">';

            $terms = wp_get_post_terms( $product->get_id(), $taxonomy, array('fields' => 'names') );

            foreach ( $terms as $term_name )
                $term_names['name'] = $term_name;

            $out .= implode(', ', $term_names);
            $out .= '</span></li>';

        } else {
            $value_string = implode( ', ', $attribute->get_options() );
            $out .= '<li class="' . sanitize_title($taxonomy) . ' ' . sanitize_title( $value_string ) . '">';
            $out .= '<span class="attribute-label">' . $taxonomy . ': </span> ';
            $out .= '<span class="attribute-value">' . esc_html( $value_string ) . '</span></li>';
        }
    }
    $out .= '</ul>';

    echo $out;
}

Answer 1

自 WooCommerce 3.2+ 起，WC_Product_Attribute 对象语法发生了变化。我已经更正了代码，它应该也适用于您……这将显示在单个产品页面上（但不会显示在商店页面上）：

add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25);
function isa_woocommerce_all_pa(){
    global $product;

    $attributes = $product->get_attributes();

    if ( ! $attributes ) return;

    $out = '<ul class="custom-attributes">';

    foreach ( $attributes as $attribute ) {

        if ( $attribute->get_variation() ) continue; // skip variations

        if ( $attribute->is_taxonomy() ) {
            $taxonomy = $attribute->get_name();
            $taxo_obj = $attribute->get_taxonomy_object();
            $name = $taxo_obj->attribute_name; // <== Corrected
            $label = $taxo_obj->attribute_label; // <== Corrected

            $out .= '<li class="' . esc_attr( $taxonomy ) . '">';

            ## ATTRIBUTE IMAGE ##
            // For a child theme use get_stylesheet_directory_uri() instead.
            $out .= '<img class="attribute-image" src="'.get_template_directory_uri().'/images/attributes/'.$name.'.jpg" alt="Attribute '.$label.'"/> ';
            $out .= '<span class="attribute-values">';

            $terms = wp_get_post_terms( $product->get_id(), $taxonomy, array('fields' => 'names') );

            foreach ( $terms as $term_name )
                $term_names['name'] = $term_name;

            $out .= implode(', ', $term_names);
            $out .= '</span></li>';

        } else {
            $value_string = implode( ', ', $attribute->get_options() );
            $out .= '<li class="' . sanitize_title($taxonomy) . ' ' . sanitize_title( $value_string ) . '">';
            $out .= '<span class="attribute-label">' . $taxonomy . ': </span> ';
            $out .= '<span class="attribute-value">' . esc_html( $value_string ) . '</span></li>';
        }
    }
    $out .= '</ul>';

    echo $out;
}

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件。

由于产品属性没有图像，您应该在活动主题中创建一个文件夹图像（如果它不存在）和一个子文件夹属性。

对于每个产品属性，您必须在此子文件夹属性中添加一个图像，该名称将是您的属性的名称（slug）。例如，对于“Color”属性，您必须添加一个名为 color.jpg.

的图像

Woocommerce 属性标签作为图像

Woocommerce attribute label as an image

product

woocommerce