Hướng dẫn tạo nút Affiliates cho sản phẩm woocommerce

Chào các bạn, có nhiều bạn hỏi mình cách chèn một nút custom field trong trang sản phẩm để khi bấm vào nó nhảy sang sang url affiliate trên shopee. Việc này cũng khá dễ, tuy nhiên không hẳn là ai cũng làm được đặc biệt là các bạn mới tìm hiểu làm web. Do đó, theo dõi bài viết này để tự làm được nha.

Khi làm affiliates, các bạn thường nhập link affiliate ở sản phẩm rồi nó link sang shopee hoặc lazada,… Ở trong woocommerce có sản phẩm liên kết/ sản phẩm bên ngoài có thể giúp bạn làm được tác vụ tương tự. Tuy nhiên, điểm hạn chế của tính năng có sẵn trong woo này là nó không mở link sang tab mới mà nó mở link ngay tại trang web đang duyệt nên rất dễ mất khách. Trong khi đó, nhiều bạn vẫn muốn để song song cả nút thêm vào giỏ và nút link affiliates thì mình buộc phải sử dụng cách của mình thôi.

Link xem demo: http://shop.toptheme.info/san-pham/balo-laptop-du-lich-di-hoc-mini-nu-dep-metia-bl63/

Giuseart.com – Thêm nút affiliates bên cạnh nút Thêm giỏ hàng trong sản phẩm woocommerce

Bước 1: Cài đặt plugin Advanced Custom Field

Bước này chỉ cần các bạn cài đặt bản miễn phí có sẵn trên kho plugin của wordpress là được, không cần thiết sử dụng tới bản Pro.

Các bạn vào Quản trị – Plugin – Cài mới – gõ tìm kiếm “Advanced Custom Fields” rồi nhấn nút “Cài đặt“.

Giuseart.com – Cài đặt plugin Advanced Custom Fields

Bước 2: Import Field Group

Sau khi kích hoạt thành công plugin ACF (Advanced Custom Field), các bạn vào Quản trị – Custom Fields – Tools – Select và Import file dưới đây:

Giuseart.com – File dùng để import các bạn tải bên dưới

File dùng để import: https://drive.google.com/file/d/1ZfyZIuElQPXB0AvktTLl8f4wA8fuqEji/view?usp=sharing

Ngay sau khi các bạn import filed group thành công, khi vào giao diện chỉnh sửa sản phẩm nó sẽ xuất hiện một trường nhập link affiliate cho các bạn nhập như hình dưới:

Giuseart.com – Việc của các bạn là nhập link affiliate vào trường nhập dữ liệu mới được tạo

Bước 3: Chèn code hiển thị nút affiliates trong function.php

Các bạn vào Giao diện – Sửa – Function.php và paste đoạn code dưới đây:

/*
* Thêm nút affiliate tùy chỉnh vào bên cạnh nút add to cart
* Share by ninhbinhweb.biz
*/
add_action('woocommerce_after_add_to_cart_button','button_after_addtocart_button');
function button_after_addtocart_button(){
    global $product;
    ?>
    <style>
.button-aff{
    margin-bottom: 0;
    background: #ff0000;
    border-radius: 5px;
    font-size: 16px;
    color: white;}
    </style>
<?php $link_shopee=get_field('link_shopee');?>
<?php if($link_shopee){?>
       <a class="button button-aff" href="<?php echo $link_shopee;?>" target="blank">Mua trên shopee</a>
<?php }?>
   <?php
}

* Thêm nút affiliate tùy chỉnh vào bên cạnh nút add to cart

* Share by ninhbinhweb.biz

add_action('woocommerce_after_add_to_cart_button','button_after_addtocart_button');

function button_after_addtocart_button(){

global $product;

<style>

.button-aff{

margin-bottom: 0;

background: #ff0000;

border-radius: 5px;

font-size: 16px;

color: white;}

</style>

<?php $link_shopee=get_field('link_shopee');?>

<?php if($link_shopee){?>

<a class="button button-aff" href="<?php echo $link_shopee;?>" target="blank">Mua trên shopee</a>

<?php }?>

<?php

}

Sau khi chèn xong là bên ngoài giao diện xem sản phẩm chi tiết đã thêm nút Mua trên shopee rồi nha!

Giuseart.com – Tùy chỉnh text nút affiliates sản phẩm theo ý bạn

Các bạn có thể tùy chỉnh nút affiliates sản phẩm theo ý bạn như hình bên trên mình mô tả nhé!

Lời kết

Như vậy là chúng ta đã thực hành xong việc tạo một nút Custom Field để làm affilites cho sản phẩm rồi, chúc các bạn thành công nhé@

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ GiuseArt.com trong suốt thời gian qua. Chúc các bạn có những trải nghiệm thú vị khi ghé thăm website. Mọi nhu cầu thiết kế, in ấn và làm website, vui lòng liên hệ admin để được tư vấn nhiệt tình:

Mẫu web mới đăng

Mời bạn xem một số mẫu web mới đăng của Toptheme.info | NinhBinhweb