WooCommerce归档页属性显示限制及品牌属性可点击问题求助

一、保留属性可点击特性的指定属性调用 #

之前用get_attribute()只能获取纯文本，丢失了属性术语的可点击链接。要保留链接，需要直接获取该属性对应的分类术语，再生成带链接的HTML：

add_action( 'woocommerce_shop_loop_item_title', 'fdev_display_attribute_brand_with_links', 10 );
function fdev_display_attribute_brand_with_links() {
    global $product;
    
    $taxonomy = 'pa_merk';
    $terms = get_the_terms( $product->get_id(), $taxonomy );
    
    if ( empty( $terms ) || is_wp_error( $terms ) ) {
        return;
    }

    echo '<div class="wc-attribute-brand" style="margin-top: 20px;">';
    echo '<span style="font-size:16px; font-weight:600;">' . __( '品牌 : ', 'woocommerce' ) . '</span>';
    echo '<div class="attribute-brand-list">';
    
    foreach ( $terms as $term ) {
        // 生成带链接的术语标签
        echo '<a href="' . get_term_link( $term, $taxonomy ) . '" class="attribute-term">' . esc_html( $term->name ) . '</a>';
    }
    
    echo '</div></div>';
}

二、添加数量限制与「显示更多」按钮 #

要实现前5个属性显示，超出部分隐藏并添加按钮，需要结合PHP控制输出和JS控制显示隐藏：

add_action( 'woocommerce_shop_loop_item_title', 'fdev_display_attribute_brand_with_limit', 10 );
function fdev_display_attribute_brand_with_limit() {
    global $product;
    
    $taxonomy = 'pa_merk';
    $terms = get_the_terms( $product->get_id(), $taxonomy );
    
    if ( empty( $terms ) || is_wp_error( $terms ) ) {
        return;
    }

    $total_terms = count( $terms );
    $show_limit = 5; // 设定显示数量
    $show_more = $total_terms > $show_limit;

    echo '<div class="wc-attribute-brand" style="margin-top: 20px;">';
    echo '<span style="font-size:16px; font-weight:600;">' . __( '品牌 : ', 'woocommerce' ) . '</span>';
    echo '<div class="attribute-brand-list">';
    
    foreach ( $terms as $index => $term ) {
        $class = $index >= $show_limit ? 'attribute-term hidden' : 'attribute-term';
        echo '<a href="' . get_term_link( $term, $taxonomy ) . '" class="' . esc_attr( $class ) . '">' . esc_html( $term->name ) . '</a>';
    }
    
    if ( $show_more ) {
        echo '<button class="show-more-brands">显示更多</button>';
    }
    
    echo '</div></div>';

    // 嵌入JS控制显示隐藏
    if ( $show_more ) {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const showMoreButtons = document.querySelectorAll('.show-more-brands');
                showMoreButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        const hiddenTerms = this.parentElement.querySelectorAll('.attribute-term.hidden');
                        hiddenTerms.forEach(term => term.classList.remove('hidden'));
                        this.style.display = 'none';
                    });
                });
            });
        </script>
        <style>
            .attribute-term.hidden { display: none; }
            .attribute-term { margin-right: 8px; padding: 4px 8px; background: #f0f0f0; border-radius: 4px; }
            .show-more-brands { margin-left: 8px; padding: 4px 8px; cursor: pointer; border: none; background: #eee; border-radius: 4px; }
        </style>
        <?php
    }
}

代码说明 #

• get_the_terms()获取商品对应的属性术语，保留了术语的链接功能，点击可跳转到该属性的归档页
• 通过$index >= $show_limit判断是否隐藏超出数量的术语
• 嵌入的JS实现点击按钮显示隐藏的术语，同时隐藏按钮
• 附加的基础样式让显示更美观，可根据自己的主题调整

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