WooCommerce：当元素为空时隐藏 css 属性答案

【问题标题】：WooCommerce: Hide css propriety when an element is emptyWooCommerce：当元素为空时隐藏 css 属性
【发布时间】：2016-10-06 00:35:34
【问题描述】：

我尝试将自定义字段添加到我网站商店页面的产品列表中。我在functions.php 文件中使用了这段代码：

add_action( 'woocommerce_after_shop_loop_item_title', 'ins_woocommerce_product_excerpt', 3);  

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

if (!function_exists('ins_woocommerce_product_excerpt'))
{
    function ins_woocommerce_product_excerpt() {

        global $post;
        $item = get_post_meta( $post->ID, 'item12', true );

        if ( $item !== "" || is_home() || is_shop() || is_product_category() || is_product_tag() ) {


            echo '<span class="item12"><em>';
            echo ( $item );
            echo '</em></span>';

        }
    }
}

代码有效并显示自定义字段（带有用css制作的绿色标签），在商店页面中的图像产品上方。

css代码：

.item12 {
    position: absolute;
    margin-top: -3.750em;
    z-index: 8;
    color: #FFFFFF;
    display: block;
    color: #FFFFFF;
    text-shadow: black 0.063em 0.063em 0.313em;
    font-weight: 800;
    font-size: 1.125em;
    background-color: rgba(89, 140, 31, 0.71);
    border-radius: 0.438em;
    padding: 0.313em 0.313em 0.313em 0.313em;
    position: absolute;
    /* margin-top: -100px; */
    margin-left: 9.375em;
}

问题是当自定义字段为空时，图像上会出现一个绿点。

如何在自定义字段不为空时才显示标签？

谢谢。

【问题讨论】：

标签： php html css wordpress woocommerce

【解决方案1】：

像这样在function.php中添加新代码：

add_action( 'woocommerce_after_shop_loop_item_title', 'ins_woocommerce_product_excerpt', 3);  

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

if (!function_exists('ins_woocommerce_product_excerpt'))
{
    function ins_woocommerce_product_excerpt() {

        global $post;
        $item = get_post_meta( $post->ID, 'item12', true );

        if ( $item !== "" || is_home() || is_shop() || is_product_category() || is_product_tag() ) {

            if(!empty($item)){
                echo '<span class="item12"><em>';
                echo ( $item );
                echo '</em></span>';
            }
        }
    }
}

【讨论】：