How to display two different price formats on shop page (Woocommerce)?

user_16709045 0
Viewed 75

Problem:
I need to display price like this (one with sup tag decimal & others with normal price format), so, I added the following codes.
enter image description here
But the codes displays like this (all the Was, Save and Sale prices show sup tag decimal).
enter image description here

Would you please let me know how to display normal price format for 'was' and 'save'?

Sup tag decimal (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 ) {
    $price_format = number_format( intval( $price ), 0, $decimal_separator, $thousand_separator );
    $decimal = sprintf( '%02d', ( $price - intval( $price ) ) * 100 );
    return $price_format . '<sup>' . $decimal . '</sup>';
}

Display Prices as “Was and Save” (functions.php):
add_filter( 'woocommerce_get_price_html', 'bbloomer_simple_product_price_format', 10, 2 );
function bbloomer_simple_product_price_format( $price, $product ) {
   if ( $product->is_on_sale() && $product->is_type('simple') ) {
      $info_price = sprintf( __( '<div class="was-now-save" style="padding:0 10px 0 10px;"><div class="was">Was: %1$s</div><div class="save">Save: %3$s</div></div>', 'woocommerce' ), wc_price ( $product->get_regular_price() ), wc_price( $product->get_sale_price() ), wc_price( $product->get_regular_price() - $product->get_sale_price() )  );      
   }
   return '<div style="display:flex; align-items: center; justify-content: center;">' . $price . '<span>' . $info_price . '</span></div>';
}

Frontend HTML:
<span class="price">
   <div style="display:flex; align-items: center; justify-content: center;">
      <del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>3<sup>20</sup></bdi></span></del>
      <ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>3<sup>14</sup></bdi></span></ins> <span class="uom">ea</span>
      <span><div class="was-now-save" style="padding:0 10px 0 10px;"><div class="was">Was: <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>3<sup>20</sup></bdi></span></div><div class="save">Save: <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>0<sup>05</sup></bdi></span></div></div></span>
   </div>
</span>



Thank you.

woocommerce wordpress css php javascript
1 Answers

You can just add css:

sup {
  vertical-align: baseline;
}

sup::before {
  content: ".";
}
<div style="display: flex; align-items: center; justify-content: center;"><del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>3<sup>20</sup></bdi></span></del> <ins><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>3<sup>14</sup></bdi></span></ins> <span class="uom">ea</span>
<div class="was-now-save" style="padding: 0 10px 0 10px;">
<div class="was">Was: <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>3<sup>20</sup></bdi></span></div>
<div class="save">Save: <span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>0<sup style="vertical-align: baseline;">05</sup></bdi></span></div>
</div>
</div>

user_172545530
Related