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

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。