0 レビュー
0 回答
javascript-ショップページ(Woocommerce)に2つの異なる価格フォーマットを表示するにはどうすればよいですか?
問題:
このように価格を表示する必要があるので(supタグが10進数で、その他は通常の価格形式)、次のコードを追加しました。
ただし、コードは次のように表示されます(すべてのWas、Save、Saleの価格はsupタグの10進数を示しています)。
「was」と「save」の通常の価格フォーマットを表示する方法を教えてください。
Supタグの10進数(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>';
}
価格を「以前と保存」(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>';
}
フロントエンド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>
ありがとうございました。
わからない
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。