Woocommerce以不同的顏色和兩條線顯示含稅和不含稅的價格-有解無憂

我正在使用帶有 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>

Woocommerce 以不同的顏色和兩條線顯示含稅和不含稅的價格

uj5u.com熱心網友回復：

您可以像這樣添加 CSS。

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

測驗和作業

Woocommerce 以不同的顏色和兩條線顯示含稅和不含稅的價格

根據請求的 OP

替換(ex tax) {price_including_tax} (inc tax) 為{price_including_tax}

Woocommerce 以不同的顏色和兩條線顯示含稅和不含稅的價格

試試下面的代碼。代碼將進入您的活動主題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 >(ex tax)</span>'.$html.'<span >(inc tax)</span>';
    return $html;
}
add_filter( 'woocommerce_get_price_suffix', 'add_woocommerce_get_price_suffix', 999, 4 );

測驗和作業

Woocommerce 以不同的顏色和兩條線顯示含稅和不含稅的價格

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/377579.html

標籤：WordPress的求购产品

上一篇：移動視圖始終將寬度視為980像素。誰能幫我發現什么問題？

下一篇：woocommerce，如何為購買日期創造條件？