如何编辑 Woocommerce style.dev css 文件？

Question

我正在尝试编辑来自 style.dev.css 的 Woocommerce 结帐页面的样式。我试图将文件复制到我的子主题目录并在新的子文件中进行更改。但是，页面似乎仍在加载原始文件而不是主题文件我没有在 style.css 子文件中进行编辑的原因是大多数选择器都有 !important 并且不想进行大量覆盖。请问有人知道我错过了什么吗？

Answer 1

WooCommerce 的文档可以帮助您实现所需的目标。

WooCommerce - Disable the default stylesheet

禁用所有样式表

WooCommerce 默认将 3 个样式表排入队列。您可以使用以下 sn-p 将它们全部禁用：

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); 

禁用特定样式表

如果您想禁用特定样式表（即，如果您不想包含手持式样式表），您可以使用以下命令：

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

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

然后像这样将您自己的样式表排入队列：

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' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );