WooCommerce has built-in all CSS styles responsible for displaying products and shopping processes. This ensures that after installing WooCommerce and performing basic configuration, you can get a well-styled store. This is convenient, but in most cases, we will not use the basic styles provided by WooCommerce. We need to make some customizations to WooCommerce styles to make the appearance of the WooCommerce store better match our theme. There are two ways to customize styles in WooCommerce.
WooCommerce default style files
In the WooCommerce pluginassets/css/In the folder, we can find the default style files of WooCommerce, which arewoocommerce.scssandwoocommerce.css.
woocommerce.cssA compressed style file that contains the basic CSS styles used by all WooCommerce stores.woocommerce.scssThis is the SCSS source file for WooCommerce styles, compiled through the woocommerce.css file above the product.
In the above style file, the width style is designed using percentage adaptive layout in order to adapt to most themes. Of course, we can adjust it according to our actual needs.
Method 1: Overwrite the default CSS file to modify WooCommerce styles
To avoid upgrade issues, we recommend only using the above files as a reference rather than directly modifying the files mentioned above. If you only want to modify a small part of WooCommerce styles, you can overwrite this part of the styles through CSS. For example: add the following CSS to the theme’s style file and change the WooCommerce button to black.
a.button,
button.button,
input.button,
#review_form #submit {
background:black;
}On the front end, in order to facilitate customization of styles, WooCommerce adds theme name, page type and other information to the body tag of HTML. We can use this information to separately define the styles of some special pages, which is also recommended by WordPress.
Method 2: Disable WooCommerce default styles and use theme-customized styles
If you are going to make some major changes to WooCommerce styles, using method one may increase your workload and write a lot of unnecessary code. At this time, it is a better choice to disable WooCommerce’s default CSS styles and use our theme’s customized styles. Add the following code to the themefunctions.phpThis modification can be implemented in the file.
// 逐个移除WooCommerce默认的样式文件
add_filter( 'woocommerce_enqueue_styles', 'wizhi_dequeue_styles' );
function wizhi_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // 移除基础组件样式
unset( $enqueue_styles['woocommerce-layout'] ); // 移除布局
unset( $enqueue_styles['woocommerce-smallscreen'] ); // 移除小屏幕自适应优化
return $enqueue_styles;
}
// 或移除所有样式
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
After making the above modifications, our theme no longer uses the WooCommerce default style file. We can copy the WooCommerce default style file into our own theme to make corresponding modifications. If you use SCSS, you can also directly modify the SCSS file. After modification, together with the theme style file, compile it into a theme style file containing WooCommerce styles. If you encounter problems in the process of customizing WooCommerce, please discuss it in the comments.
