WooCommerce 在每個頁面上加載三個核心 CSS 樣式表，並在 WordPress 站點上安裝時發佈。通過從不需要它的頁面和內容中刪除樣式和腳本，可以節省一些頁面加載時間。
它還從它用於其功能的庫中加載了一堆其他 javascripts 和 CSS 樣式。
以下是如何以不同方式加載這些文件，以便它們僅出現在您需要的頁面上，從而加快非 WooCommerce 內容的頁面加載時間。
- woocommerce-layout.css
- woocommerce-smallscreen.css
- woocommerce.css
這些是從 /wp-content/plugins/woocommerce/assets/css/ 加載的
Woo 已經使用過濾器來刪除所有 3 個或刪除單個過濾器。
// Remove each style one by one add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' ); function jk_dequeue_styles( $enqueue_styles ) { unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation return $enqueue_styles; } // Or just remove them all in one line add_filter( 'woocommerce_enqueue_styles', '__return_false' );你可以這樣做，只需添加自己的 CSS 樣式
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' ); } }這很棒，但它仍會在每個頁面上加載，如果您將 WooCommerce 保留在默認頁面上，則可以有條件地加載 CSS 文件。
add_action('wp_enqueue_scripts','wpb_load_woocommerce'); function wpb_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'); } }另一種僅在 WooCommerce 產品和商店頁面上加載 CSS 樣式和 Javascripts 的好方法是在所有其他頁面上將它們出列。
add_action( 'template_redirect', 'remove_woocommerce_styles_scripts', 999 ); function remove_woocommerce_styles_scripts() { if ( function_exists( 'is_woocommerce' ) ) { if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) { remove_action('wp_enqueue_scripts', [WC_Frontend_Scripts::class, 'load_scripts']); remove_action('wp_print_scripts', [WC_Frontend_Scripts::class, 'localize_printed_scripts'], 5); remove_action('wp_print_footer_scripts', [WC_Frontend_Scripts::class, 'localize_printed_scripts'], 5); } } }這裏所有的 Woo 樣式和腳本都是通過在頁面加載之前掛鈎到’template_redirect’ 的最後一個鈎子並刪除所有樣式和腳本的初始 Woo add_action 來刪除的。
