用自定义插件覆盖插件 CSS

Question

我希望用我的自定义插件覆盖插件的 CSS，并避免使用 !important。

目前我的插件 css 加载了这段代码：

function eatsmart_load_plugin_css() {
    $plugin_url = plugin_dir_url( __FILE__ );

    wp_enqueue_style( 'style', $plugin_url . 'style.css' );

}
add_action( 'wp_enqueue_scripts', 'eatsmart_load_plugin_css' );

例如，我使用的是基本的 CSS，它只覆盖了 !important

.woocommerce ul.products.columns-5 li.product, .woocommerce-page ul.products.columns-5 li.product {
    width: 20% !important; }

想知道有没有办法优先考虑这个 CSS 以便我遵循更好的做法？

提前感谢您的帮助。

我使用自己的插件执行此操作的原因是它有助于通过 FTP 使用我的代码编辑器进行编码的工作流程，而且我知道有一些插件可以做到这一点，但我希望拥有更少的插件安装并在此过程中学习新东西。

Answer 1

您可以使用 wp_dequeue_style 删除排队的样式，然后您可以添加自定义 CSS

add_action( 'wp_enqueue_scripts', 'remove_plugin_css_and_add_my_custom_css', 11 );
function remove_plugin_css_and_add_my_custom_css() {
    wp_dequeue_style( 'style' );
    wp_enqueue_style( 'your-handle', 'your-css-path' );
}

用自定义插件覆盖插件 CSS

Override plugin CSS with custom plugin

css

php

wordpress

plugins

woocommerce-product-bundles