Code thêm tab Hướng dẫn sử dụng cho trang sản phẩm trong Flatsome

Bài viết này mình sẽ hướng dẫn bạn cách thêm tab Hướng dẫn sử dụng cho trang sản phẩm trong Flatsome nhé.

Khách mua mỹ phẩm, thực phẩm hay đồ gia dụng thường muốn xem cách dùng ngay trên trang sản phẩm, chứ không muốn mò trong phần mô tả dài. Flatsome mặc định chỉ có các tab Mô tả, Thông tin bổ sung và Đánh giá, không có tab Hướng dẫn sử dụng riêng, muốn có thì bạn phải code thêm nhé.

Thêm code tab Hướng dẫn sử dụng

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme Flatsome nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
function nn_flatsome_them_tab_huong_dan($tabs) {
    $tabs['huong_dan_su_dung'] = array(
        'title'    => 'Hướng dẫn sử dụng',
        'priority' => 25,
        'callback' => 'nn_flatsome_noi_dung_tab_huong_dan',
    );
    return $tabs;
}
add_filter('woocommerce_product_tabs', 'nn_flatsome_them_tab_huong_dan');

function nn_flatsome_noi_dung_tab_huong_dan() {
    echo '<h2>Hướng dẫn sử dụng</h2>';
    echo '<p>Bước 1: Đọc kỹ thông tin trên bao bì trước khi dùng lần đầu.</p>';
    echo '<p>Bước 2: Dùng đúng liều lượng và tần suất ghi trên bao bì, không tự ý tăng liều.</p>';
    echo '<p>Bước 3: Bảo quản nơi khô ráo, thoáng mát, tránh ánh nắng trực tiếp.</p>';
    echo '<p>Bạn sửa các dòng chữ trong hàm này thành hướng dẫn thật của từng dòng sản phẩm trước khi chạy chính thức nhé.</p>';
}

Code trên móc vào filter woocommerce_product_tabs để thêm một tab mới có khóa huong_dan_su_dung, tiêu đề Hướng dẫn sử dụng và độ ưu tiên 25. Trong WooCommerce, tab Mô tả có độ ưu tiên 10, Thông tin bổ sung là 20 và Đánh giá là 30, nên tab mới sẽ nằm ngay trước tab Đánh giá. Nội dung tab do hàm nn_flatsome_noi_dung_tab_huong_dan in ra, và Flatsome tự định dạng tab này theo đúng kiểu tab sẵn có của theme nên bạn không cần thêm CSS.

Đưa tab ra giao diện trong Flatsome

Bạn lưu file functions.php là tab tự hiện trên mọi trang sản phẩm, không cần cấu hình gì thêm trong UX Builder. Trước khi chạy chính thức, bạn sửa các dòng chữ trong hàm callback thành hướng dẫn thật của shop mình. Muốn đổi tên tab thì sửa dòng title trong code, ví dụ thành “Cách sử dụng” hay “Hướng dẫn bảo quản” tùy mặt hàng.

Lưu ý khi dùng

Vì nội dung tab được viết cứng trong code nên tab này hiện giống nhau cho mọi sản phẩm. Nếu shop bạn bán nhiều dòng hàng khác nhau thì cách gọn nhất là viết một hướng dẫn chung dùng được cho cả dòng hàng, rồi sửa lại code sau khi đã có hướng dẫn riêng cho từng nhóm sản phẩm.

Kết luận

Vậy là chỉ với 1 đoạn code ngắn bạn đã thêm được tab Hướng dẫn sử dụng cho trang sản phẩm trong Flatsome rồi nhé. Tính năng này đi chung với bài code hiển thị số lượng đã bán trên trang sản phẩm trong Flatsome và bài code thêm thanh tiến trình miễn phí vận chuyển trong Flatsome là thành combo tăng tin tưởng khá tốt cho trang sản phẩm.

Nếu cần mình kèm 1-1 về Flatsome thì cứ liên hệ mình nhé.