Với những sản phẩm có nhiều thuộc tính khác nhau như: màu sắc, kích thước, dung tích, chất liệu, xuất xứ,… thì việc sử dụng tính năng “biến thể cho sản phẩm” là sự lựa chọn hợp lý, giúp khách hàng dễ dàng cho nhiều sự chọn lựa để đưa vào giỏ hàng cũng như nắm được thông tin, cấu hình của sản phẩm một cách nhanh chóng hơn.

Ví dụ: khi bạn vào xem một chiếc điện thoại iphone 14, lúc này hầu hết các website trên thị trường sẽ có nhiều biến thể khác nhau cho bạn lựa chọn: màu sắc [đen, đỏ, hồng, vàng,..], dung lượng [64Gb, 128Gb, 512Gb, 1TB,…] và mỗi một biến thể sẽ tương ứng với giá khác nhau. Tương tự với nhiều sản phẩm khác cũng vậy: tivi có độ phân giải màn hình, quần áo có chất liệu và size hay màu sắc,..

Hình ảnh sản phẩm biến thể về trọng lượng của sản phẩm

Hiện nay hầu hết việc thiết kế website trên nền tảng WordPress đều có hỗ trợ tính năng biến thể thông qua Woocommerce với plugin Variation Swatches for WooCommerce, bao gồm cả bản miễn phí và bản trả phí với nhiều tính năng hơn.

Hình ảnh sản phẩm biến thể: nguồn gốc, thương hiệu, trọng lượng,…

Ngoài Plugin thì một số theme hiện nay cũng có hỗ trợ tính năng sản phẩm biến thể, và một trong số đó là theme Flatsome “thần thánh”. Ưu điểm khi sử dụng biến thể của theme Flatsome là bạn không cần cài thêm plugin, ngược lại nhược điểm sản phẩm của bạn tại phần mô tả chi tiết sẽ có theme tab “THÔNG TIN BỔ SUNG” được sinh ra nhằm hiển thị những thông tin của biển thể [như hình dưới]

Hướng dẫn bỏ tab “Thông tin bổ sung” cho sản phẩm biến thể trên theme Flatsome

Để loại bỏ tab “thông tin bổ sung” trên theme Flatsome, bạn làm theo cách dưới đây nhé

Bước 1: Tại giao diện admin của website, bạn vào phần Giao diện

Bước 2: Bạn chọn bấm vào Theme File Editor

Bước 3: Bạn chọn giao diện để chỉnh sửa là: Flatsome Child

Bước 4: Bạn bấm vào file có tên Functions.php

4 bước để thêm code vào file functions.php

Bước 5: Bạn chèn đoạn code sau vào đoạn cuối của file functions.php

function balico_remove_product_tabs[ $tabs ] { unset[ $tabs['additional_information'] ]; return $tabs; } add_filter[ 'woocommerce_product_tabs', 'balico_remove_product_tabs', 98 ];

Bước 6: bấm Cật nhật tập tin để lưu lại đoạn code

Lúc này bạn ra ngoài sẽ thấy tab “THÔNG TIN BỔ SUNG” đã không còn.

Ngoài cách trên bạn cũng có thể ẩn tab này đi bằng đoạn CSS sau [nhưng cách này không được tối ưu bằng cách trên]

Bạn mở phần Custom CSS lên và chèn đoạn code sau đây vào:

li

tab-title-additional_information {

display: none;  

}

Xem thêm: Hướng dẫn hiển thị số lượng sản phẩm đã bán trên Woocommerce

Như vậy với mấy bước đơn giản, mình đã hướng dẫn bạn bỏ tab “Thông tin bổ sung” cho sản phẩm biến thể trên theme Flatsome đơn giản rồi phải không nào, nếu bạn có câu hỏi hay vấn đề nào hãy liên hệ với mình để được hỗ trợ tốt nhất. Chúc bạn thành công

Với 12 năm kinh nghiệm: Thiết kế web, SEO từ khóa, Adwords,… Tôi thành lập BALICO với mục tiêu mang đến những giải pháp chuyển đổi số trong kinh doanh dành cho doanh nghiệp vừa và nhỏ [SME], nâng cao năng lực cạnh tranh, đồng hành cùng khách hàng tự tin bước vào kỷ nguyên công nghệ 4.0

Tab “Thông tin bổ sung” trong trang sản phẩm đôi lúc gây cho chúng ta nhiều sự phiền toái và thực sự không cần thiết.

Có hai cách đơn giản để xóa hoặc ẩn tab này chính là: sử dụng code trong PHP hoặc CSS. Trong trường hợp sử dụng CSS, bạn có thể thêm một đoạn code nho nhỏ vào trong file style.css của child theme hoặc phần tùy chỉnh CSS của theme bạn đang sử dụng [ nếu được hỗ trợ]. Trong phương pháp thứ hai, sử dụng PHP thì bạn sẽ thêm đoạn code bên dưới vào file functions.php

Tuy nhiên, hãy nên lưu ý rằng PHP sẽ tốt hơn CSS trong trường hợp này: vì với CSS, website của bạn sẽ vẫn tải thông tin của tab thông tin bổ sung và hiển thị chúng trên website, sau đó CSS sẽ ẩn nó đi; trong khi đó với PHP, hệ thống sẽ dừng hoàn toàn việc tải thông tin từ cơ sở dữ liệu. Chính vì lẽ đó, mình sẽ sử dụng PHP để tăng thêm chút tốc độ cho website.

add_filter[ 'woocommerce_product_tabs', 'dieuhau_remove_product_tabs', 98 ]; function dieuhau_remove_product_tabs[ $tabs ] { unset[ $tabs['additional_information'] ]; return $tabs; }

Tôi không biết code, vậy có plugin nào hỗ trợ việc này không?

Với những bạn đã học lập trình hoặc có chút kiến thức về PHP thì sẽ hoàn toàn tự tin với việc thêm đoạn code trên vào WordPress, tuy nhiên đa số mọi người lại không rành việc này.

Trong trường hợp này, mình khuyên bạn nên sử dụng plugin YITH WooCommerce Tab Manager. Ngoài những tính năng cơ bản như xóa, thay đổi thứ tự các tab mặc định của WooCommerce như đánh giá, mô tả… bạn còn có thể thêm các tab tùy ý, hiển thị các tab này theo chuyên mục hoặc theo từng sản phẩm cụ thể. Hơn nữa bạn cũng có thể thêm các thông tin theo ý thích, hiển thị hoặc ẩn trên thiết bị di động.

Thêm đoạn code trên vào đâu?

Bạn có thể thêm đoạn code PHP trên vào cuối cùng của file functions.php của child theme [trước ký tự “?>” nếu có]. Về CSS, bạn có thể thay đổi trong file custom.css của child theme. Trước khi thay đổi, hãy đảm bảo rằng bạn biết mình đang làm gì, vì việc thay đổi này có thể gây lỗi hoặc chết website. Nếu bạn cần thêm hướng dẫn, bạn hãy để lại bình luận ở bên dưới hoặc xem thêm các hướng dẫn khác trên dieuhau.com.

Đoạn code trên vẫn còn hoạt động?

Xin hãy để lại bình luận bên dưới nếu đoạn code trên hoạt động như mong đợi với bạn. Mình luôn sẵn sàng cập nhật, chỉnh sửa nếu đoạn code không làm việc với các phiên bản mới của WordPress và WooCommerce.