override theme css with woocommerce css WordPress
- SOLVED
In order to avoid conflicts between theme css and woocommerce css, I would love woocommerce css to override theme css (ex: button, tables etc are styled by theme, I want theme to be styled by woocommerce in woocommerce pages).
Should I change priority order? How can I do that?
Please help me.
Answers (5)
Rempty answers:
By default woocommerce.css is included and override the css theme, is woocommerce.css being included on your theme?
A solution, but every time you update woocommerce, need to copy the css to your custom theme directory
//First remove the woocommerce styles
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
Copy plugins/woocommerce/assets/css/woocommerce.css , plugins/woocommerce/assets/css/woocommerce-layout.css , plugins/woocommerce/assets/css/woocommerce-smallscreen.css
To your template, create a folder and paste them.
//Now enqueue the styles
add_action('wp_enqueue_scripts', 'override_woo_frontend_styles');
function override_woo_frontend_styles(){
wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/myfolder/woocommerce.css');
wp_enqueue_style('woocommerce-layout-custom', get_template_directory_uri() . '/myfolder/woocommerce-layout.css');
wp_enqueue_style('woocommerce-smallscreen-custom', get_template_directory_uri() . '/myfolder/woocommerce-smallscreen.css');
}
tomaso1980 comments:
We're near, but I think I need to set a priority to wp_enqueue. How to do that?
Rempty comments:
add_action can use 4 parameters add_action( $hook, $function_to_add, $priority, $accepted_args );
you can add a $priority
/*
from codex https://codex.wordpress.org/Function_Reference/add_action#Parameters
$priority
(int) (optional) Used to specify the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.
*/
My suggestion is change the priority when load the "theme css" to 1, will include theme css before woocommerce (by default 10);
add_action('wp_enqueue_scripts', 'override_woo_frontend_styles', $priority);
function override_woo_frontend_styles(){
wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/myfolder/woocommerce.css');
wp_enqueue_style('woocommerce-layout-custom', get_template_directory_uri() . '/myfolder/woocommerce-layout.css');
wp_enqueue_style('woocommerce-smallscreen-custom', get_template_directory_uri() . '/myfolder/woocommerce-smallscreen.css');
}
tomaso1980 comments:
<blockquote>My suggestion is change the priority when load the "theme css" to 1, will include theme css before woocommerce (by default 10);</blockquote>
Where I should load "theme css"?
add_action('wp_enqueue_scripts', 'override_woo_frontend_styles', $priority);
function override_woo_frontend_styles(){
wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/myfolder/woocommerce.css');
wp_enqueue_style('woocommerce-layout-custom', get_template_directory_uri() . '/myfolder/woocommerce-layout.css');
wp_enqueue_style('woocommerce-smallscreen-custom', get_template_directory_uri() . '/myfolder/woocommerce-smallscreen.css');
}
it's for woocommerce, but I should add/change to load theme css?
Thanks
Rempty comments:
Depends on your theme, you must find where is enqueing the theme css.
Rempty comments:
add_action( 'wp_enqueue_scripts', 'krown_enqueue_scripts', 100 );
100 = enquening at the end
Must be first, change to 1
Because latest css override previous css added, and woocommerce by default is 10.
Shoeb mirza answers:
Use ! important in woocommerce css
tomaso1980 comments:
that is not the right way to do that, then I can't update woocommerce with re-do everything. And also there are some ! important in theme as well, so woocommerce ! important would be override by theme.
Arnav Joy answers:
please read this , it will give you an idea how you can do it
http://www.designcourse.com/articles/1/CSS/38-CSS-Overriding-Styles
tomaso1980 comments:
I think we need to find something to override theme css in functions, I can't use that because theme css has already some priorities (!important)
Glenn Tate answers:
Create a a child theme and put your woo css in the child themes styles.css file. This will by default load last and whatever styles are loaded last take priority. The exception is when !important is used, however you can add your own !important tags to the css in the child theme and it will again take priority over a style in the parent theme.
dimadin answers:
There are simpler ways to change order. We don't know how your theme loads styles, but let's assume that is follow approach of Twenty Fifteen, latest default theme that uses 'wp_enqueue_scripts'.
What we need is to push enqueueing later in that order since by default priority is 10. We can do that by simply removing action and then immediately adding with higher priority. This is tested and it works in Twenty Fifteen.
function md_later_woocommerce_enqueue() {
remove_action( 'wp_enqueue_scripts', array( 'WC_Frontend_Scripts', 'load_scripts' ) );
add_action( 'wp_enqueue_scripts', array( 'WC_Frontend_Scripts', 'load_scripts' ), 999 );
};
add_action( 'before_woocommerce_init', 'md_later_woocommerce_enqueue' );
If this doesn't change order, your theme is probably using something else to load styles. Although best thing is to have a look at theme's code, this approach always works, but it is not best because WooCommerce styles are loaded in footer.
function md_later_woocommerce_enqueue_unload() {
remove_action( 'wp_enqueue_scripts', array( 'WC_Frontend_Scripts', 'load_scripts' ) );
};
add_action( 'before_woocommerce_init', 'md_later_woocommerce_enqueue_unload' );
function md_later_woocommerce_enqueue_load() {
add_action( 'wp_print_footer_scripts', array( 'WC_Frontend_Scripts', 'load_scripts' ), 0 );
};
add_action( 'wp_footer', 'md_later_woocommerce_enqueue_load', 0 );
Let me know what happens.
tomaso1980 comments:
Here is my code. What I should change/add?
Thank you
// Enqueue styles
wp_enqueue_style( 'krown-style-parties', get_template_directory_uri() . '/css/third-parties.css' );
wp_enqueue_style( 'krown-style', get_stylesheet_uri(), array(), false, 'screen' );
// Handle comments script
if ( is_single() || is_page() ) {
wp_enqueue_script( 'comment-reply' );
} else {
wp_dequeue_script( 'comment-reply' );
}
// We need to pass some useful variables to the theme scripts through the following function
$colors = get_option( 'krown_colors' );
wp_localize_script(
'theme_scripts',
'themeObjects',
array(
'base' => get_template_directory_uri(),
'mainColor' => isset( $colors['main1'] ) ? $colors['main1'] : '#f75146',
'pieColor1' => isset( $colors['pie1'] ) ? $colors['pie1'] : '#a9a9a9',
'pieColor2' => isset( $colors['pie2'] ) ? $colors['pie2'] : '#43b3cf',
'pieColor3' => isset( $colors['pie3'] ) ? $colors['pie3'] : '#6fb670'
)
);
}
add_action( 'wp_enqueue_scripts', 'krown_enqueue_scripts', 100 );
/*---------------------------------
Enqueue admin styles
------------------------------------*/
function krown_admin_scripts() {
wp_enqueue_style( 'krown-admin', get_template_directory_uri() . '/css/admin-style.css' );
}
add_action( 'admin_enqueue_scripts', 'krown_admin_scripts' );
dimadin comments:
Since you are enqueueing styles on hook 'wp_enqueue_scripts' with priority 100, my first code snippet above should work because it does the same, only with priority 999, which means it is later in order.
dimadin comments:
@Rempty: Priority of 100 doesn't mean that this is end, this can be any number, it only means that it has less priority than numbers smaller than 100 and more priority than numbers larger than 100.
Priority with 1 also doesn't mean that it is executed first because there can be higher priorities (0, -1,...) or there can be other stuff with same priority but that are hooked earlier.
Yes, in this case files with priority higher than 10 would be enqueued before those from WooCommerce, but it doesn't mean that WooCommerce's files are enqueue last.