Custom Tabs Woocommerce không cần plugin

Ở bài viết trước mình đã chia sẻ với các bạn cách tạo Custom Tabs Woocommerce bằng plugin, hôm nay chúng ta sẽ tạo tabs mời bằng cách chèn code vào trong file function .

Thêm Custom Tabs Woocommerce vào trang sản phẩm

Sử dụng bộ lọc woocommerce_product_tabs để thêm tab tùy chỉnh vào trang sản phẩm trong Woocommerce . Ví dụ mình sẽ thêm tab thanh toán vào

add_filter( 'woocommerce_product_tabs', 'flwoo_new_product_tab' );
function flwoo_new_product_tab( $tabs ) {
	$tabs['ctdt_tab'] = array(
		'title' => __( 'Thanh toán', 'woocommerce' ),
		'priority' => 40,
		'callback' => 'noi_dung_tab_thanh_toan'
		);
	return $tabs;
}

function noi_dung_tab_thanh_toan() {
  	echo 'Nội dung của tab thanh toán';
}

add_filter( 'woocommerce_product_tabs', 'flwoo_new_product_tab' );

function flwoo_new_product_tab( $tabs ) {

$tabs['ctdt_tab'] = array(

'title' => __( 'Thanh toán', 'woocommerce' ),

'priority' => 40,

'callback' => 'noi_dung_tab_thanh_toan'

);

return $tabs;

}

function noi_dung_tab_thanh_toan() {

echo 'Nội dung của tab thanh toán';

}

title : Tiêu đề của tab
priority : Mức độ ưu tiên dùng để xác định thứ tự vị trí của tab
callback : Gọi đến hàm function xử lý in ra nội dung của custom tab

Sắp xếp lại thứ tự các Tabs

Bình thường mặc định trong Woocommerce thứ tự ưu tiên các tab như sau

Tab Mô tả (Description) có độ ưu tiên priority là : 10
Tab thông tin bổ sung (Additional Information) là : 20
Tab đánh giá (Reviews) là : 30

Hiện tại trong ví dụ đang thiếu tab thông tin bổ sung nên mình sẽ sắp xếp 2 tab mặc định kia và tab thanh toán mới tạo có mức độ ưu tiên khi này là 40 lại . Tab thanh toán đang nằm ở vị trí cuối giờ ta sẽ cho nó lên đầu chẳng hạn . Để làm được điều này sẽ phải sử dụng lại bộ lọc woocommerce_product_tabs một lần nữa .

add_filter( 'woocommerce_product_tabs', 'sap_xep_lai_tab');
function sap_xep_lai_tab($tabs) {
	$tabs['ctdt_tab']['priority'] = 5;
	$tabs['description']['priority'] = 10;
	$tabs['reviews']['priority'] = 20;
    return $tabs;
}

add_filter( 'woocommerce_product_tabs', 'sap_xep_lai_tab');

function sap_xep_lai_tab($tabs) {

$tabs['ctdt_tab']['priority'] = 5;

$tabs['description']['priority'] = 10;

$tabs['reviews']['priority'] = 20;

return $tabs;

}

Chúc các bạn thành công !

0 0 vote

Article Rating

Nhận thông báo qua email

2 Comments

Cũ nhất

Mới nhất Bình chọn nhiều nhất

Inline Feedbacks

View all comments

Đức

1 năm cách đây

bạn cho mình hỏi chút 1) vào web bạn có cái nhảy lên là “ai đó đang xem…bài ABC” là plugin gì thế? 2) phiên bản flatsome 3.8.3 nó cho phép thêm 1 tab tùy chỉnh trong option rồi, nhưng mà mình cũng muốn chỉnh thứ tự của nó như bạn hướng dẫn thì làm sao biết tab tùy chỉnh có sẵn đó “mã” là gì để gán thứ tự? (ví dụ của bạn là ctdt_tab) 3) Code custom tab này vẫn là nội dung cố định nhỉ, có code nào mà tạo ra ở mỗi sản phẩm thêm 1… Đọc thêm »

Phản hồi

Tác giả

Thể Thiu

Reply to Đức

Cám ơn bạn đã để lại câu hỏi ? 1. Mình dùng plugin wpfomo bạn tham khảo bài viết này nhé https://theprokey.com/plugin-tao-thong-bao-wordpress-wpfomo/ 2. Mình chưa có cơ hội sử dụng bản 3.8.3 nên chưa câu trả lời cho câu hỏi này =)) Câu fỏi này mình sẽ trả lời sau nghen ! 3.Code custom tab này vẫn là nội dung cố định , sản phẩm nào cũng sẽ có tab như thế . Còn code nào mà tạo ra ở mỗi sản phẩm thêm 1 hoặc nhiều tab tùy chọn mình xin khẳng định là có vì có mới đóng… Đọc thêm »