Thời gian đọc: 3 phút
Để thêm một tab mới trong trang sản phẩm của WooCommerce, bạn có thể sử dụng các hook mà WooCommerce cung cấp. Dưới đây là hướng dẫn từng bước để thực hiện điều này:
woocommerce_product_tabs
HookBạn có thể thêm code sau vào file functions.php
của theme (hoặc child theme) bạn đang sử dụng:
function custom_product_tab($tabs) {
// Thêm tab mới
$tabs['custom_tab'] = array(
'title' => __('Tab Custom', 'your-text-domain'),
'priority' => 50, // Thứ tự hiển thị của tab, số nhỏ hơn sẽ hiển thị trước
'callback' => 'custom_product_tab_content'
);
return $tabs;
}
add_filter('woocommerce_product_tabs', 'custom_product_tab');
function custom_product_tab_content() {
echo '<h2>' . __('Nội dung của Tab Custom', 'your-text-domain') . '</h2>';
echo '<p>' . __('Đây là nội dung bạn muốn hiển thị trong tab custom.', 'your-text-domain') . '</p>';
}
custom_product_tab
function:
$tabs
với một khóa là 'custom_tab'
.'custom_tab'
bao gồm:
'title'
: Tiêu đề của tab.'priority'
: Thứ tự ưu tiên hiển thị của tab (tab nào có priority nhỏ hơn sẽ xuất hiện trước).'callback'
: Hàm callback để hiển thị nội dung của tab.custom_product_tab_content
function:
Bạn có thể tùy chỉnh nội dung của tab theo yêu cầu của bạn. Ví dụ, nếu bạn muốn hiển thị nội dung tùy chỉnh từ trường meta của sản phẩm, bạn có thể làm như sau:
function custom_product_tab_content() {
global $post;
$custom_field_value = get_post_meta($post->ID, '_your_custom_field_key', true);
echo '<h2>' . __('Nội dung của Tab Custom', 'your-text-domain') . '</h2>';
if ($custom_field_value) {
echo '<p>' . esc_html($custom_field_value) . '</p>';
} else {
echo '<p>' . __('Không có nội dung nào để hiển thị.', 'your-text-domain') . '</p>';
}
}
'your-text-domain'
bằng text domain của theme hoặc plugin của bạn để hỗ trợ dịch thuật.'_your_custom_field_key'
bằng key của custom field mà bạn muốn hiển thị nội dung.Với cách làm này, bạn có thể dễ dàng thêm một tab tùy chỉnh vào trang sản phẩm của WooCommerce mà không cần cài đặt thêm plugin. Bạn có thể tùy chỉnh nội dung tab theo nhu cầu cụ thể của mình, như hiển thị thông tin từ các trường meta tùy chỉnh hoặc bất kỳ thông tin nào khác mà bạn muốn.