WooCommerce：为过滤器钩子函数返回的HTML元素添加CSS类

你只需在原函数的<small>标签中加入自定义CSS类，就能单独对"ex. TAX"和"inc. TAX"文本设置样式。修改后的代码如下：

add_filter( 'woocommerce_get_price_suffix','bbloomer_add_price_suffix_price_inc_tax', 99, 4 );
   
function bbloomer_add_price_suffix_price_inc_tax( $suffix, $product, $price, $qty )
{
    $suffix = ' <small class="price-ex-tax">ex. TAX</small> - ' 
              . wc_price( wc_get_price_including_tax( $product ) ) 
              . ' <small class="price-inc-tax">inc. TAX</small>';
    return $suffix;
}

样式化示例 #

添加完CSS类后，你可以在主题自定义CSS中写入类似以下的样式代码，按需调整外观：

/* 不含税文本样式 */
.price-ex-tax {
    color: #666;
    font-size: 0.8em;
    font-style: italic;
}

/* 含税文本样式 */
.price-inc-tax {
    color: #2ecc71;
    font-size: 0.8em;
    font-weight: bold;
}

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