用自定义图像替换 WooCommerce 属性标签

Question

我正在做项目，我需要一些团队帮助。

我正在使用 woocommerce 产品系统，在商店存档页面产品上我显示属性标签：属性值（就像文本一样）。

属性标签:属性值（例如传输：手动）

有没有办法将属性标签显示为图像？我无法添加 html 代码，例如 <img src..."/>，使用 CSS 的样式也无济于事。

我已经搜索了插件等..但在网上没有任何内容。

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

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);

有人可以帮我解决这个问题吗？如何用图片更改属性标签？

Answer 1

Updated since WC 3.2+

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

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

的图像

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

代码如下：

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

此代码已经过测试并有效。

用自定义图像替换 WooCommerce 属性标签

Replace WooCommerce attribute labels by a custom image for each

css

php

wordpress

product

woocommerce