Superscript the decimals of a WooCommerce price. And then rewrite the code to make it better.
A member of the Advanced WooCommerce Facebook group asked how to superscript the decimals portion of the price. I did it two ways, the second better than the first.
I knew that the wc_price() function displays the prices in WooCommerce from my work on displaying only the sale price. Using the ‘wc_price‘ filter I copied the markup that wc_price() generated and wrapped the decimals in <sup> tags. Nice and simple and done!
Another member of the group replied on the thread that the code didn’t work correctly if the position of the currency symbol is on the right or there is a space between the number and the currency symbol. My code was essentially ignoring all the Currency options in WooCommerce settings.
I returned to the wc_price() function and found another filter: ‘formatted_woocommerce_price‘. This formats the price number before the currency symbol is included. This filter is much better than the ‘wc_price‘ one because it does not require knowing the markup that WooCommerce wraps the price in and it does not require calling the get_woocommerce_currency_symbol() function a second time. It does need to call the number_format() function again. I am assuming that it’s a fast function because it’s built into PHP.
I am happy with the code because it works for all Currency options settings, is faster (because it doesn’t call WooCommerce functions twice) and more robust (because it doesn’t include markup). I was delighted that the failings of the original code were pointed out. I always want to make my code better.
Aside: It handles if the number of decimals is changed but the value displayed seems to be wrong. I haven’t figured out why – it’s like it’s something with sprintf(). Bizarre.
As the decimals are now within <sup> tags they can be easily targetted with CSS. Maybe they could be underlined, put in italics or have their colour changed.