当产品具有多个类别时，获取主要的父产品类别

Question

在我公司的Wordpress网站上工作，该网站最初是由其他人设立的。 Here's a product page你可以看到我正在引用的内容......

为我们创建了“皮肤状况”，“皮肤类型”和“方案”部分。我现在正在尝试复制行为以创建“如所见”部分。它们通过WooCommerce类别工作 - 在产品页面上我们有大量的类别列表，我们会检查相应的那些，并显示图标。

最终结果在functions.php和style.css中完成。使用的PHP如下：

add_action('woocommerce_product_meta_end', 'skin_condition');

function skin_condition() {

    echo '<div class="skin-icons">';
    echo '<div class="skin-condition-title"><h4>Skin Condition</h4></div>';

    if ( is_product() ){

        $terms = get_the_terms( $post->ID, 'product_cat' );

        foreach ( $terms as $term ){

            $category_name = $term->name;
            $category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
            $image = wp_get_attachment_url($category_thumbnail); 

            echo '<div class="skin-condition">';  
            echo '<img class="'.$term->slug.'" title="'.$category_name.'" src="'.$image.'">';
            echo '</div>';
        }
    }
    echo '</div>';
}

因此，这最终会拉动应用于产品的所有类别的缩略图。然后CSS用于隐藏每个部分中我们不想要的内容：

.skin-condition img.glycolic, .skin-condition img.citrix, .skin-condition img.replenix, 
.skin-condition img.glycolix, .skin-condition img.srs, .skin-condition img.solvere, 
.skin-condition img.resurfix, .skin-condition img.rebrightalyze, .skin-condition img.benzaderm, 
.skin-condition img.acne-regimen, .skin-condition img.cleansetone, .skin-condition img.hydrate, 
.skin-condition img.prevent, .skin-condition img.protect, .skin-condition img.repair, 
.skin-condition img.antioxidants, .skin-condition img.body-care, .skin-condition img.cleansers, 
.skin-condition img.exfoliators, .skin-condition img.eye, .skin-condition img.glycolic, 
.skin-condition img.kits-systems, .skin-condition img.masques-peels, .skin-condition img.masques-peels-specialty, 
.skin-condition img.moisturizers, .skin-condition img.retinols, .skin-condition img.sunscreens, 
.skin-condition img.toners, .skin-condition img.new, .skin-condition img.dry, 
.skin-condition img.normal, .skin-condition img.oily, .skin-condition img.sensitive, 
.skin-condition img.dermatopix, .skin-condition .gly-sal, .skin-condition .elite, 
.skin-condition .peels-specialty, .skin-condition .glycolix-elite, .skin-condition .best-sellers, 
.skin-condition .replenix-acne-solutions, .skin-condition .press-mentions  {
    display: none;
}

所以我认为有一种方法可以避免使用CSS。
我可以在PHP的每个部分中只调用一个父类吗？而不是所有加载和运行“display: none;”？

如果有帮助的话，几乎没有类别的视觉效果：

谢谢！

Answer 1

  

更新：要避免白屏，您必须添加 global $post; 。或者，您也可以使用 global $product; 和 $product->id （而不是 $post->ID ）< / em>的

要获取父类别（主要类别），您必须使用 $term->parent ，这样：

add_action( 'woocommerce_product_meta_end', 'skin_condition' );
function skin_condition() {

    global $post; // or global $product; and $product->id in get_the_terms() function

    if ( is_product() ){

        echo '<div class="skin-icons">';
        echo '<div class="skin-condition-title"><h4>Skin Condition</h4></div>';

        $terms = get_the_terms( $post->ID, 'product_cat' );

        // First loop
        foreach ( $terms as $term ){

            // We target the child categories to get the parent ones (based on your screen shot)
            if( $term->parent != 0 ){
                // Storing the parent term objects
                $parent_terms_ids[] = $term->parent;
            }
        }

        // Second loop
        foreach ( $parent_terms_ids as $term_id ){

            // get the object term
            $parent_term = get_term( $term_id, 'product_cat' );

            // Only Main parent terms
            if( $parent_term->parent == 0 ){

                $category_thumbnail = get_woocommerce_term_meta( $term_id, 'thumbnail_id', true );
                $term_image = wp_get_attachment_url($category_thumbnail);

                echo '<div class="skin-condition">';
                echo '<img class="'.$parent_term->slug.'" title="'.$parent_term->name.'" src="'.$term_image.'">';
                echo '</div>';
            }
        }
        echo '</div>';
    }
}

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

此代码经过测试并有效。