将WooCommerce属性标签替换为每个标签的自定义图像 [英] Replace WooCommerce attribute labels by a custom image for each

问题描述

我正在研究项目，我需要一些小组帮助.

I am working on project and I need some group help.

我正在使用woocommerce产品系统，并且在商店归档页面产品上，我正在显示attribute-label:attribute-value(就像文本一样).

I am using woocommerce product system and on shop archive page product I am showing attribute-label: attribute-value (just like text).

属性标签:属性值(例如，传输方式:手动)

attribute-label:attribute-value (ex. Transmission: Manual)

有没有一种方法可以将属性标签显示为图像?我无法添加< img src ..."/> 之类的html代码，并且CSS样式也无济于事.

Is there a way to show attribute-label as image? I can't add html code like <img src..."/> and styling with CSS doesn't help too.

我已经搜索了插件等等.但是在网络上什么也没有.

I have searched for plugins and more.. But nothing on web.

为了在产品商店页面上显示属性，我使用了此功能:

To show attributes on product shop page i have used this function:

function isa_woocommerce_all_pa(){


    global $product;
    $attributes = $product->get_attributes();

    if ( ! $attributes ) {
        return;
    }

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

    foreach ( $attributes as $attribute ) {


        // skip variations
        if ( $attribute->get_variation() ) {
        continue;
        }
        $name = $attribute->get_name();
        if ( $attribute->is_taxonomy() ) {

            $terms = wp_get_post_terms( $product->get_id(), $name, 'all' );
            // get the taxonomy
            $tax = $terms[0]->taxonomy;
            // get the tax object
            $tax_object = get_taxonomy($tax);
            // get tax label
            if ( isset ( $tax_object->labels->singular_name ) ) {
                $tax_label = $tax_object->labels->singular_name;
            } elseif ( isset( $tax_object->label ) ) {
                $tax_label = $tax_object->label;
                // Trim label prefix since WC 3.0
                if ( 0 === strpos( $tax_label, 'Product ' ) ) {
                   $tax_label = substr( $tax_label, 8 );
                }                
            }


            $out .= '<li class="' . esc_attr( $name ) . '">';
            $out .= '<span class="attribute-label">' . esc_html( $tax_label ) . ': </span> ';
            $out .= '<span class="attribute-value">';
            $tax_terms = array();
            foreach ( $terms as $term ) {
                $single_term = esc_html( $term->name );
                // Insert extra code here if you want to show terms as links.
                array_push( $tax_terms, $single_term );
            }
            $out .= implode(', ', $tax_terms);
            $out .= '</span></li>';

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

    $out .= '</ul>';

    echo $out;
}
add_action('woocommerce_single_product_summary', 'isa_woocommerce_all_pa', 25);

有人可以帮我吗?如何使用图片更改属性标签?

Can someone help me with this? How to change attribute-label with image?

推荐答案

自WC 3.2+起已更新

Updated since WC 3.2+

由于产品"属性没有图像，因此应在活动主题中的文件夹 images (如果不存在)中的子文件夹中创建一个属性 .

As Product attributes dont have images, you should create a in your active theme a folder images (if it doesn't exist) and inside a subfolder attributes.

对于每个产品属性，您都必须在该子文件夹 属性 内添加图片，该名称将作为属性的名称(子标签).例如，对于颜色"属性，您将必须添加名为 color.jpg 的图像.

For each product attribute, you will have to add an image inside this subfolder attributes, which name will be the name of your attribute (the slug). For example for "Color" attribute you will have to add an image named color.jpg.

然后，我对您的代码进行了一些更改，以使其正常运行.仅显示产品中为每个属性设置的术语.对于每个属性，您都会获得一张图片.

Then I have make some changes in your code, to get this working. Only the terms set in the product for each attribute will be displayed. For each attribute you will get an image.

这是代码:

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文件或任何插件文件中.

此代码已经过测试并且可以正常工作.

This code is tested and work.

这篇关于将WooCommerce属性标签替换为每个标签的自定义图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！