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

Problem:
I need to display unit under the decimal.
So I separated the decimal part using the following code.
But it shows like this (unit is next to the price):

Would you please let me know how to put the unit under the decimal, like this?

Frontend HTML displays:

<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>

Separate decimal part (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( 'd', ( $price - intval( $price ) ) * 100 );
    return $unit . '<sup>' . $decimal . '</sup>';
}

Add Unit (WooCommerce Unit Of Measure Plugin: 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 >' . esc_attr( $woo_uom_output, 'woocommerce-uom' ) . '</span>';
            return $price;
        else :
            return $price;
        endif;
    }

Thank you.

CodePudding user response：

Here's a CSS-based solution:

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

Of course, you'll need to play with font-sizes and positioning to suit your specific needs