• Resolved Tad

    (@tatifox)


    Hello,

    How can I style the decimal part of product price? I have a price tag for 15.99, I want to make the .99 decimal smaller and also how can I add a description like this “15.99 Save 10%”.

    With Gratitude

Viewing 11 replies - 1 through 11 (of 11 total)
  • Got this to work for someone else:
    https://pastebin.com/3ps7sgey
    Once you have a class around the cents you can style them with custom css.

    Thread Starter Tad

    (@tatifox)

    Thank you for fast response,

    I have tried this code but it shows me like this “15.98.999999999999”

    But actual price without that code is “15.99”

    I tried to fix it with below modified code, it is working but it breaks the actual font size.

    There should be better approach for this matter.

    
    add_filter( 'wc_price', 'my_price', 3, 60 );
    
    function my_price( $return, $price, $args ) {
    	// $return = price with currency symbol
    	// $price = price as a number
    	// $args = array (inc tax, exc tax)
    	$usd = intval( $price );
    	$centavos = $price - $usd;
    	$centavos_round = str_replace('0.', '', $centavos);
    	$centavos_round_last = substr($centavos_round, -2);
    		
    	return '$'.$usd.'.<span class="centavos">'.$centavos_round_last.'</span>';
    };
    

    Thanks, it didn’t get a lot of testing first time round.

    You would style the font size with something like:

    .centavos {
      font-size: 12px;
    }

    Custom css can be entered at:
    Dashboard > Appearance > Customise > Additional CSS

    If it doesn’t work, please post the url of a relevant page.

    Thread Starter Tad

    (@tatifox)

    Yes I did not forget the CSS.

    It is localhost, but I can illustrate it in this image;

    Sample Image

    Try the original code but add a minute amount to the cents, so
    $centavos = ( $price - $reals ) * 100 + 0.001;

    Thread Starter Tad

    (@tatifox)

    It shows me like this “15.99.000999999999”.

    But I solved the decimal issue by modifying code to this;

    
    add_filter( 'wc_price', 'my_price', 3, 60 );
    
    function my_price( $return, $price, $args ) {
    	// $return = price with currency symbol
    	// $price = price as a number
    	// $args = array (inc tax, exc tax)
    	$usd = intval( $price );
    	$centavos = $price - $usd;
    	$centavos_round = str_replace('0.', '', $centavos);
    	$centavos_round_last = substr($centavos_round, -2);
    		
    	return '$'.$usd.'.<span class="centavos">'.$centavos_round_last.'</span>';
    };
    

    and now it show me like this “15.99”

    But as you would see in “Sample Image 2” it breaks the “total” price font size and makes it smaller.

    Sample Image 2

    Try:
    font-size: smaller;
    “Sets the font-size to a smaller size than the parent element”
    or
    font-size: 70%;
    “Sets the font-size to a percent of the parent element’s font size”

    I might be able to do better after you go live and I can use browser tools.

    Thread Starter Tad

    (@tatifox)

    Yes now it works fine with both options. Thank you

    Is there any way to make all this changes on wc_price directly instead of changing it to my_price, because in some areas like view cart it breaks the CSS style of the wc_price.

    You could try making the style inline, so inside the function you would use:
    <span class="centavos" style="font-size: 70%;">

    Thread Starter Tad

    (@tatifox)

    So even if I try to inline the style code it is the same result, but it is fine I tried to modify the CSS style of those effected elements.

    And I tried to adjust the code that you provided and now it works flawless.

    Also this line has issues: “$centavos_str = str_pad( $centavos, 2, ‘0’ )”

    Here it is: (for USD)

    
    <?php
      // WooCommerce - show cents within a class so they can be a smaller font
      // USD
      add_filter( 'wc_price', 'my_price', 3, 60 );
      function my_price( $return, $price, $args ) {
        // $return = price with currency symbol
        // $price = price as a number
        // $args = array (inc tax, exc tax)
    	$usd = intval( $price );
    	$centavos = ( $price - $usd ) * 100;
    	$centavos_int = intval( $centavos );
        return '$'.$usd.'.<span class="centavos">'.$centavos_int.'</span>';
      }
    ?>
    
    // Custom CSS:
    .centavos {
      font-size: 75%;
    }
    

    I also find out that if in WooCommerce settings you have “,” as a “Thousand Separator” it won’t work when product price or total price goes 1000 and up ( it will show you $1 not $1000 ) so I tried a quick fix by removing (Thousand Separator “,”) in settings and now everything works fine.

    Thank you so much dear for your support.

    Plugin Support Hannah S.L.

    (@fernashes)

    Automattic Happiness Engineer

    Thanks for that follow-up, @tatifox!

    I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Price Decimal Style’ is closed to new replies.