javascript - Woocommerce 核心脚本覆盖自定义 CSS 样式

Question

我正在为 Woocommerce 商店编写完整的自定义 CSS。大多数样式都相对简单；我似乎无法设置选择下拉菜单的样式:

页面加载后，JavaScript 会覆盖选择上的自定义样式并应用来自 /assets/css/chosen.css 的核心样式。具体来说，它设置了 width: 100% !important。

有没有办法在不编辑核心文件的情况下停止这种行为(停止或覆盖脚本)？

有没有人以前处理过这个？

编辑

实际上它并不适用于所有选择下拉列表。看起来它只适用于替换 select 类 chosen-container 的 div。 Here是屏幕截图。

Answer 1

我个人发现最简单的方法是取消设置所有样式，将样式从 woocommerce.css 复制到我自己的样式表并从那里进行编辑。

取消所有默认样式

// Don't load woocommerce style sheets
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

排队你自己的样式表

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

将所有 woocommerce 样式复制到您自己的样式表中并从那里自由编辑它们。或者您提高当前自定义样式表的优先级，使其在 woocommerce.css 之前加载。像这样:

add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style', 15 );