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

Question

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

请告诉我如何将单位放在小数点后面，就像这样？


前端 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;
    }

谢谢。

Answer 1

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

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

当然，您需要调整字体大小和位置以满足您的特定需求