首页 > 解决方案 > 如何在商店页面(Woocommerce)上显示两种不同的价格格式?

问题描述

问题:
我需要像这样显示价格(一个带有 sup 标签十进制和其他带有正常价格格式的价格),所以,我添加了以下代码。但是代码显示是这样的(所有的 Was、Save 和 Sale 价格都显示 sup tag 十进制)。 请告诉我如何显示“was”和“save”的正常价格格式?Sup 标签十进制(functions.php):
在此处输入图像描述

在此处输入图像描述




add_filter( 'formatted_woocommerce_price', 'ts_woo_decimal_price', 10, 5 );
function ts_woo_decimal_price( $formatted_price, $price, $decimal_places, $decimal_separator, $thousand_separator ) {
    $price_format = number_format( intval( $price ), 0, $decimal_separator, $thousand_separator );
    $decimal = sprintf( '%02d', ( $price - intval( $price ) ) * 100 );
    return $price_format . '<sup>' . $decimal . '</sup>';
}

将价格显示为“已保存”(functions.php):
add_filter( 'woocommerce_get_price_html', 'bbloomer_simple_product_price_format', 10, 2 );
function bbloomer_simple_product_price_format( $price, $product ) {
   if ( $product->is_on_sale() && $product->is_type('simple') ) {
      $info_price = sprintf( __( '<div class="was-now-save" style="padding:0 10px 0 10px;"><div class="was">Was: %1$s</div><div class="save">Save: %3$s</div></div>', 'woocommerce' ), wc_price ( $product->get_regular_price() ), wc_price( $product->get_sale_price() ), wc_price( $product->get_regular_price() - $product->get_sale_price() )  );      
   }
   return '<div style="display:flex; align-items: center; justify-content: center;">' . $price . '<span>' . $info_price . '</span></div>';
}

前端 HTML:
<span class="price">
   <div style="display:flex; align-items: center; justify-content: center;">
      <del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>3<sup>20</sup></bdi></span></del>
      <ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>3<sup>14</sup></bdi></span></ins> <span class="uom">ea</span>
      <span><div class="was-now-save" style="padding:0 10px 0 10px;"><div class="was">Was: <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>3<sup>20</sup></bdi></span></div><div class="save">Save: <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>0<sup>05</sup></bdi></span></div></div></span>
   </div>
</span>



谢谢你。

标签: javascriptphpcsswordpresswoocommerce

解决方案


推荐阅读