Chèn box khuyến mại cho trang chi tiết sản phẩm Woocommerce

1882 lượt xem
Posted on by Lê Văn Thiện
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

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ự.

Giuseart.com---Chèn-box-quà-tặng-khuyến-mại-cho-sản-phẩm-woocommerce
Chèn box quà tặng vào trang chi tiết sản phẩm Woocommerce

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”

Giuseart.com---Cài-đặt-và-kích-hoạt-plugin-advanced-custom-field
Cài đặt và kích hoạt plugin Advanced Custom Field

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.

Giuseart.com - Import-group-filed-mẫu
Import JSON chứa group filed mẫu

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:

Giuseart.com---Tạo-filed-quà-tặng
Group field tạo sẵn chứa các filed cần thiết để tạo box khuyến mạ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:

Giuseart.com---Tạo-field-khuyến-mại

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:

Giuseart.com---Nhập-dữ-liệu-vào-custom-field-khuyến-mại
Các bạn nhập các thông tin cần thiết vào các filed khuyến mại bao gồm phần label và phần nội dung

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!

5/5 - (1 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebook và zalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết cùng chuyên mục:

Bài viết mới cập nhật:

4 thoughts on “Chèn box khuyến mại cho trang chi tiết sản phẩm Woocommerce”

  2. Hoàng says:

    đ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

    Trả lời

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Trang chủ
Tìm kiếm
Lên trên
Chia sẻ
Tải lại
Bình luận