欢迎光临
我们一直在努力

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

WooCommerce内置了负责显示商品和购物流程的所有 CSS 样式,这样能确保在安装了WooCommerce,并进行了基本配置之后,就可以得到一个样式不错的商店。这很方便,然而大多数情况下,我们不会使用WooCommerce提供的基本样式,我们需要对WooCommerce的样式进行一些定制,让WooCommerce商店的外观和我们的主题更匹配。有两种方法可以对WooCommerce的样式进行定制。

WooCommerce默认的样式文件

在WooCommerce插件的 assets/css/ 文件夹中, 我们可以找到WooCommerce默认的样式文件,分别是 woocommerce.scsswoocommerce.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的过程中遇到了问题,欢迎在评论中提出交流。

赞(0)
未经允许不得转载:玄武新动力 » 自定义WooCommerce插件的 CSS 样式的两种方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址