How To Override CSS in WooCommerce
Running an online business means that online merchants have to ensure that they bring back the best shopping experience possible. From the functions to designs, everything needs to be perfect! But sometimes, the WooCommerce theme just does not fulfill your requirements enough? And you are looking forward to changing the CSS file in your own way? If that’s the case then this article is for you.
This tutorial will show you How to override the WooCommerce CSS file with your own designing functions. Keep reading to find out more!
When to override WooCommerce CSS file for your store?
Up to this point, you have created an absolutely stunning website and make sure that every button, form field, and piece of text provides the visitor with a consistent aesthetic experience. However, when you visit one of your WooCommerce shop pages, the style clashes are enough to make you hurl your laptop out the window and flee screaming into the sunset of insanity. So what’s the problem?
There is a higher chance that the default styles of WooCommerce just do not go well with your theme because their custom WooCommerce CSS were missing at that time. The only solution to this stumbling block is to override your WooCommerce CSS file. But you have zero experience in coding and worry that it might ruin your entire website? Don’t worry, we are here to help!
How to override your WooCommerce CSS easily?
When it comes to overriding the WooCommerce CSS file, it is obvious that you need a decent knowledge of coding or else you need to hire a developer to perform the task. In case you want to save up money, then you will need the tutorial today. We have divided it into small basic steps with example images so that you can compare the results.
No more beating around the bush, let’s get started!
Step 1: Disable all default CSS files
If you want to entirely delete the default WooCommerce CSS and replace it with your own, do so. Then unplug the WooCommerce CSS file and reconnect with your custom CSS file. However, remember not to change the default settings of WooCommerce CSS files, instead deactivate them by going to the functions.php file and do the following:
By default, WooCommerce loads three stylesheets. With the below code, you may deactivate all of them:
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
If you’re creating a custom theme, this is the preferred method. You can protect yourself against WooCommerce core upgrades by removing the default WooCommerce stylesheet and enqueuing your own.
You may use the following to deactivate certain stylesheets, just in case you don’t want to include the handheld stylesheet:
/**
* Set WooCommerce image dimensions upon theme activation
*/
// Remove each style one by one
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' );
Step 2: Create yourself a CSS folder
At this point, we will be assuming that you have your own design in a CSS file already. For the next step, let’s go to the WP-content > Themes > Your Current Activated Theme Folder > CSS Folder and create a brand new file called “woonew.css”, where you will be uploading your overriding code snippet into.
Step 3: Fill in the wanted source code
When the file has been successfully created, feel free to override the WooCommerce CSS file by adding your customized snippet using the wp_enqueue_woocommerce_style() function. For instance, you can use the following block of code and replace the “get_template_directory_uri().’/css/woocommerce.css” with the path of your custom style sheet:
` add_action(‘wp_enqueue_scripts’, ‘cvf_st_load_custom_css_before_main’) );`
function cvf_st_load_custom_css_before_main() {
if (class_exists('woocommerce')){
wp_enqueue_style('my-woocommerce-style', get_template_directory_uri().'/css/woocommerce.css', array('woocommerce-general'));
}
}
Step 4: Using the !important declarators (optional)
If you are making use of a WooCommerce Genesis child theme, you will be able to override the CSS files with a wide variety of !important declarations. To start off, we will get rid of your Genesis child theme stylesheet and then add a replacement code:
<?php //Remove this line
/**
* Remove Genesis child theme stylesheet
* @uses genesis_meta <genesis/lib/css/load-styles.php>
*/
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
/**
* Enqueue Genesis child theme stylesheet 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 );
For more detailed information, the “15” at the very last line indicates a function’s priority. Normally, it will be put as 10 but we want the code to happen a little bit later so we changed the number into “15”.
The functions.php file of your theme, or any other place where theme updates may be made securely, should include the code shown above. Prior to implementing any code on a live site, make sure that you thoroughly test it in a development environment.
Step 5: Check whether your CSS is accessible
Upon uploading the CSS file, it should be available through this link: https://yourwebsite.com/wp-content/themes/YOURTHEME/css/woonew.css.
As long as you are able to go to the CSS file from your browser, it has been put properly. You must have made a mistake someplace if you can’t get to it. If it is the first scenario, go back to your functions.php file again and paste in the following code at the end:
/**
* Enqueue your own stylesheet
*/
function wp_enqueue_woocommerce_style(){
wp_register_style( 'bloggersprout-woocommerce', get_template_directory_uri() . 'https://bloggersprout.b-cdn.net/css/woonew.css' );
if ( class_exists( 'woocommerce' ) ) {
wp_enqueue_style( 'bloggersprout-woocommerce' );
}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );
Step 6: Save your changes
So, that’s everything about overriding your WooCommerce CSS file. Supposed that all of the functions worked out just the way you wanted to, click on “Save Changes” to make it official! Your WooCommerce links on the frontend should now be updated.
Conclusion
Overall, I hope this tutorial on How to override WooCommerce CSS file has helped you override WooCommerce CSS and implement your own custom css in your storefront. If you have any questions, do not hesitate to leave a comment below, we love to help!
