Hướng dẫn tạo box khuyến mại đẹp cho website bán hàng 2022

Tạo box khuyến mại – Phần khuyến mại và liên hệ là không thể thiếu trong các website bán hàng, với website wordpress thì mọi người thường cài plugin cho phần khuyến mại này. Nhưng mà hôm nay mình sẽ hướng dẫn các bạn copy – paste 1 đoạn code ngắn thoy là đã có được 1 giao diện khuyến mại đẹp và nhẹ rồi.

Tạo box khuyến mại

 

Hướng dẫn tạo box khuyến mại đẹp cho website bán hàng

Bước 1: Tạo HTML

Các bạn hãy copy và paste đoạn code phía dưới vào phần : Giao diện > Tuỳ biến > Woocommerce > Product Page> HTML after Add To Cart button

Hoặc nếu các bạn hiểu về code muốn hook vào vị trí nào thì xem vị trị hook ở bài viết Vị trí các hàm hook trong single product woocommerce

<div class="cb_uudai">
<h3><i class="fa fa-gift" aria-hidden="true"></i> khuyến mãi</h3>
<div class="ex_km" id="ex_km">
<ul class="el-promotion-pack">
<li><span style="color: #008000;"><strong>Hotsale 30/8 đến 5/9 <span style="color: #ff0000;">giảm sốc chỉ còn từ 28.790.000đ</span></strong></span></li>
<li><a href="#"><span style="color: #008000;"><span style="color: #ff0000;">Giảm giá đến 500.000đ</span> cho học sinh - sinh viên ( xem chi tiết)</span></a></li>
<li><span style="color: #008000;"><a style="color: #008000;" href="#">Thu cũ đổi mới</a> </span>- <span style="color: #ff0000;">Trợ giá 1.000.000đ</span></li>
<li><span style="color: #ff0000;">Giảm 100.000đ </span>khi mua kèm<span style="color: #008000;"><a style="color: #008000;" href="#"> Apple Watch</a></span></li>
<li><span style="color: #ff0000;">Giảm 100.000đ</span> khi mua kèm <span style="color: #008000;"><a style="color: #008000;" href="#">tai nghe Air Pods</a></span></li>
<li>Tặng<span style="color: #ff0000;"> Voucher giảm 200.000đ </span>khi mua Laptop</li>
<li>Giảm giá 5% khi mua <span style="color: #008000;"><a style="color: #008000;" href="#">phụ kiện</a></span></li>
</ul>
</div>
</div>

Thay thế nội dung khuyến mãi + Link mà bạn muốn trong mục # chỗ href nhé!

Bước 2: Tuỳ biến CSS

Copy và paste đoạn code sau vào style.css hoặc Giao diện > Tuỳ biến > Custom CSS

.cb_uudai {
border-radius: 10px;
border: 1px solid #b7b7b7;
margin-bottom: 10px;
}
.cb_uudai h3 {
display: flex;
font-size: 18px;
color: #d90000;
text-align: center;
padding: 5px 15px;
text-transform: capitalize;
margin-bottom: 0px;
background: #ffe45f;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
justify-content: center;
align-items: center;
}
.cb_uudai h3 i {
font-size: 28px;
margin-right: 10px;
}
.fa-gift:before {
content: "\f06b";
}
.cb_uudai .ex_km {
font-size: 13px;
padding: 0px 0px 0px 0px;
margin-left: -30px;
}
.cb_uudai .ex_km ul {
margin-bottom: 0px;
list-style: none;
}
.cb_uudai .ex_km ul li {
position: relative;
padding-left: 20px;
}
.cb_uudai .ex_km ul li::before {
left: 0;
position: absolute;
content: "\f06b";
font-family: "Fontawesome";
font-size: 14px;
color: #db0000;
display: inline-block;
}

Kết luận

Trên đây là hướng dẫn của mình về tạo box khuyến mại đẹp cho website wordpress, chúc các bạn thành công!

Bài viết liên quan

Đánh giá bài viết

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 *