如何在WooCommerce非促销商品页面添加CSS隐藏指定元素？

嘿，这个需求其实很好实现，核心思路就是判断当前商品是否为非促销品，然后针对性输出隐藏元素的CSS代码。下面是具体的实现步骤，直接把代码加到你的子主题functions.php文件里就行（别改父主题的，不然主题更新会丢失代码）：

具体代码实现 #

/**
 * 针对WooCommerce非促销商品页面添加自定义CSS
 */
function add_custom_css_for_non_sale_products() {
    // 仅在单个商品页面执行逻辑
    if ( ! is_product() ) {
        return;
    }

    // 获取当前商品ID
    $product_id = get_the_ID();
    // 获取商品的促销价格元数据（第三个参数true确保返回单个值）
    $sale_price = get_post_meta( $product_id, '_sale_price', true );

    // 判断是否为非促销商品：促销价格为空或不存在
    if ( empty( $sale_price ) ) {
        ?>
        <style type="text/css">
            /* 这里替换成你需要隐藏的元素/类选择器 */
            .product-sale-badge,
            #limited-time-offer-section {
                display: none !important;
            }
        </style>
        <?php
    }
}
// 挂载到wp_head钩子，确保CSS在页面头部正确输出
add_action( 'wp_head', 'add_custom_css_for_non_sale_products' );

关键细节说明 #

• 判断逻辑：通过get_post_meta( $product_id, '_sale_price', true )获取商品的促销价格值，只要这个值为空，就判定为非促销商品。
• 页面范围控制：用is_product()确保代码只在单个商品页面生效，不会影响商品列表页、购物车等其他页面。
• CSS自定义：你需要把示例里的.product-sale-badge和#limited-time-offer-section替换成你实际要隐藏的元素选择器，多个选择器用逗号分隔即可。
• 样式优先级：加上!important是为了确保你的CSS能覆盖主题或插件的原有样式，如果原有样式优先级不高，也可以去掉这个声明。

注意事项 #

1. 务必使用子主题的functions.php文件，不要修改父主题文件——否则主题更新后你的代码会被覆盖丢失。
2. 添加代码后记得清除网站缓存和浏览器缓存，确保修改能及时生效。
3. 测试时要分别打开促销商品和非促销商品页面，确认隐藏效果只在非促销页面生效。

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