Chào các bạn, việc đính kèm quà tặng khuyến mại cho từng sản phẩm là điều rất cần thiết và thường gặp khi làm web bán hàng. Tuy vậy, nhiều anh em chưa biết cách dùng Advanced Custom Field để tạo file khuyến mại cho từng sản phẩm. Do đó, hôm nay hãy cùng mình tìm hiểu bài viết này nhé!
Thành quả sau khi làm sẽ được box quà tặng như hình dưới, các bạn theo dõi và làm theo từng bước là ok. Link xem demo: https://mypham2.ninhbinhweb.site/set-qua-tang-mat-na-ngu-moi-son-duong-danh-cho-ban-gai/
Bài viết thực hiện trên theme Flatsome, các theme khác thực hiện tương tự.
Bước 1: Cài đặt plugin Advanced Custom Field
Chúng ta chỉ cần cài bản Free thôi là thoải mái chức năng rồi, không cần thiết mua bản Premium nha.
Các bạn vào Quản trị – Plugin (Gói mở rộng) – Cài mới – Gõ tìm kiếm “Advanced Custom Field”, sau đó ấn “Cài đặt” -> “Kích hoạt”
Bước 2: Import Group Filed mẫu của GiuseArt
Tải file JSON chứa Group Filed mẫu về: https://drive.google.com/file/d/1ogH1Ml0xGLqC22UA3ikXiWDtWBa_1FFD/view?usp=sharing
Vào quản trị – Custom Field – Tools – Chọn tệp và Import JSON.
Sau khi import Group Field mẫu, các bạn vào mục Group Field có sẵn một Group filed “Thông tin thêm cho sản phẩm”, bên trong chứa các filed cần thiết mình đã làm sẵn như hình dưới:
Trong đó Label quà tặng và Nội dung quà tặng sẽ dùng để gọi các thông tin ra như hình mẫu:
Bước 2: Nhập thông tin vào Custom Field
Các bạn vào sửa từng sản phẩm và nhập đủ thông tin vào các field khuyến mại như hình:
Bước 3: Code hiển thị Advanced Custom Field ra ngoài Front end
Vào Quản trị – Giao diện – Sửa – Function.php và thêm đoạn code dưới đây:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/* * Chèn box quà tặng phía dưới add to cart form * Author: giuseart.com */ add_action( 'woocommerce_after_add_to_cart_form', 'giuseart_after_add_to_cart_form' ); function giuseart_after_add_to_cart_form(){ global $product; $qua_tang=get_field('qua_tang'); $label_qua_tang_1 = get_sub_field('label_qua_tang_1'); $label_qua_tang_2 = get_sub_field('label_qua_tang_2'); $label_qua_tang_3 = get_sub_field('label_qua_tang_3'); $label_qua_tang_4 = get_sub_field('label_qua_tang_4'); $noi_dung_qua_tang_1 = get_sub_field('noi_dung_qua_tang_1'); $noi_dung_qua_tang_2 = get_sub_field('noi_dung_qua_tang_2'); $noi_dung_qua_tang_3 = get_sub_field('noi_dung_qua_tang_3'); $noi_dung_qua_tang_4 = get_sub_field('noi_dung_qua_tang_4'); if($qua_tang){?> <div class="qua-tang-box"> <div class="row-gift"> <span class="label"><?php echo $qua_tang['label_qua_tang_1'];?></span><span class="value"><?php echo $qua_tang['noi_dung_qua_tang_1'];?></span> </div> <?php if($qua_tang['label_qua_tang_2']){?> <div class="row-gift"> <span class="label"><?php echo $qua_tang['label_qua_tang_2'];?></span><span class="value"><?php echo $qua_tang['noi_dung_qua_tang_2'];?></span> </div> <?php }?> <?php if($qua_tang['label_qua_tang_3']){?> <div class="row-gift"> <span class="label"><?php echo $qua_tang['label_qua_tang_3'];?></span><span class="value"><?php echo $qua_tang['noi_dung_qua_tang_3'];?></span> </div> <?php }?> <?php if($qua_tang['label_qua_tang_4']){?> <div class="row-gift"> <span class="label"><?php echo $qua_tang['label_qua_tang_4'];?></span><span class="value"><?php echo $qua_tang['noi_dung_qua_tang_4'];?></span> </div> <?php }?> </div> <?php }?> <?php } |
Bước 4: Thêm code CSS trang trí box khuyến mại
Vào Giao diện – Tùy biến – Custom CSS – Thêm đoạn code sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.qua-tang-box { display: block; margin-bottom: 25px; margin-top: 10px; } .qua-tang-box .row-gift { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: #2d2d2d; } .qua-tang-box .row-gift .label { border: 1px solid; font-size: 13px; padding: 2px 5px; color: #dd0000; margin-right: 9px; min-width: 75px; display: inline-block; } .qua-tang-box .row-gift .value{ color: black; font-size: 14px; } |
Bước 5: Lưu lại và xem thành quả
Các bạn thực hiện lưu lại và ra xem thành quả nhé! Chúc các bạn thành công!
Chia sẻ bài viết:
Bác ơi; mình k tìm thấy chỗ tải file json.
Đã update link tải bác nhe!
đoạn code php kia bị lỗi bác ạ, e đã thử nhiều lần lưu function.php file mà nó cứ báo lỗi suốt. bác check lại xem còn thiếu cái mở đóng nào không, em thêm cái mở đóng ở hàm function giuseart_after_add_to_cart_form(){ mà cũng ko sửa được. hi vọng sớm cập nhật
à vâng có tí sai sót, em update lại ok rồi nha!
Có cách nào để tùy chỉnh từng sản phẩm hiện thị khuyến mãi không bác, mình có sản phẩm có km, cũng có sp không có km. Giờ nó đều hiện tất cả.
có cách nhưng nó nằm ngoài phạm vi của bài viết này, bác có thể search bài khác hình như e có chỉ rồi!