自定义WooCommerce插件的 CSS 样式的两种方法
自定义WooCommerce样式
作为一个开源的WordPress电子商务插件,WooCommerce内置了用于显示商品和购物流程的所有CSS样式,为了确保您在安装并进行了基本配置之后可以得到一个样式良好的商店,WooCommerce内置了这些样式,这很方便。但是在大多数情况下,我们都需要对WooCommerce的样式进行一些定制,以使其更适合我们的主题风格。幸运的是,有两种方法可以对WooCommerce样式进行定制。
WooCommerce默认样式文件
在WooCommerce插件的 assets/css/
文件夹中,我们可以找到WooCommerce默认的样式文件,包括 woocommerce.scss
和 woocommerce.css
。
woocommerce.css
是压缩后的样式文件,其中包含了WooCommerce商店使用的基础CSS样式。woocommerce.scss
是WooCommerce样式的SCSS源文件,通过编译后生成woocommerce.css
文件。
在这些文件中,设计到宽度的样式使用了百分比的自适应布局,以适配大多数主题。当然,我们也可以根据实际需要进行调整。
方法一:覆盖默认的CSS文件修改WooCommerce样式
为了避免升级问题,我们建议只将上述文件作为参考而不是直接修改它们。如果您只想修改WooCommerce样式的一小部分,可以通过CSS覆盖这部分样式。例如:将以下CSS添加到主题样式文件中,来将WooCommerce的按钮样式更改为黑色:
a.button,
button.button,
input.button,
#review_form#submit{
background:black;
}
为方便自定义样式,WooCommerce在HTML的body标签上添加了主题名称、页面类型等信息,我们可以使用这些信息来单独定义一些特殊页面的样式,这也是WordPress推荐的做法。
方法二:禁用WooCommerce默认样式,使用主题自定义的样式
如果您准备对WooCommerce样式进行大量修改,直接使用覆盖CSS的方法可能会增加大量的工作量和不必要的代码。在这种情况下,禁用WooCommerce的默认CSS样式,并使用主题自定义的样式,是一个更好的选择。将以下代码添加到主题的 functions.php
文件中即可实现这个修改:
//逐个移除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');
进行上述修改后,我们的主题将不再使用WooCommerce的默认样式文件。您可以将WooCoomerce默认的样式文件复制到自己的主题中,进行相应的修改。如果您使用SCSS,则还可以直接修改SCSS文件,修改后,就可以将包含WooCommerce样式的主题样式文件与主题样式文件一起编译。如果您在自定义WooCommerce过程中遇到任何问题,欢迎在评论中提出交流。

-
搭建一个WordPress网站需要多少成本 2023-11-06 00:09:51
-
Symlink介绍(附:如何使用Symlink进行WordPress开发) 2023-11-05 23:38:32
-
让WordPress实现数据库同步的插件:HyperDB 2023-10-24 23:40:49
-
allegro电商平台值得做吗(附:2023年Allegro注册流程指南) 2023-10-08 21:53:39
-
印度跨境电商平台有哪些(附:印度跨境电商做什么产品好) 2023-10-08 21:34:23
-
跨境电商必看的几大海外二手电商平台 2023-10-08 18:04:42
-
WordPress同城互联网产品解决方案:UBASE 2023-10-03 16:40:39
-
WordPress网站的安全插件:wordfence 2023-09-14 09:25:18
-
WordPress 6.3 支持在手动更新插件和主题失败后回滚旧版本 2023-08-28 16:58:45
-
WordPress 6.3版本(2023年8月)性能提升了哪些? 2023-08-28 16:56:02