Từ phiên bản cập nhật 9.6, WooCommerce đã chính thức tích hợp và tự động kích hoạt tính năng Thương hiệu (Brands) trên mọi nền tảng website sử dụng plugin này. Về mặt lý thuyết, đây là một tính năng hữu ích giúp các chủ cửa hàng phân loại và quản lý sản phẩm theo nhà sản xuất một cách chuyên nghiệp. Tuy nhiên, đối với những website không có nhu cầu sử dụng, việc tính năng này tự động chạy ngầm sẽ tạo ra một lượng tài nguyên thừa thãi, cụ thể là việc tải thêm file brands-styles-css trên toàn bộ các trang. Điều này vô tình làm tăng số lượng yêu cầu HTTP (HTTP requests), gây ảnh hưởng tiêu cực đến tốc độ tải trang và chỉ số Core Web Vitals. Bài viết này sẽ phân tích sâu về vấn đề và hướng dẫn bạn cách tắt hoàn toàn WooCommerce Brands để tối ưu hóa hiệu suất website.
Hiểu rõ về tính năng WooCommerce Brands và tác động hiệu năng
Trước khi đi sâu vào giải pháp kỹ thuật, chúng ta cần xác định rõ tính năng này nằm ở đâu và nó ảnh hưởng như thế nào đến hệ thống WordPress của bạn. Sau khi nâng cấp lên phiên bản WooCommerce 9.6 trở lên, một menu mới có tên Thương hiệu (Brands) sẽ xuất hiện trong phần quản trị Sản phẩm (Products).
Mục Thương hiệu hiển thị trong menu Sản phẩm của WooCommerce Dashboard
Không chỉ xuất hiện ở menu chính, tùy chọn phân loại này còn được tích hợp trực tiếp vào trang chỉnh sửa chi tiết của từng sản phẩm, nằm bên cạnh các mục quen thuộc như Danh mục hay Thẻ (Tags).
Giao diện chọn Thương hiệu trong trang chỉnh sửa sản phẩm
Về bản chất kỹ thuật, Brands là một taxonomy (phân loại) tùy chỉnh của WooCommerce. Tuy nhiên, vấn đề hiệu năng nằm ở chỗ: ngay cả khi bạn không gán bất kỳ thương hiệu nào cho sản phẩm, WooCommerce vẫn tải một file CSS riêng biệt có tên brands-styles-css vào phần <head> của website.
Mã nguồn website hiển thị file brands-styles-css đang được tải
Nếu bạn đang nỗ lực tối ưu điểm số PageSpeed Insights hoặc giảm thiểu CSS không dùng đến (Unused CSS), việc loại bỏ file này là cực kỳ cần thiết.
Giải pháp vô hiệu hóa WooCommerce Brands
Để xử lý triệt để vấn đề này, chúng ta cần can thiệp vào cấu hình của WooCommerce. Dưới đây là các phương pháp thực hiện từ đơn giản đến chuyên sâu, tùy thuộc vào giao diện (Theme) bạn đang sử dụng.
Phương pháp 1: Sử dụng Code Snippet (Áp dụng cho mọi Theme)
Đây là phương pháp tổng quát và hiệu quả nhất, có thể áp dụng cho bất kỳ website WordPress nào, bất kể bạn đang dùng theme Flatsome, WoodMart hay theme tự code.
Chúng ta sẽ sử dụng hook init để thay đổi tùy chọn trong cơ sở dữ liệu của WordPress. Bạn có thể thêm đoạn mã sau vào file functions.php của Child Theme hoặc sử dụng plugin quản lý code như Code Snippets (khuyên dùng để đảm bảo an toàn khi cập nhật theme).
Đoạn mã tắt tính năng Brands:
//* Tắt tính năng WooCommerce Brands
add_action( 'init', function() {
update_option( 'wc_feature_woocommerce_brands_enabled', 'no' );
} );Cơ chế hoạt động: Hàm update_option sẽ chuyển giá trị cài đặt wc_feature_woocommerce_brands_enabled trong bảng wp_options sang no.
Lưu ý quan trọng: Sau khi thêm code và tải lại trang quản trị (F5), bạn nên vào kiểm tra menu Sản phẩm. Nếu mục “Thương hiệu” đã biến mất, tức là lệnh đã được thực thi thành công. Lúc này, bạn có thể xóa đoạn code trên vì cấu hình đã được lưu vĩnh viễn vào database, không cần chạy lại mỗi lần tải trang.
Phương pháp 2: Cấu hình trên Theme Paradise
Nếu website của bạn đang sử dụng Theme Paradise (một theme bán hàng phổ biến tại Việt Nam), nhà phát triển đã tích hợp sẵn tùy chọn này trong bộ cài đặt, giúp bạn không phải đụng vào code.
- Đảm bảo bạn đã cập nhật Theme Paradise lên phiên bản 6.8.7 hoặc mới hơn.
- Truy cập vào Giao diện (Appearance) -> Tùy biến (Customize).
- Tìm đến mục Thiết lập giao diện -> Tối ưu tốc độ.
- Tại tùy chọn Loại bỏ Brands CSS, hãy chuyển trạng thái sang Có.
- Nhấn Đăng/Lưu để hoàn tất.
Tùy chọn tắt Brands CSS trong bảng điều khiển Theme Paradise
Sau khi thực hiện, hãy xóa cache (nếu có) và kiểm tra lại front-end để đảm bảo file CSS đã không còn được tải.
Giao diện quản trị WooCommerce báo lỗi brands-styles-css khi chưa tối ưu
Cách kích hoạt lại tính năng Thương hiệu
Trong trường hợp chiến lược kinh doanh thay đổi và bạn cần sử dụng lại tính năng phân loại theo Thương hiệu, việc khôi phục cũng rất đơn giản. Tuy nhiên, vì chúng ta đã can thiệp vào database (ở phương pháp 1), chỉ xóa code cũ là chưa đủ.
Đối với người dùng Code Snippet / Theme thường
Bạn cần chạy một lệnh update_option mới để set giá trị ngược lại thành yes. Hãy thêm đoạn mã sau vào functions.php hoặc plugin Code Snippets:
//* Kích hoạt lại WooCommerce Brands
add_action( 'init', function() {
update_option( 'wc_feature_woocommerce_brands_enabled', 'yes' );
} );Tương tự như khi tắt, bạn chỉ cần tải lại trang Dashboard một lần để lệnh được thực thi. Sau khi thấy mục “Thương hiệu” xuất hiện trở lại, hãy xóa đoạn code này đi để giữ file functions sạch sẽ.
Đối với người dùng Theme Paradise
Quy trình đơn giản hơn nhiều: Bạn chỉ cần quay lại Giao diện -> Tùy biến -> Tối ưu tốc độ và chuyển mục Loại bỏ Brands CSS về trạng thái Không.
Kết luận
Việc kiểm soát các tính năng mặc định của WooCommerce như WooCommerce Brands là một bước đi nhỏ nhưng thể hiện tư duy quản trị hệ thống chuyên nghiệp. Bằng cách loại bỏ file brands-styles-css khi không sử dụng, bạn không chỉ làm sạch mã nguồn mà còn góp phần cải thiện tốc độ tải trang – yếu tố then chốt trong SEO và trải nghiệm người dùng hiện nay.
Hy vọng với hướng dẫn chi tiết từ Thủ Thuật, bạn đã có thể tự tay tối ưu hóa website của mình mà không gặp khó khăn nào. Nếu bạn có bất kỳ câu hỏi nào về kỹ thuật hoặc các vấn đề liên quan đến WooCommerce, đừng ngần ngại để lại bình luận bên dưới để cùng thảo luận với cộng đồng công nghệ.
Discussion about this post