如何在小数点下显示单位（Woocommerce 价格）？

Posted 2023-03-25

【中文标题】如何在小数点下显示单位（Woocommerce 价格）？

【英文标题】：How to display unit under the decimal (Woocommerce price)?

【发布时间】：2021-12-22 16:00:12

【问题描述】：

问题： 我需要在小数点下显示单位。 所以我使用以下代码分隔小数部分。 但是显示是这样的（单位在价格旁边）：

请告诉我如何将单位放在小数点下，像这样？前端 html 显示：

<span class="price">
   <span class="woocommerce-Price-amount amount">
      <bdi><span class="woocommerce-Price-currencySymbol">$</span>2<sup>85</sup></bdi>
   </span>
   <span class="uom">ea</span>
</span>

单独的小数部分（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 ) 
    $unit = number_format( intval( $price ), 0, $decimal_separator, $thousand_separator );
    $decimal = sprintf( '%02d', ( $price - intval( $price ) ) * 100 );
    return $unit . '<sup>' . $decimal . '</sup>';

添加单位（WooCommerce 度量单位插件：class-wc-uom-public.php）：

public function wc_uom_render_output( $price ) 
        global $post;
        // Check if uom text exists.
        $woo_uom_output = get_post_meta( $post->ID, '_woo_uom_input', true );
        // Check if variable OR UOM text exists.
        if ( $woo_uom_output ) :
            $price =  $price . ' <span class="uom">' . esc_attr( $woo_uom_output, 'woocommerce-uom' ) . '</span>';
            return $price;
        else :
            return $price;
        endif;
    

谢谢你。

【参考方案1】：

这是一个基于 CSS 的解决方案：

<style>
    .price 
        font-size: 5em;
    
    sup 
        font-size: .5em;
    
    .uom 
        position: relative;
        left: -1.4em;
        font-size: .5em;
    
</style>

当然，您需要使用字体大小和位置来满足您的特定需求

【讨论】：

嗨 betouche：非常感谢您的帮助，您的 css 代码运行良好，感谢 betouche :)