WooCommerce店铺网格布局中展示分类描述的实现问题咨询

你之前操作失败有两个核心原因：一是调用了针对文章分类的category_description()方法，没有指定WooCommerce的product_cat商品分类法，拿不到正确的分类描述；二是在h4标签内部插入元素，不符合HTML规范，容易被主题自带的过滤器过滤掉。

1 标题正下方显示描述的代码修改 #

直接在原有代码的</h4>闭合标签外的同级位置插入描述输出代码即可，修改后的完整代码如下：

<div class="category-grid-item">
    <a class="category-img" href="<?php echo esc_url( get_term_link( $c->slug, 'product_cat' ) ); ?>">
        <?php
            $thumbnail_id = get_term_meta( $c->term_id, 'thumbnail_id', true );
            $image        = wp_get_attachment_image_src( $thumbnail_id, 'large' );
            $image        = isset( $image[0] ) ? $image[0] : wc_placeholder_img_src();

            if ( isset( $image ) ) {
                ?>
                <img src="<?php echo esc_url( $image ); ?>" alt="<?php echo esc_attr( $c->name ); ?>" />
                <?php
            }
        ?>
    </a>
    <h4 class="category-title">
        <?php echo esc_html( $c->name ); ?><span class="count"><?php echo esc_attr( $c->count ); ?></span>
    </h4>
    <?php 
    // 输出商品分类描述
    $cat_desc = term_description( $c->term_id, 'product_cat' );
    if ( ! empty( $cat_desc ) ) : ?>
        <div class="category-description">
            <?php echo wp_kses_post( $cat_desc ); ?>
        </div>
    <?php endif; ?>
</div>

2 悬浮浮层显示描述的实现方案 #

如果需要做鼠标hover到分类卡片才显示描述的浮层效果，添加完上述描述代码后，在主题自定义CSS面板加入以下样式即可：

/* 给分类卡片加相对定位，作为浮层的定位父级 */
.category-grid-item {
    position: relative;
}
/* 浮层默认隐藏样式 */
.category-description {
    position: absolute;
    /* 调整下面的数值可修改浮层显示位置 */
    bottom: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 12px 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99;
    margin-bottom: 6px;
    border-radius: 4px;
}
/* hover时显示浮层 */
.category-grid-item:hover .category-description {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 4px);
}

3 注意事项 #

• 输出分类描述使用wp_kses_post()方法，既能保留描述中预设的HTML格式，也能过滤恶意代码，安全性更高
• 如果主题有缓存，修改代码后需要清空缓存才能看到效果

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