Hướng dẫn loại bỏ các file CSS mặc định của WooCommerce một cách đơn giản.
Nhằm mục đích hỗ trợ tốt tính năng bán hàng cơ bản cho tất cả các giao diện WordPress (kể cả những giao diện không phải sinh ra để bán hàng online), WooCommerce sẽ mặc định load các file CSS của nó vào front-end của website. Các file này bao gồm woocommerce-layout.css, woocommerce-smallscreen.css và woocommerce.css. Chúng có dung lượng tương đối lớn nên sẽ ảnh hưởng kha khá tới tốc độ load website của bạn. Trong trường hợp theme của bạn có CSS tùy biến riêng cho WooCommerce thì những file kể trên là không cần thiết.
Tham khảo thêm:
- Loại bỏ tính năng sắp xếp sản phẩm trong WooCommerce
- Loại bỏ tính năng Showing all x results trong WooCommerce
Loại bỏ CSS mặc định của WooCommerce
Để loại bỏ toàn bộ các file CSS mặc định của WooCommerce, các bạn chỉ cần thêm đoạn code sau đây vào file functions.php của theme hoặc child theme đang kích hoạt. Các bạn cũng có thể sử dụng plugin Code Snippets để chèn nó.
Nếu bạn chỉ muốn loại bỏ một vài file nhất định, hãy sử dụng code sau đây:
Lưu ý: xóa dòng code tương ứng với file CSS mà bạn không muốn loại bỏ.
Xóa cache website (nếu có) và cache trình duyệt rồi kiểm tra kết quả bằng tính năng view-source của trình duyệt web.
Chèn file CSS tùy biến vào WooCommerce
Nếu muốn tích hợp file CSS tùy biến của riêng bạn vào WooCommerce, hãy chèn thêm đoạn code sau đây vào file functions.php của theme hoặc child theme đang sử dụng:
Nhớ thay thế /css/woocommerce.css bằng vị trí lưu file (trong thư mục của theme) và tên file cho phù hợp.
Code bên trên sẽ load file CSS tùy biến trên tất cả các trang của website. Nếu bạn chỉ muốn nó load trên các trang như cửa hàng, giỏ hàng, thanh toán và sản phẩm, hãy sử dụng code sau đây để thay thế:
Tham khảo thêm: Tải có điều kiện các file JS và CSS của plugin WooCommerce
Thật đơn giản phải không nào? Chúc các bạn thành công!
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
2 File này cực kỳ nặng. Web mình load ở homepage 90/100 điểm. khi đi vô page sp xuống thậm tệ còn 30/100 điểm.
Nếu theme woo em có nên tắt css woo mặc định không ad
Theme Woo cụ thể là theme nào bạn nhỉ? Bạn có thể tắt thử. Nếu không bị lỗi gì trong việc hiển thị giao diện thì ok. Nếu lỗi thì chỉ cần xóa code đi là được mà.
Flatsome đã thử và bay xác :D
Thanks ad mình đã thử và tốc độ load site lên rất đáng kể
Bài viết rất hữu dụng và hay. Cảm ơn Hiếu nhé.