Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Tăng tốc độ WordPress
    • Tối ưu website WordPress
    • Thiết kế website WordPress
    • Viết plugin WordPress
    • Sửa lỗi nâng cấp website
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Wordpress plugins » Hiển thị (sale flash) % chiết khấu cho sản phẩm – WooCommerce

Hiển thị (sale flash) % chiết khấu cho sản phẩm – WooCommerce

Thứ Tư, 24/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Trong bài trước, các bạn đã học cách thiết lập giá cho sản phẩm với sale price và regular price trong woocommerce. Thậm trí tạo custom price hiển thị thêm một giá đặc biệt cho khách hàng thường xuyên ghé thăm website của bạn gọi là wholesale price.
Với các sản phẩm có giá bán tại cửa hàng thấp hơn giá thị trường, woocommerce hiển thị tip gắn vào mỗi hình đại diện của sản phẩm có nội dung “Sale!” (gọi là sale flash hay Sale Badge), nhằm thông báo cho người viếng thăm website biết sản phẩm này có giảm giá so với giá bán của thị trường.
sale-price-product-woo

Bạn muốn sửa lại thông báo với một con số cụ thể từ đó khách hàng có thể biết được họ tiết kiệm được bao nhiều tiền khi mua sản phẩm trên gian hàng của bạn. Ví dụ có thể thay bằng % giảm giá hoặc bớt đi bao nhiêu tiền so với giá ngoài thị trường.
change-sale-badge

Thay đổi sale flash hiển thị trên sản phẩm sử dụng Hook

Để làm điều này bạn sử dụng hook woocommerce_sale_flash, bạn có thể thay đổi bất kỳ nội dung nào với phần thông báo sale price cho mỗi sản phẩm. Thêm các dòng sau vào theme functions.php

<?php
add_filter('woocommerce_sale_flash', 'my_custom_sale_flash', 10, 3);
function my_custom_sale_flash($text, $post, $_product) {
	$from = $_product->regular_price;
	$to = $_product->price;
	if($from==$to || !$to) return '';
	$percent=round(($from-$to)/$from*100);
	$text=$from>$to? 'Giảm':'Tăng';
	return '<span class="thumb-discount-label">'.$text.' '.$percent.' %</span>';  
}
?>

Sử dụng filter woocommerce_sale_flash trong woocommerce template loop/sale-flash.php và single-product/sale-flash.php tương ứng cho trang liệt kê sản phẩm và trang sản phẩm chi tiết.
File loop/sale-flash.php:

<?php
/**
 * Product loop sale flash
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     1.6.4
 */

global $post, $product;
?>
<?php if ($product->is_on_sale()) : ?>

	<?php echo apply_filters('woocommerce_sale_flash', '<span class="onsale">'.__('Sale!', 'woocommerce').'</span>', $post, $product); ?>

<?php endif; ?>

File single-product/sale-flash.php:

<?php
/**
 * Single Product Sale Flash
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $post, $product;
?>
<?php if ( $product->is_on_sale() ) : ?>

	<?php echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale">' . __( 'Sale!', 'woocommerce' ) . '</span>', $post, $product ); ?>

<?php endif; ?>

Nếu bạn tùy biến giao diện woocommerce, để thay đổi hiển thị sale flash bằng cách override file này trong theme, thì sẽ sử dụng template mặc định trong thư mục plugin woocommerce/templates. Trường hợp cả 2 nơi đều không tìm thấy thì sẽ mất tính năng hiển thị sale flash cho các sản phẩm có giá sale price.
Lúc đó, filter woocommerce_sale_flash không hoạt động, vô tác dụng vì nó template duy nhất sử dụng hook này không tồn tại.
Do vậy, nếu phiên bản woocommerce bạn đang sử dụng khuyết template này thì tạo file sale-flash.php mới trong theme lưu vào đường dẫn thư mục như trên hoặc copy thêm vào woocommerce plugin nếu cần backup.

Tùy biến sale flash sử dụng plugin

Bạn cũng có thể thay đổi hiển thị Sale Flash/Sale Badge cho các sản phẩm có giá sale price, với plugin WooCommerce Smart Sale Badge.
Plugin sẽ thêm giá tiết kiệm được khi mua sản phẩm tại cửa hàng và sửa thêm vào chuỗi mặc định “Sale!” giống như thế này.
change-sale-badge

Tải và kích hoạt plugin cho wordpress là bạn có thể sử dụng ngay tính năng sale bagde cho website bán hàng.
Chú ý:
Khi cài đặt plugin này bạn kông được tạo thêm hook woocommerce_sale_flash trong file theme functions.php, vì theo thứ tự theme sẽ load sau plugin do đó filter woocommerce_sale_flash cuối cùng sẽ được sử dụng chính là theme.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài viết liên quan:

  1. Thay đổi giao diện template cho woocommerce
  2. [WooCommerce] – Sửa liên kết ảnh đại diện cho trang sản phẩm chi tiết
  3. Tùy biến giá cho sản phẩm trong woocommerce
  4. Part 2 – Thêm custom fields cho product sử dụng advanced custom fields [woocommerce]
  5. Thêm custom fields cho variation product trong woocommerce
  6. WooCommerce – Tự động thêm sản phẩm vào giỏ hàng khi truy cập vào website
  7. Ajax – Tạo nút thêm giỏ hàng động với woocommerce
  8. Tùy biến Product thumbnail – thay đổi ảnh đại diện của sản phẩm trong woocommerce
  9. Thay đổi layout tùy biến template trong woocommerce
  10. Hiển thị thông báo tình trạng sản phẩm – WooCommerce

Chuyên mục: Wordpress, Wordpress plugins Tìm kiếm: web bán hàng, Woocommerce, wordpress plugins

Đăng ký nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Comments

  1. kệ tivi đẹp tphcm says

    Chủ Nhật, 31/12/2017 at 1:36 chiều

    Hay quá, cảm ơn tác giả nhiều nhé!!!

    • Hoàng Quách says

      Thứ Tư, 03/01/2018 at 7:56 sáng

      Cám ơn bạn nhé 🙂

  2. Hoa Tươi Văn Nam says

    Thứ Hai, 12/02/2018 at 7:09 chiều

    Cảm ơn bài viết của bác !

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • Snapchat

SẢN PHẨM

  • Plugin Auto-Sync Google Shopping cho WooCommerce
  • Phần mềm chặn click ảo
  • WP2Speed.com – Tăng tốc WordPress

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2021 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.