Search code examples
phpcsswordpresswoocommercefrontend

Stylization of decimals as uppercase in WooCommerce frontend only

I'd like your help for a specific case. I was able to make the stylization of the price decimals exactly as I wished on my WooCommerce store.

However, the problem is that now this code also applies for my WooCommerce backend. Do you know how I could make that the below code do not impact the WooCommerce backend pages?

/**
 * ADJUST THE DECIMALS STYLE AS UPPERCASE (COMPLEMENTARY TO CSS)
 */
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>';
}

/* GENERAL - ADJUST THE DECIMALS STYLE AS UPPERCASE (COMPLEMENTARY TO PHP) */
.price .amount {
  font-size: 120%;
}
.sub, sup {
    margin-left: 2px;
    margin-right: 2px;
    font-size: 60%;
}

enter image description here

Solution

  • Update - Use this more recent answer:
    Custom stylization of decimals breaks default WooCommerce calculations

    Simply use the conditional tag is_admin() as follow:

    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 ) {
    // Not on backend
    if ( ! is_admin() ) {
        $unit = number_format( intval( $price ), 0, $decimal_separator, $thousand_separator );
        $decimal = sprintf( '%02d', ( $price - intval( $price ) ) * 100 );
        return $unit . '<sup>' . $decimal . '</sup>';
    }
    return $formatted_price;
}

    Documentation: WordPress conditional tag is_admin()