Tạo nút aff shopee mua hàng trên website
Bước 1: Tạo button liên kết ngoài sử dụng kèm với plugin Advanced Custom Fields
Đầu tiên các bạn tạo mới 1 field: Custome Fields ( có thể là ACF )
Add new Field Groups
Sau đó các bạn tạo các field theo nhu cầu như sàn shopee, lazada, tiki….
Các field phải đúng tên, type chọn dạng text, hiển thị tại khu vực sản phẩm.
Sau đó vào sản phẩm check xem đã hiện ra các dòng điền link aff shopee chưa
Thế là xong phần tạo trường trên Advanced Custom Fields
Bước 2: Chèn nút mua hàng shopee vào trong Functions.php
Dán đoạn code này vào file functions.php
Tìm trong Giao diện – Theme file editor
function btn_mua_hang(){ if(get_field('san_lazada')){;?> <a href="<?php echo get_field('san_lazada');?>" class="btn-san lazada-san"> <img width="30" src="/wp-content/uploads/2021/10/lazada.png"> <span>Mua hàng tại Lazada</span> </a> <?php } if(get_field('san_shopee')){;?> <a href="<?php echo get_field('san_shopee');?>" class="btn-san shop-san"> <img width="30" src="/wp-content/uploads/2021/10/6db931827443a7455a4b805fe5829820.png"> <span>Mua hàng tại Shopee</span> </a> <?php } if(get_field('san_tiki')){;?> <a href="<?php echo get_field('san_tiki');?>" class="btn-san tiki-san"> <img width="30" src="/wp-content/uploads/2021/10/tiki.png"> <span>Mua hàng tại Tiki</span> </a> <?php } } add_action('woocommerce_after_add_to_cart_button','btn_mua_hang',0);
Bước 3: Chèn nút mua hàng shopee ra ngoài website
Thêm CSS cho các button mua hàng
Các bạn thêm đoạn css trong custome css ở phần giao diện – tùy biến – CSS nhé.
.btn-san { background: red; padding: 10px; width: 100%; display: block; text-align: center; color: #fff; border-radius: 7px; font-weight: 600; font-size: 20px; margin-bottom: 10px; } .btn-san.lazada-san { background: #10156e; } .btn-san.shop-san { background: #fd5e32; } .btn-san.tiki-san { background: #1a94ff; }
Thành quả sau khi tạo được nút mua hàng aff shopee
Lưu ý khi chèn nút mua hàng shopee:
link icon sàn có thể khác nhau sẽ không hiển thị được, các bạn cần up logo mới lên, sau đó copy lại link dẫn icon để paste lại trong phần functions.php
Các bạn có thể down icon shopee lazada tại đây:
Chúc các bạn thành công! Nếu bài viết này hữu ích tiếc gì không thả tym cho đội Writer của Vietgear.vn tại cmt nhé!