如何从不需要 WooCommerce 的页面中删除 WooCommerce CSS 样式和 js 脚本

WooCommerce 在每个页面上加载三个核心 CSS 样式表，并在 WordPress 站点上安装时发布。通过从不需要它的页面和内容中删除样式和脚本，可以节省一些页面加载时间。

它还从它用于其功能的库中加载了一堆其他 javascripts 和 CSS 样式。

以下是如何以不同方式加载这些文件，以便它们仅出现在您需要的页面上，从而加快非 Woo​​Commerce 内容的页面加载时间。

• 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 来删除的。