WooCommerce: Hiển thị giá dưới dạng “Giá cũ $$$ – Giá hiện tại $$$ – Tiết kiệm $$$”

Nhiều nhà bán lẻ sử dụng chiến lược hiển thị giá tiết kiệm khá thành công. Và việc hiển thị số tiền tiết kiệm cũng có thể tăng tỷ lệ chuyển đổi cửa hàng thương mại điện tử của bạn.

Vì vậy, việc chuyển giá mặc định của sản phẩm đơn giản từ “$ 30 $ 20” thành “$ 30 – Hiện tại $ 20 – Tiết kiệm $ 10” là khá dễ dàng. Với một chút CSS, bạn cũng có thể tạo kiểu cho màn hình và tùy chỉnh nó theo nguyên tắc thương hiệu của bạn!

WooCommerce: changing the display of single product pricing

Phần 1 – Đoạn mã PHP: Hiển thị giá ở dạng “Giá cũ, Hiện tại, Tiết kiệm” cho các Sản phẩm Đơn giản đang Bán

[code]

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’) ) {
$price = sprintf( __( ‘<div class=”was-now-save”><div class=”was”>WAS %1$s</div><div class=”now”>NOW %2$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 $price;
}

[/code]

Phần 2 – Đoạn mã CSS: Hiển thị giá ở dạng “Giá cũ, Hiện tại, Tiết kiệm” cho các Sản phẩm Đơn giản đang Bán

[code]

.was, .now, .save {
width: 50%;
padding: 0.5em 1em;
text-align: center;
}

.was {
background: #636363;
color: white;
}

.now {
background: #acacac;
color: black;
}

.save {
background: #eee;
color: red;
font-size: 120%;
}

[/code]

Thêm đoạn mã này vào đâu?

Bạn có thể đặt các đoạn mã PHP ở cuối tệp functions.php chủ đề con của mình (trước “?>” Nếu bạn có). Mặt khác, CSS có trong tệp style.css chủ đề con của bạn.

Đoạn mã này (vẫn) hoạt động chứ?

Vui lòng cho tôi biết trong phần bình luận nếu mọi thứ hoạt động như mong đợi. Tôi rất sẵn lòng sửa đổi đoạn mã nếu bạn có góp ý phù hợp (vui lòng cung cấp ảnh chụp màn hình).

Dịch vụ thiết kế website chuyên nghiệp tại Web MTP

Liên hệ ngay với chúng tôi nếu bạn đang gặp khó khăn trong việc thiết kế web nhé!

Website: https://webmtp.com/

Hotline: 0931 912 379

WooCommerce B2B: Cách thiết lập cửa hàng buôn bán