Hướng dẫn cách thêm tab trong sản phẩm woocommerce

Bán muốn thêm nhiều thông tin hơn , để khách hàng có thể xem chi tiết sản phẩm hơn, vậy làm thế nào để thêm tab products sản phẩm khi dùng plugin woocommerce, Hày cùng Sơn Web tìm hiểu 1 số plugin hay dùng code để thêm tab cho trang single product kết hợp plugin acf pro để tạo tab động như thế nào nhé 

1 Sử dụng WooCommerce Tab Manager

Đây là plugin được bán trên https://woocommerce.com/products/woocommerce-tab-manager/ với giá 99$, trước đây mình đã mua cho khách hàng để làm thử 

Bạn xem chi tiết cách sử dụng plugin này tại đây: https://docs.woocommerce.com/document/tab-manager/

Bạn download free plugin tại đây : Download plugin Woocommerce tab manager

pass giải nén file: sonweb.net

Sau khi cài đặt kích hoạt, bạn Admin-> Woocommerce – Tab manager 

Tại đây khi chọn Default Tab Layout, bạn có thể xoá hay sửa 2 tab Description, Review mặc định,đổi tên tiêu đề , hay thêm tab mới,

Để tạo tab trong trang chi tiết sản phẩm , bạn chọn Menu Tabs, và ghi đè như hình:

Bạn có thể xem video hướng dẫn chi tiết tại đây: 

2 Sử dụng Plugin Custom Product Tabs for WooCommerce

Đây là 1 plugin miễn phí được rút gọn từ plugin Woocommerce Tab Manage Mặc định trang chi tiết sản phẩm của Woocommerce có 3 tab mặc định là Description(nội dung sản phẩm),Additional Information,Reviews.Nhưng nếu như bạn muốn thêm thông tin như sách sách bảo hành,thông số kỹ thuật.., nếu bạn không rành code có thể sử dụng plugin Custom Product Tabs for WooCommerce

Để thêm tab cho sản phẩm, bạn vào trang chi tiết sản phẩm, chọn tới menu Custom tabs và click add tab như hình sau:

Để thêm nhiều tab, bạn chỉ cần chọn Add a tab.Sau khi tạo xong bạn sẽ thấy , nội dung tab hiển thị ngoài trang sản phẩm như sau:

3 Thêm tab bằng cách sử dụng code custom Woocommerce

/**
 * Customize product data tabs
 */
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {

	$tabs['description']['callback'] = 'woo_custom_description_tab_content';	// Custom description callback

	return $tabs;
}

function woo_custom_description_tab_content() {
	echo '
<h2>Custom Description</h2>
';
	echo '

Here\'s a custom description
';
}

Xem chi tiết hướng custom tab woocommerce tại đây nhé: https://docs.woocommerce.com/document/editing-product-data-tabs/
Bạn tham khảo thêm Một số plugin tạo Additional tabs woocommerce plugin bạn tham khảo thêm dưới đây nhé:

WooCommerce Custom Product Tabs Lite
YITH WooCommerce Tab Manager
Elegant Tabs for WooCommerce
Woocommerce custom product tabs

 




            

    

            

            


        
            

            


        
            

            


        
            

            


        
            

            


        
    
    

            

            


        
            

            


        
            

            


        
            

            


        
            

            


        
    

                


            5/5 - (1 bình chọn)    
    

				 Lượt xem: 218