自定义 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 样式的主题样式文件。

未经允许不得转载：哈勃私语 » 自定义 WooCommerce 插件的 CSS 样式的两种方法