Question

覆盖woocommerce.css的最佳方法是什么？在我的style.css中，我必须再次编写那些css来覆盖它，并在每个css之后放置！important。我认为这不是最好的做法。谁有更好的主意？

Answer 1

默认情况下，WooCommerce将3个样式表排入队列。您可以使用以下方法禁用它们：

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

有关如何停用单个WooCommerce样式表的详细信息，请参阅他们的Disable the default stylesheet文章。

Answer 2

Carrie Dills在an article中采用了另一种方法。她使用的是Genesis主题，但我可以为其他主题重新设计。

从本质上讲，她建议更改样式加载的顺序，以便在 WooCommerce样式表之后加载主题的样式表。即它以更高的优先级排列。

对于Genesis，它看起来如下所示。如果您可以使用类似的钩子访问框架/主题的样式表加载，您也可以这样做。

/** * Remove Genesis child theme style sheet * @uses genesis_meta <genesis/lib/css/load-styles.php> */ remove_action( 'genesis_meta', 'genesis_load_stylesheet' ); /** * Enqueue Genesis child theme style sheet at higher priority * @uses wp_enqueue_scripts <http://codex.wordpress.org/Function_Reference/wp_enqueue_style> */ add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 15 );

Answer 3

您可以使用custom.css文件覆盖woocommerce.css，该文件可以位于默认的wordpress主题或子主题中。如果custom.css文件出现问题，您也可以回退到默认的woocommerce.css。

add_action('wp_enqueue_scripts', 'override_woo_frontend_styles');
function override_woo_frontend_styles(){
    $file_general = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/twentyfifteen/css/custom.css';
    if( file_exists($file_general) ){
        wp_dequeue_style('woocommerce-general');
        wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/css/custom.css');
    }
}

同样的事情是其他的woocommerce前端风格（woocommerce-layout和woocommerce-smallscreen）。

如果您在子主题中执行此操作，请使用get_stylesheet_directory_uri（）而不是get_template_directory_uri（），并根据子主题名称更改文件路径。

Answer 4

我的方法是遵循CSS的级联原则。因此，如果没有定义 ！important ，那么基本上加载的那个将覆盖之前的规则。

点击此处：

//This is the order the css load by default, at leat on the sites I have worked!!!
<link rel="stylesheet" href="http:/css/custom_styles.css" type="text/css" media="all">
<link rel="stylesheet" href="http:/css/woocomerce.css" type="text/css" media="all">

那么想法是什么想法在加载woocommerce之后加载你的自定义CSS。

方法1 ：为样式add_action的[add_action]添加低优先级，如：

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE);
}
// (the higher the number the lowest Priority)
add_action('wp_enqueue_scripts', 'load_my_css', 5000);

方法2 ：删除woocommerce样式，以便创建自己的样式

// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

方法3 ：将依赖关系数组添加到自定义样式

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE, array(DEPENDECIES HERE));
}

希望其中一种方法有所帮助。

Answer 5

您会在 WooCommerce 文档中找到您需要的内容。它们提供两种功能：

阻止 WooCommerce 插件使用其 woocommerce_enqueue_styles() 函数加载所有或特定样式表。
使用允许您覆盖 woocommerce.css 的 wp_enqueue_woocommerce_style() 在他们的插件中添加您的自定义样式表。

<块引用>

链接到 WooCommerce documentation « disable the default stylesheets »

Answer 6

对于较新版本的 WooCommerce 4.x+，请使用：

    add_action( 'wp_print_styles', 'dequeueWooCommerceStyles' );

    public function dequeueWooCommerceStyles()
    {
        wp_dequeue_style('wc-block-style');
        wp_deregister_style( 'wc-block-style' );
    }

覆盖woocommerce.css的最佳方式

6 个答案: