自定义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过程中遇到任何问题,欢迎在评论中提出交流。

-
IDC/ISP办理许可证的基本条件(附:IDC和ISP许可证申请流程) 2023-06-07 08:00:01
-
利用tinymce.activeEditor获取到 WordPress可视化编辑器中的值(附:tinymce.activeEditor常见其他用法) 2023-06-06 08:00:02
-
WordPress是什么框架吗?WordPress是用什么写的? 2023-06-06 08:00:02
-
WordPress哪个版本稳定好用(附:如何查看当前WordPress版本) 2023-06-06 08:00:02
-
Automattic 发布 wp-now:由 WordPress Playground 提供支持的本地开发环境 2023-06-05 08:00:02
-
UGPT插件:国内首个永久免费WordPress ChatGPT插件 2023-06-04 08:00:01
-
PHP预定义常量都有哪些(含常见PHP魔术常量) 2023-06-04 08:00:01
-
php的 require 和include 有什么区别 2023-06-04 08:00:01
-
wordpress seo哪个插件好用 – WordPress SEO by Yoast 2023-06-03 08:00:02
-
WordPress古腾堡编辑器模块开发教程 2023-06-03 08:00:02