Bạn muốn hiển thị rõ ràng các sản phẩm tặng kèm (miễn phí) trên trang sản phẩm và tự động thêm chúng vào giỏ hàng? Đây là hướng dẫn chi tiết sử dụng Advanced Custom Fields (ACF) và Code PHP tùy chỉnh để tạo chức năng này mà không cần plugin khuyến mãi trả phí cồng kềnh.
Bước 1: Chuẩn bị Môi trường và Dữ liệu
1. Cài đặt và Thiết lập ACF
Chúng ta sử dụng ACF để tạo giao diện quản lý quà tặng đơn giản trong Admin.
Cài đặt: Cài đặt và kích hoạt plugin Advanced Custom Fields (ACF) bản miễn phí.
Tạo Nhóm Trường: Tạo nhóm trường mới, đặt tên “Quà Tặng Sản Phẩm”.
Tạo Trường Mối Quan hệ:

Tên trường (Field Name):
gift_productsLoại Trường (Field Type): Chọn Mối quan hệ (Relationship).
Định dạng trả về (Return Format): BẮT BUỘC chọn ID Bài viết (Post ID).

2. Nguyên tắc Gắn Code: Sử dụng Child Theme
Cảnh báo quan trọng: Không nên gắn code vào file functions.php của Theme chính (Parent Theme) vì code sẽ bị xóa khi bạn cập nhật theme. Hãy luôn sử dụng Child Theme (Theme con).
II. Bước 2: Code PHP Xử lý Toàn Bộ Chức Năng
Bạn cần dán toàn bộ khối code PHP dưới đây vào file functions.php của Child Theme. Đây là khối code hoàn chỉnh:
/**
* ===============================================
* HỆ THỐNG QUÀ TẶNG MIỄN PHÍ DÙNG ACF
Tác giả: Xuân Hiếu IT
* ===============================================
*/
/**
* PHẦN 1: HIỂN THỊ QUÀ TẶNG TRÊN TRANG SẢN PHẨM ĐƠN
* Hook vào vị trí hiển thị trước nút Thêm vào giỏ hàng
*/
add_action( 'woocommerce_single_product_summary', 'custom_display_free_gifts', 25 );
function custom_display_free_gifts() {
// Tên trường ACF của bạn
$field_name = 'gift_products';
$gift_ids = get_field( $field_name );
if ( $gift_ids && is_array( $gift_ids ) ) {
echo '';
echo 'QUÀ TẶNG Sản phẩm kèm theo:
';
echo '';
foreach ( $gift_ids as $gift_id ) {
$gift_product = wc_get_product( $gift_id );
if ( $gift_product ) {
$product_url = $gift_product->get_permalink();
$product_image = $gift_product->get_image( 'thumbnail' );
$product_name = $gift_product->get_name();
echo '- ';
echo $product_image;
echo '' . esc_html( $product_name ) . '';
echo ' (Miễn phí)';
echo '
';
}
}
echo '
';
echo 'Quà tặng sẽ được tự động thêm vào giỏ hàng.
';
echo '';
}
}
/**
* ===============================================
* PHẦN 2: XỬ LÝ GIỎ HÀNG VÀ THANH TOÁN
* ===============================================
*/
/**
* 2.1. Tự động thêm sản phẩm tặng vào giỏ hàng (Đã sửa lỗi AJAX)
*/
add_action( 'woocommerce_add_to_cart', 'auto_add_free_gifts', 10, 5 );
function auto_add_free_gifts( $cart_item_key, $product_id, $quantity, $variation_id, $variation_data ) {
// Tên trường ACF của bạn
$field_name = 'gift_products';
$gift_ids = get_field( $field_name, $product_id );
if ( $gift_ids && is_array($gift_ids) ) {
foreach ( $gift_ids as $gift_id ) {
// Kiểm tra xem quà tặng đã có trong giỏ hàng chưa
$gift_already_in_cart = false;
foreach ( WC()->cart->get_cart() as $cart_item ) {
if ( $cart_item['product_id'] == $gift_id && isset( $cart_item['is_free_gift'] ) && $cart_item['is_free_gift'] ) {
$gift_already_in_cart = true;
break;
}
}
if ( ! $gift_already_in_cart ) {
$gift_product = wc_get_product( $gift_id );
if ( $gift_product && $gift_product->is_purchasable() ) {
// Thêm quà tặng vào giỏ hàng với cờ đặc biệt 'is_free_gift'
WC()->cart->add_to_cart( $gift_id, 1, 0, array(), array( 'is_free_gift' => true ) );
}
}
}
}
}
/**
* 2.2. SỬA LỖI GIÁ: Đặt giá quà tặng bằng 0 (Trên Giỏ hàng và Thanh toán)
* Tăng Priority từ 10 lên 99 để đảm bảo chạy sau các plugin tính giá khác.
*/
add_action( 'woocommerce_before_calculate_totals', 'set_free_gift_price', 99, 1 ); // <--- Đã sửa Priority
function set_free_gift_price( $cart ) {
if ( is_admin() && ! defined( 'DOING_AJAX' ) ) { return; }
// Kiểm tra và đặt giá 0 cho các sản phẩm có cờ 'is_free_gift'
if ( ! empty( $cart->get_cart() ) ) {
foreach ( $cart->get_cart() as $cart_item_key => $cart_item ) {
if ( isset( $cart_item['is_free_gift'] ) && $cart_item['is_free_gift'] ) {
$cart_item['data']->set_price( 0 ); // Đặt giá bằng 0
}
}
}
}
/**
* 2.3. Hiển thị nhãn "Quà tặng miễn phí" trên Giỏ hàng và Thanh toán
*/
add_filter( 'woocommerce_cart_item_name', 'display_free_gift_label', 10, 3 );
add_filter( 'woocommerce_order_item_name', 'display_free_gift_label', 10, 3 );
function display_free_gift_label( $product_name, $cart_item, $cart_item_key ) {
if ( isset( $cart_item['is_free_gift'] ) && $cart_item['is_free_gift'] ) {
$gift_label = '(🎁 Quà tặng miễn phí)';
return $product_name . $gift_label;
}
return $product_name;
}
?>
III. Bước 3: Định dạng Giao diện với CSS
Dán đoạn CSS này vào mục Tùy biến > CSS Bổ sung (Additional CSS) để tạo hiệu ứng ruy băng “QUÀ TẶNG” và định dạng danh sách gọn gàng:
.gift-item a {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
padding: 0;
width: 67%;
}
.gift-products-wrapper {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 15px 0;
margin-bottom: 20px;
}
.gift-products-wrapper h3 {
font-size: 16px;
margin-bottom: 10px;
position: relative;
}
.gift-products-list {
list-style: none; /* Xóa dấu gạch đầu dòng mặc định */
padding: 0;
margin: 10px;
}
.gift-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.gift-item .attachment-thumbnail {
width: 40px;
height: 40px;
object-fit: contain;
margin-right: 10px;
border-radius: 4px;
}
.gift-item a {
font-weight: 500;
color: #333;
text-decoration: none;
}
.gift-icon {
margin-right: 5px;
color: #c9302c; /* Màu đỏ */
}
.gift-price {
color: #28a745; /* Màu xanh lá cho chữ Miễn phí */
font-weight: 600;
font-size: 10px;
margin-left: 5px;
}
.gift-tag {
/* Tạo hiệu ứng dải ruy băng */
background-color: #c9302c;
color: white;
padding: 2px 8px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
position: absolute;
right: 0;
top: 0;
transform: skewX(-15deg); /* Làm nghiêng chữ */
}
IV. Bước Cuối Cùng và Khắc phục sự cố
1. Quy Trình Kiểm Tra Bắt Buộc
Để đảm bảo tính năng Quà tặng Miễn phí hoạt động hoàn hảo sau khi dán code, bạn BẮT BUỘC phải thực hiện và xác nhận các bước sau:
Lựa chọn Quà tặng (ACF):
Vào trang chỉnh sửa sản phẩm chính (ví dụ: Leica Q3).
Sử dụng trường Mối quan hệ (Relationship) ACF, chọn (tích) các sản phẩm sẽ được tặng kèm.
Cập nhật (Save) sản phẩm.
Kiểm tra Trạng thái Sản phẩm Quà tặng:
Các sản phẩm được chọn làm quà tặng phải ở trạng thái Công khai (Published).
Các sản phẩm quà tặng phải ở trạng thái Còn hàng (In Stock) và được phép mua (
is_purchasable()).Đảm bảo trường Định dạng trả về trong ACF là ID Bài viết.
Xóa Cache Toàn Bộ (Rất Quan Trọng):
Xóa cache của plugin Cache (như WP Rocket, LiteSpeed Cache).
Xóa cache trình duyệt bằng cách nhấn Ctrl + Shift + R (hoặc Cmd + Shift + R).
Thử nghiệm Thực tế:
Xóa bất kỳ sản phẩm nào có sẵn trong giỏ hàng cũ.
Thêm sản phẩm chính vào giỏ hàng và kiểm tra kết quả ngay lập tức trong Mini Cart và trang Giỏ hàng.
2. Tính Năng Đã Đạt Được (Kết Quả Cuối Cùng)

