如何在小数点下显示单位（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>

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

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

How to display unit under the decimal (Woocommerce price)?

php

wordpress

decimal

woocommerce

price