Bài viết hướng dẫn tạo nút Affiliate – link sàn thương mại điện tử chỉ với Copy Paste của admin group Flatsome Việt Nam – Võ Minh Đạo. Hướng dẫn người dùng website WooCommerce giao diện Flatsome thêm nút affiliate Shopee, Tiki, Lazada,.. nhanh chóng.
Với cách làm này, ở mỗi sản phẩm giờ đây bạn chỉ cần copy link affiliate của sản phẩm và dán vào form là hệ thống sẽ tự tạo nút Affiliate nhanh chóng. Giờ đây bạn sẽ tiết kiệm hơn rất nhiều thời gian mỗi khi tạo link tiếp thị liên kết.
Không lan man nữa, sau đây là cách làm.
Hướng dẫn tạo nút Affiliate trong WooCommere
(*) Với các giao diện khác Flatsome thì bạn nghiên cứu áp dụng theo nhé.
Bước 1: Tải plugin Advanced Custom Fields Pro theo link dưới đây:
Lưu ý: chỉ có ACF bản Pro mới có thể áp dụng được những code dưới đây. Bản miễn phí sẽ không có đủ tiện ích theo nhu cầu nhé. Anh em nào đang cài bản Free thì gỡ đi và cài đặt bản Pro trên là được.
Bước 2: Tải JSON Import ACF
- Đây là thiết lập ACF Pro sẵn, anh em chỉ cần tải file này về và import vào ACF là được.
- Link: https://drive.google.com/file/d/1Wn-JmgYcXM03oMgHrrI58gLG02pYdkA7/view?usp=sharing
Hoặc có thể copy và dán vào:
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
[ { "key": "group_629efbdc72c76", "title": "Sàn TMĐT", "fields": [ { "key": "field_629f032ac3763", "label": "Tiêu đề", "name": "realdev_title", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "" }, { "key": "field_629efbe9eabbf", "label": "Link Sàn TMDT", "name": "link_san_tmdt", "type": "repeater", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "", "class": "", "id": "" }, "collapsed": "", "min": 0, "max": 0, "layout": "table", "button_label": "", "sub_fields": [ { "key": "field_629efc1eeabc0", "label": "Avatar", "name": "realdev_avatar", "type": "image", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "15", "class": "", "id": "" }, "return_format": "array", "preview_size": "thumbnail", "library": "all", "min_width": "", "min_height": "", "min_size": "", "max_width": "", "max_height": "", "max_size": "", "mime_types": "" }, { "key": "field_629efc68eabc2", "label": "Link Anchor", "name": "realdev_link_anchor", "type": "link", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "45", "class": "", "id": "" }, "return_format": "array" }, { "key": "field_629efc4aeabc1", "label": "Link Text", "name": "realdev_link_text", "type": "text", "instructions": "", "required": 0, "conditional_logic": 0, "wrapper": { "width": "40", "class": "", "id": "" }, "default_value": "", "placeholder": "", "prepend": "", "append": "", "maxlength": "" } ] } ], "location": [ [ { "param": "post_type", "operator": "==", "value": "product" } ] ], "menu_order": 0, "position": "normal", "style": "default", "label_placement": "top", "instruction_placement": "label", "hide_on_screen": "", "active": true, "description": "", "show_in_rest": 0 } ] |
Bước 3: Chèn code này vào file Functions.php của giao diện
- Khuyến cáo anh em chèn vào giao diện child nhé. Để tránh trường hợp copy paste bị lỗi gây ảnh hưởng giao diện chính.
- Bạn vào Giao diện / Theme File Editor / Child-theme / function.php
|
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 |
//Link Sàn TMĐT add_action('woocommerce_single_product_summary', 'realdev_aff', 99); function realdev_aff(){ if ( have_rows( 'link_san_tmdt' ) ) : echo '<div class="realdev_main-aff">'; if ( $realdev_title = get_field( 'realdev_title' ) ) : echo '<p class="realdev_title">'.esc_html( $realdev_title ).'</p>'; /* Hãy xóa /* và */ /*trong trường hợp bạn muốn tiêu đề tự động, hãy đổi theo ý mình else: echo '<p class="realdev_title>Chúng tôi (Tên Website hoặc thương hiệu của bạn) cũng bán trên:</p>'; */ endif; echo '<ul class="realdev_list-aff">'; while ( have_rows( 'link_san_tmdt' ) ) : the_row(); echo '<li>'; $realdev_avatar = get_sub_field( 'realdev_avatar' ); if ( $realdev_avatar ) : echo '<span class="realdev_images"><img src="'.esc_url( $realdev_avatar['url'] ).'" alt="'.esc_attr( $realdev_avatar['alt'] ).'" /></span>'; endif; $link = get_sub_field( 'realdev_link_anchor' ); if ( $link ) : $link_url = $link['url']; $link_title = $link['title']; $link_target = $link['target'] ? $link['target'] : '_self'; echo '<span class="realdev_link-anchor"><a href="'. esc_url( $link_url ).'" target="'.esc_attr( $link_target ).'">'.esc_html( $link_title ).'</a></span>'; endif; if ( $realdev_link_text = get_sub_field( 'realdev_link_text' ) ) : echo '<span class="realdev_link-text">'.esc_html( $realdev_link_text ).'</span>'; endif; echo '</li>'; endwhile; echo '</ul>'; echo '</div>'; endif; } |
Bước 4: Thêm một chút CSS để làm đẹp nút Aff
- Bạn copy đoạn css dưới đây là chèn vào file style.css trong child-theme hoặc vào phần tùy biến của giao diện để chèn.
- Cách 1: Bạn vào Giao diện / Theme File Editor / Child-theme / style.css
- Cách 2: Tại thanh top bar, click vào Tùy biến / Css tùy chỉnh (custom css).
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* AFF Link By VietCoders*/ /* Xóa đoạn comment code này nếu bạn chỉ sử dụng 2 trường. @media (min-width:551px){ .realdev_main-aff { max-width: 70%; } } */ .realdev_main-aff ul { list-style: none; } .realdev_main-aff li { margin-left: 0 !important; display: flex; justify-content: space-around; align-items: center; } .realdev_main-aff { box-shadow: 0 0 20px #ddd; border-radius: 20px; padding: 20px; display: block; margin: 1rem auto; } .realdev_main-aff ul,.realdev_main-aff li:last-child { margin-bottom: 0 !important; } .realdev_main-aff li span:first-child {max-width: 15%;flex-basis: 15%;text-align: center;} .realdev_main-aff li span { margin: 0 5px; flex: 1; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .realdev_main-aff li span a { padding: 8px; background: #ff6900; color: white; width: -webkit-fill-available; display: inline-block; border-radius: 12px; text-align: center; } .realdev_title { text-align: center; font-size: 20px; font-weight: bold; } .realdev_main-aff li img { max-width: 4rem; height: auto; } |
Lưu ý:
- Trong 2 code trên đều có phần nội dung được để giữa /* … */ nếu bạn cần thay đổi điều gì hoặc code gặp vấn đề thì bạn chỉ cần xóa phần comment đó là được (chỉ xóa đoạn chữ tiếng việt, không xóa code).
Bước 5: Vào sửa sản phẩm. Giờ đây bạn sẽ thấy phần Link Anchor – Link Text. Bạn copy link affiliate vào trường Link Text và thêm văn bản cho link vào trường Link Anchor. Mặc định trong bài viết ở WooCommerce Product nút tiếp thị liên kết này sẽ đứng dưới nút Mua ngay. Vậy nên anh em có thể tùy biến lại vị trí sao cho phù hợp với giao diện của mình nhé.
Cuối cùng: Lưu bài viết lại và reload lại trang để trải nghiệm thành quả nhé. Nếu có bất kỳ thắc mắc nào bạn có thể comment ở dưới bài viết này hoặc truy cập bài viết trên facebook https://www.facebook.com/groups/flatsomevn/posts/2889656784674489.
Như vậy là bài viết hướng dẫn tạo nút Affiliate, chèn link sàn TMĐT vào website WooCommerce đã hoàn tất. Chúc bạn thành công!
