Tạo tab mới trong trang sản phẩm WooCommerce

August 12, 2022

Theo mặc định, WooCommerce chỉ hỗ trợ các tab căn bản như diễn tả, thông báo thêm, Đánh giá.

Vậy nếu bạn có nhu cầu muốn tạo thêm 1 tab mới thì phải làm cho như thế nào? Trong bài viết này mình sẽ hướng dẫn bạn khiến cho điều ấy.

Tạo tab mới trong trang sản phẩm WooCommerce

tao-tab-moi-trong-trang-san-pham-woocommerce

Tạo tab mới cho trang sản phẩm

Bạn hãy thêm đoạn code dưới đây vào file functions.php của theme hoặc child theme nhé.

add_filter( 'woocommerce_product_tabs', 'hk_custom_tab' );
function hk_custom_tab( $tabs ) 

	$tabs['hk_custom_tab'] = array(
		'title'    => 'Học WordPress',
		'callback' => 'hk_custom_tab_content',
		'priority' => 50,
	);

	return $tabs;


function hk_custom_tab_content() 
    echo 'Bạn có thể hiển thị thông tin ở đây';

có title là tiêu đề của tab. Và nội dung của tab sẽ được tuỳ chỉnh ở function hk_custom_tab_content.

trị giá priority là độ ưu tiên, giả dụ bạn muốn tab mới này được hiển thị ở trước nhất, hãy đổi thay 50 thành 5 nhé.

Đây là kết quả mà bạn sẽ đạt được:

Kết quả đạt được sau khi tạo tab

Tạo tab mới cho sản phẩm cụ thể

Bạn có thể thêm điều kiện để hiển thị tab cho các sản phẩm nhất thiết.

add_filter( 'woocommerce_product_tabs', 'hk_custom_tab' );
function hk_custom_tab( $tabs ) 

    global $product;

    if ( $product->get_id() == 68 ) 

        $tabs['hk_custom_tab'] = array(
            'title'    => 'Học WordPress',
            'callback' => 'hk_custom_tab_content',
            'priority' => 50,
        );

    

    return $tabs;
	


function hk_custom_tab_content() 
    echo 'Bạn có thể hiển thị thông tin ở đây...';

Bạn mang thể tiêu dùng thêm biến global $product để lấy được ID của sản phẩm. Trong khoảng ấy tiêu dùng hàm if để kiểm tra điều kiện, nếu thoả nguyện điều kiện của bạn thì tab tuỳ chỉnh mới được hiển thị.

Hãy thay thế ID sản phẩm của mình là 68 thành ID sản phẩm phù hợp với website của bạn nhé.

Lời kết

Mình hi vọng bài viết trên sẽ giúp bạn thêm được một tab mới trong trang sản phẩm WooCommerce.

nếu bài viết này hữu dụng và giúp tiết kiệm được thời gian của bạn, hãy giúp mình san sớt nó. Ngoài ra ví như bạn để ý đến các chủ đề tương tự tương tự, hãy đọc các bài viết chỉ dẫn WooCommerce khác và follow Fanpage để ko bỏ lỡ bài viết mới từ mình nhé.

Theo : https://hocwordpress.vn/tao-tab-moi-trong-trang-san-pham-woocommerce

Thủ thuật wordpress : https://flatsome.xyz/category/thu-thuat

Chia sẽ theme Free : https://flatsome.xyz/category/theme

Chia sẽ Plugin miễn phí : https://flatsome.xyz/category/plugin