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

Woocommerce core script overwrites custom CSS styling

本文关键字：CSS 样式 自定义 覆盖 核心 脚本 Woocommerce      更新时间：2023-09-26

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

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

有没有办法停止这种行为（停止或覆盖脚本），而不必编辑核心文件？

以前有人处理过这个问题吗？

编辑

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

我个人认为最简单的方法是取消设置所有样式，将样式从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 );

最简单的方法是从相应 Javascript 文件的 CSS 属性中删除 ！important。一般来说，应该避免使用！重要的CSS属性。当 ！important 属性从 Javascript 中删除时，您应该能够用自己的 CSS 覆盖特定的 CSS 属性。

相关文章：