Loại bỏ các file CSS mặc định của WooCommerce

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ó.

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

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:

add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
	unset( $enqueue_styles['woocommerce-general'] );	// Remove woocommerce.css
	unset( $enqueue_styles['woocommerce-layout'] );		// Remove woocommerce-layout.css
	unset( $enqueue_styles['woocommerce-smallscreen'] );	// Remove the woocommerce-smallscreen.css
	return $enqueue_styles;
}

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:

add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );
function wp_enqueue_woocommerce_style(){
	wp_register_style( 'mytheme-woocommerce', get_stylesheet_directory_uri() . '/css/woocommerce.css' );
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'mytheme-woocommerce' );
	}
}

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ế:

add_action('wp_enqueue_scripts','wpcb_load_woocommerce');
function wpcb_load_woocommerce() {
if( is_page(array( 'shop', 'cart', 'checkout' ) ) or 'product' == get_post_type() ) {
	wp_enqueue_style( 'wpb-woo', get_stylesheet_directory_uri() . '/css/woocommerce.css',  '', '3', 'all');
	}
}

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 theo dõi 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 nhé. Cảm ơn rất nhiều. :)