Hướng dẫn tạo nơi lấy MÃ GIẢM GIÁ xịn xò cho wordpress
Bài viết có lẽ hơi dài, mọi người chịu khó xem kỹ để tránh sai sót khi làm nhé, theme mình làm demo trong bài viết là Flatsome nhé.
Đầu tiên các bạn tải về plugin mã giảm giá ở đây
(plugin bổ ích này của anh Hoan – Cáo Đêm viết, mình chỉ custom lại 1 số chỗ để phù hợp và hoạt động hiệu quả hơn, trong bài viết mình cũng xin trích dẫn lại những hướng dẫn từ chính chủ plugin luôn)
Nhớ vào Woocommerce > phiếu ưu đãi tạo mã trùng khớp với mã các bạn thêm vào shortcode nhé.
Plugin khá đơn giản và gọn nhẹ nên không có khu vực để tuỳ chỉnh trong dashboard, các bạn chỉ cần nhớ
Shortcode để chèn vào như sau:
[magg style="" loai="Đông Trùng Hạ Thảo" dk="Giảm 10% cho đơn hàng trên 500k" han="20/12/2022" web="https://thucphamsach.xsolution.vn/dong-trung-ha-thao-militaris-hop-10g-the-hai-yen/"]DTHT500K[/magg]Thông tin có thể thay đổi trong shortcode:
style=”” Mặc định để trống nếu bạn muốn giao diện mã giảm giá là màu trắng.
style=”dark” Nếu bạn muốn hiển thị Dark mode chỉ cần thêm chữ dark vào style.
loai=”” Tên ngành hàng hoặc phân loại của mã giảm giá.
dk=”” Điều kiện bổ sung thêm thông tin cho mã giảm giá.
han=”” Thời hạn mã giảm giá có hiệu lực.
web=”” Liên kết đến trang khuyến mãi.
[magg]mã code[/magg] Ở giữa 2 thẻ mở và đống shortcode mã giảm giá sẽ là mã code để người dùng có thể lấy. Nếu bạn để trống thì ô lấy mã sẽ không được hiển thị.
Chú ý: Khi đưa mã giảm giá vào bài viết, bạn không được phép sử dụng 1 mã code cho cho nhiều shortcode trên cùng 1 bài viết, nó sẽ khiến cho việc gọi lệnh xem mã và chuyển đến trang khuyến mãi gặp lỗi.
Một vài hình ảnh demo về cách hiển thị của mã giảm giá
Sau khi nhấn vào nút “LẤY MÔ sẽ xuất hiện thông báo kèm mã giảm giá mà mình đã thêm trong shortcode, nhấn OK để chuyển đến trang sản phẩm khuyến mãi mà mình đã đặt sẵn trong shortcode luôn, hoặc Cancel để huỷ chuyển nếu khách muốn tiếp tục xem trang hiện tại
Khá là tiện phải không ạ! Bên dưới là hình demo mình đã resopnsive trên nhiều kích thước thiết bị khác nha
Thế là xong phần plugin mã giảm giá, nhưng làm thế nào để hiển thị đẹp mắt thì còn thuộc vào thẩm mỹ của mỗi người, phía trên là thiết kế lại theo nhu cầu của mình cho phù hợp với theme.
Mình chia sẻ thêm cách đặt vào Menu và hover vào hiển thị ra luôn nhé
Thật ra là cũng khá đơn giản thôi, nó nằm ở vị trí menu thì mình sẽ vào menu tạo 1 menu riêng cho nó, nhưng trước tiên thì mình cần vào UX Blocks tạo mới 1 cái như hình (sử dụng element Text và thêm vào shortcode mình vừa cài bên trên
Vào menu tạo 1 menu mới , thêm liên kết tự tạo và điền thông số giống mình nhé (ở đây mình chọn menu top bar vì còn dư chưa sử dụng đến).
Mình đặt class để dễ chỉnh sửa css, thiết kế riêng không ảnh hưởng đến các element khác của website, các bạn có thể đổi lại tuỳ thích.
* Width: 450px là vừa với giao diện desktop, trên mobile cần css lại từng kích thước cho các thiết bị (mình share code css cuối bài viết).
* UX Block: Tất nhiên là phải chọn block vừa tạo lúc nãy rồi.
* Lớp CSS (tuỳ chọn) nếu bạn nào chưa biết nó ở đâu thì kéo lên góc phải đầu trang nhấn vào Tuỳ chọn hiển thị > tick chọn Lớp CSS.
* Reveal > On hover (trỏ chuột vào hiển thị block) hoặc bạn nào không thích có thể chọn lại là On click (nhấp vào hiển thị block)
Thế là xong, bây giờ chỉ cần vào Theme Options > Header kéo Top Bar Menu lên cho hiển thị thôi
Các bạn đặt đâu tuỳ ý nhé, không nhất thiết phải giống mình đâu
Ok rồi đấy! Thoát ra trang chủ xem thử nào, rất xấu phải không?
Việc cuối cùng là thêm css vào thì mới hoàn thiện.
📌 Lưu ý: Các bạn đặt class lúc tạo menu là gì thì nhớ đổi lại cho trùng khớp nhé
@media (max-width:380px){
.menu-magiamgia .nav-dropdown{
margin-left: 71px!important;
padding: 8px!important;
width: 323px!important;
box-shadow: 0px 6px 20px #0000008c;
background-color: #fff!important;
height: 450px!important;
overflow-y: scroll;
}
span.menu-magiamgia{
font-size: 14px!important;
border:none!important;
margin-left:20px;
}
.menu-magiamgia .icon-angle-down{
display:none;
}
#dot {
margin-left: 0px!important;
width: 10px;
height: 10px;
background-color: #ffbe00;
border-radius: 100%;
position: absolute;
left: 0px;
top: 55%;
margin-top: -7px;
display: block;
}
}
@media only screen and (min-width: 380px) and (max-width: 576px){
span.menu-magiamgia{
font-size: 14px!important;
border:none!important;
margin-left:20px;
}
.menu-magiamgia .nav-dropdown{
margin-left: 41px!important;
padding: 8px!important;
width: 380px!important;
box-shadow: 0px 6px 20px #0000008c;
background-color: #fff!important;
height: 450px!important;
overflow-y: scroll;
}
.menu-magiamgia .icon-angle-down{
display:none;
}
#dot {
margin-left: 0px!important;
width: 10px;
height: 10px;
background-color: #ffbe00;
border-radius: 100%;
position: absolute;
left: 0px;
top: 55%;
margin-top: -7px;
display: block;
}
}
@media (min-width:992px){
span.menu-magiamgia {
font-size: 14px;
border: 1px dashed #fff;
padding: 8px 20px 8px 40px;
border-radius: 3px;
}
span.menu-magiamgia:hover {
border: 1px dashed #E8BA0D;
}
.menu-magiamgia .icon-angle-down{
display:none;
}
.menu-magiamgia .nav-dropdown{
margin-left:-200px;
width: 450px!important;
padding: 10px 15px!important;
box-shadow: 0px 6px 20px #0000008c;
background-color: #fff!important;
height: 450px;
overflow-y: scroll;
}
.magg {
background: #f9f9f9!important;
}
}Vậy là xong rồi đó, nếu màu không phù hợp với website các bạn có thể css đổi style lại nhé.
Last updated