自定义 WooCommerce 插件的 CSS 样式的两种方法

WooCommerce 内置了负责显示商品和购物流程的所有 CSS 样式，这样能确保在安装了WooCommerce，并进行了基本配置之后，就可以得到一个样式不错的商店。这很方便，然而大多数情况下，我们不会使用 WooCommerce 提供的基本样式，我们需要对 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 样式做一些大的修改，使用方法一可能会增加很多工作量，多写很多不必要的代码。这时候，禁用 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 样式的主题样式文件。