如何在商店页面（Woocommerce）上显示两种不同的价格格式？

Question

I need to display price like this (one with sup tag decimal & others with normal price format), so, I added the following codes.

But the codes displays like this (all the Was, Save and Sale prices show sup tag decimal).


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

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>';
}

 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>'; }

 <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.

Answer 1

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>