Search code examples
phpwoocommercecurrency-formatting

Stylize woocommerce price decimals

I want to stylize the decimals in the price tag and want to delete zero decimals (before 190,00) and it should be (after 190,-)

And the decimals after the "," i want to make smaller as in this demo picture:

demo

So as first I wanted to delete the decimals with this line in functions.php

add_filter( 'woocommerce_price_trim_zeros', '__return_true' );

Atleast it deleted the zero as it should be:

enter image description here

And this is how the price with decimals looks like witch i want to make smaller:

enter image description here

After some searching I found aa piece of code with it made it possible to make the decimals smaller. So I did this with this piece of code:

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 . $decimal_separator. '<sup>' . $decimal . '</sup>';

}

So now the price looks good but the strange thing is, the price is 1 cent lower then before makeing it smaller!

enter image description here

The problem is now that the price where the zere decimals where gone, are now back again....

enter image description here

I checked google for hours and tried a lot of stuff, I really in trouble. I hope some one can put me in the right direction.

Thanks

Solution

  • You can look at this answer Check if number is decimal to check if the price is a decimal.

    Then you get the decimal part as an integer and put it inside the <sup> tag.

    If you want, you can apply your own custom CSS style to the <sup> tag to format it as you wish.

    EDIT: Fixed one-position decimal formatting error as reported by @ClawDuda.

    // Edit the output by showing decimals with the HTML <sup> tag.
add_filter( 'formatted_woocommerce_price', 'custom_formatted_woocommerce_price', 10, 5 );
function custom_formatted_woocommerce_price( $formatted_price, $price, $decimal_number, $separator, $thousand_separator ) {
    // Gets the integer and decimal part of the product price.
    $raw_price = explode( $separator, $price );
    $int       = $raw_price[0];
    $decimals  = isset( $raw_price[1] ) ? $raw_price[1] : 0;
    // Edit the output.
    $formatted_price = '<span class="int">' . $int . $separator . '</span><sup>' . str_pad( $decimals, $decimal_number, '0', STR_PAD_RIGHT ) . '</sup>';
    return $formatted_price;
}

    Output:

    enter image description here

    The code has been tested and works. Add it to your active theme's functions.php.