wordpress 覆盖 woocommerce.css 的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25027108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best Way to override woocommerce.css
提问by user3390591
What's the best way to override woocommerce.css? In my style.css I have to write those css again to override it, and put !important after each css. I think this is not the best practice to do so. Anyone has a better idea?
覆盖 woocommerce.css 的最佳方法是什么？在我的 style.css 中，我必须再次编写这些 css 以覆盖它，并在每个 css 之后放置 !important。我认为这不是这样做的最佳做法。有人有更好的主意吗？
回答by henrywright
WooCommerce enqueues 3 stylesheets by default. You can disable them all using:
WooCommerce 默认将 3 个样式表排入队列。您可以使用以下方法禁用它们：
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
For details on how to disable individual WooCommerce stylesheets, see their Disable the default stylesheetarticle.
有关如何禁用单个 WooCommerce 样式表的详细信息，请参阅他们的禁用默认样式表文章。
回答by sherfa
You can override woocommerce.css with custom.css file that can be located either in default wordpress theme or in child theme. You can also make a fallback to default woocommerce.css if something happens to custom.css file.
您可以使用位于默认 wordpress 主题或子主题中的 custom.css 文件覆盖 woocommerce.css。如果 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');
}
}
Same thing is for other woocommerce frontend styles (woocommerce-layout and woocommerce-smallscreen).
其他 woocommerce 前端样式（woocommerce-layout 和 woocommerce-smallscreen）也是如此。
If you're doing this in child theme, then use get_stylesheet_directory_uri() instead of get_template_directory_uri() and change file path according to child theme name.
如果您在子主题中执行此操作，则使用 get_stylesheet_directory_uri() 而不是 get_template_directory_uri() 并根据子主题名称更改文件路径。
回答by Pat Gilmour
There's another approach in an articleby Carrie Dills. She's using the Genesis theme but it could be reworked for other themes I think.
在Carrie Dills的一篇文章中还有另一种方法。她正在使用 Genesis 主题，但我认为可以为其他主题重新设计。
In essence, what she recommends is changing the order that your styles load so that your theme's stylesheet is loaded afterthe WooCommerce stylesheet. i.e. it is enqueued at a higher priority.
从本质上讲，她建议更改样式加载的顺序，以便在 WooCommerce 样式表之后加载主题样式表。即它以更高的优先级排队。
For Genesis it looks like the below. If you can access your framework/theme's stylesheet loading with a similar hook, you could do the same.
对于 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 );
回答by T04435
My approach is to follow the principle cascadeof CSS. So basically the one that loads last will override the previous rules if no !importantwas defined.
我的方法是遵循CSS级联的原则。所以基本上，如果没有!important被定义，最后加载的将覆盖之前的规则。
Check here:
检查这里：
//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">
So what is the idea Load your custom CSS after the woocommerce has loaded.
那么在 woocommerce 加载后加载您的自定义 CSS 是什么想法。
Method 1: Adding a Low priority on the [add_action] for the style add_actionlike:
方法 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);
Method 2: Remove woocommerce styles, so you create your own styles
方法 2：删除 woocommerce 样式，以便您创建自己的样式
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
Method 3: Add dependency Array to your custom style
方法 3：将依赖项数组添加到您的自定义样式
function load_my_css(){
wp_enqueue_style('custom-theme', URL TO STYLE, array(DEPENDECIES HERE));
}
Hope one of the Methods helps.
希望其中一种方法有帮助。
