显示 WooCommerce 自定义产品属性和单个产品的所有条款

Question

我使用自定义 function 在 WooCommerce 单个产品页面上创建了六个自定义属性。 它们包括：一个图标、一个 label 和术语。

Based on Replace WooCommerce attribute labels by a custom image for each answer code, I used the following function (with custom HTML markup, different from the markup in the WooCommerce product-attributes.php template) :

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

    $attributes = $product->get_attributes();

    if ( ! $attributes ) return;

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

    foreach ( $attributes as $attribute ) {

        if ( $attribute->get_variation() ) continue;

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

            $out .= '<div class="' . esc_attr( $taxonomy ) . ' single-attribute">';

            $out .= '<div><img class="attribute-image" src="'.get_stylesheet_directory_uri().'/woocommerce/attributes/'.$name.'.svg" alt="Attribute '.$label.'"/></div>';

            $out .= '<div class="attribute-label '.$label.'">'.$label_name.'</div>';
            
            $out .= '<div class="attribute-values">';

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

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

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

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

    echo $out;
}

function 工作正常，但是它有一个问题：如果特定属性的条件多于一个（例如 colors：红色，蓝色，绿色），屏幕上 ZC1C425268E68384F14AB5074C17A 的最后一个值打印数组

我阅读了文档并进行了许多测试，并检查了 CSS 没有问题。 我还在 StackOverflow 和在线阅读了几乎所有关于该主题的问题的答案，但我找不到答案。

有没有人可以帮助我了解错误在哪里？

Answer 1

问题来自您的代码中的以下内容：

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

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

            $out .= implode(', ', $term_names);

你可以用这个代替：

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

            $term_names = []; // Initializing

            // Loop through each terms
            foreach ( $terms as $term_name ) {
                $term_names[] = $term_name;
            }

            $out .= implode(', ', $term_names);

或者用一行代码更好：

            $out .= $product->get_attribute( $taxonomy );