Woocommerce 以不同颜色和两条线显示含税和不含税价格

Posted 2023-02-19

【中文标题】Woocommerce 以不同颜色和两条线显示含税和不含税价格

【英文标题】：Woocommerce Show Prices With Tax and Without Tax in different colors and on two lines

【发布时间】：2022-01-13 03:26:47

【问题描述】：

我正在使用带有 Flatsome 主题的 Woocommerce。我想显示每种产品的不含税和含税价格。我已经成功地做到了。但我无法更改含税价格的颜色。当我使用以下 CSS 时，两个价格都发生了变化。我想要两种价格的不同颜色。我还想在两条线上显示两个价格。

Customise -> Style -> Custom CSS

.product .price .amount 
 color: #900C3F ;
 

HTML

<span class="woocommerce-Price-amount amount">
    <bdi><span class="woocommerce-Price-currencySymbol">&#36;</span>4.50</bdi>
</span>
<span class="ex-tax"> (ex. tax)</span> 
    <small class="woocommerce-price-suffix"><span class="woocommerce-Price-amount amount">
        <bdi><span class="woocommerce-Price-currencySymbol">&#36;</span>4.95</bdi>
    </span>
</small>
<span class="inc-tax"> (incl. tax)</span>

【问题讨论】：

您是如何显示含税和不含税价格的？

WP Dashboard-> woocommerce -> 设置 - 税选项卡选项：输入含税价格：否，选项：价格显示后缀：类型（不含税）price_including_tax（含税）

请同时分享 html。

这就是我所做的一切。首先定义税款，然后按照上述步骤操作。没有使用html

不，我的意思是你可以检查元素并检查 HTML，我在下面添加了答案。

【参考方案1】：

你可以像这样添加 CSS。

.woocommerce-price-suffix span.woocommerce-Price-amount.amount 
    color: blue;

span.woocommerce-Price-amount.amount 
    color: red;

经过测试且有效

按照 OP 要求

将(ex tax) price_including_tax (inc tax) 替换为price_including_tax

试试下面的代码。代码将进入您的活动主题 functions.php 文件。

function add_custom_css()
    if( is_product() )
        ?>
        <style type="text/css">
            .woocommerce-price-suffix span.woocommerce-Price-amount.amount 
                color: blue;
            
            span.woocommerce-Price-amount.amount 
                color: red;
            
            span.ex-tax 
                color: red;
            
            span.inc-tax 
                color: blue;
            
        </style>
        <?php
    

add_action( 'wp_head', 'add_custom_css', 10, 1 );

function add_woocommerce_get_price_suffix( $html, $WC_Product, $price, $qty )
    $html = '<span class="ex-tax">(ex tax)</span>'.$html.'<span class="inc-tax">(inc tax)</span>';
    return $html;

add_filter( 'woocommerce_get_price_suffix', 'add_woocommerce_get_price_suffix', 999, 4 );

经过测试且有效

【讨论】：

谢谢，它成功了。如何将 ex tax 更改为 red，inc tax 更改为 blue？

这也会将购物车中的所有价格变为红色

哇，这对我有用。非常感谢。我花了很多时间。

还有一个问题是，在产品页面上，产品页面上的文本尚未显示为基本颜色。我检查了代码，添加了除税类，但对颜色没有影响。我已经编辑了 CSS 并添加了 !important 颜色但徒劳无功。另外，不含税的商品也包含文字后缀。

请在您的问题中添加屏幕截图和 HTML。