Tải có điều kiện các file JS và CSS của plugin WooCommerce

WooCommerce là một trong những plugin hỗ trợ xây dựng shop bán hàng online trên nền tảng WordPress phổ biến nhất và tốt nhất hiện nay. Theo mặc định, nếu blog/ website WordPress của bạn có cài đặt WooCommerce thì tất cả các trang đều sẽ tải file JS và CSS của plugin này. Điều đó vô tình khiến cho page-size cũng như lượng request của mỗi trang đều tăng lên đáng kể, làm blog/ website của bạn tải chậm hơn, khách hàng phải đợi lâu hơn và nguy cơ mất khách cũng tăng rõ rệt.

Tải có điều kiện các file JS và CSS của plugin WooCommerce

Danh sách các file CSS và JS mặc định của WooCommerce

http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js http://sitename.com/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js http://sitename.com/wp-content/plugins/woocommerce/assets/js/jquery-cookie/jquery.cookie.min.js http://sitename.com/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js

http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css http://sitename.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css

Để nhìn thấy danh sách các file này, các bạn chỉ cần view source của site trên trình duyệt web hoặc sử dụng các công cụ kiểm tra tốc độ. Nhớ tắt plugin minify hay cache (nếu có) trước khi xem nhé.

Tải có điều kiện các file JS và CSS của WooCommerce

Tải có điều kiện các file JS và CSS của WooCommerce nghĩa là chỉ cho phép chúng tải trên những trang do WooCommerce tạo ra, chẳng hạn như Shop, Cart, Checkout, My Account… Không cho phép chúng tải trên các trang khác (không cần đến CSS và JS của WooCommerce) để tránh làm chậm trang.

Tất cả những gì các bạn cần làm là chèn đoạn code sau đây vào cuối file functions.php của theme (hoặc child theme) mà bạn đang sử dụng:

//* Conditional load WooCommerce's JS and CSS
function conditionally_load_woc_js_css(){
if( function_exists( 'is_woocommerce' ) ){
# Only load CSS and JS on Woocommerce pages
if(! is_woocommerce() && ! is_cart() && ! is_checkout() ) {

## Dequeue scripts.
wp_dequeue_script(‘woocommerce’);
wp_dequeue_script(‘wc-add-to-cart’);
wp_dequeue_script(‘wc-cart-fragments’);

## Dequeue styles.
wp_dequeue_style(‘woocommerce-general’);
wp_dequeue_style(‘woocommerce-layout’);
wp_dequeue_style(‘woocommerce-smallscreen’);

}
}
}

add_action( ‘wp_enqueue_scripts’, ‘conditionally_load_woc_js_css’ );

Lưu lại, xóa cache và minify của web (nếu có), xóa cache trình duyệt và xem kết quả. Chúc các bạn thành công!

Nguồn: https://wpcanban.com/wordpress/thu-thuat-wordpress/tai-co-dieu-kien-js-css-woocommerce.html

0903.744.240