Woocommerce: Thay đổi cách hiển thị giá sản phẩm đơn lẻ trong chi tiết sản phẩm

Nhiều nhà bán lẻ sử dụng chiến lược giá này khá thành công. Và việc hiển thị số tiền tiết kiệm cũng có thể làm tăng tỷ lệ chuyển đổi bán hàng khá tốt A/E tham khảo xem có phù hợp với website hiện tại của mình không.

=> Chú ý: Bài viết này dành cho các sản phẩm không có biến thể 🙂

Phần 1: Đoạn mã PHP

Copy đoạn này nhét vào function.php

add_filter( 'woocommerce_get_price_html', 'hwp_simple_product_price_format', 10, 2 );
 
function hwp_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">GIÁ CŨ %1$s</div><div class="now">GIÁ MỚI %2$s</div><div class="save">TIẾT KIỆM %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;
}

Phần 2 – Đoạn mã CSS

Copy đoạn này nhét vào file style.css màu sắc A/E tự đổi cho phù hợp với tông màu web nhé

.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%;
}

Chúc thành công!