东莞折扣网
东莞广告联盟 东莞本土门户网站

【绿芽君】自定义 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 的过程中遇到了问题,欢迎在评论中提出交流。

APP定制——东莞赢道网络科技!
广东省企业管理研究院、龙商荟刊编辑部、东莞折扣网官媒
广告投放企业营销流量引流,东莞广告联盟!
谢谢你,成为东莞折扣网的好友!送您4节企业文化课程【0769】限时领取。请关注微信号:DGHF0769 领取(暗号:绿芽君) 联系电话13751333123

免费学习国学文化,请点击国学讲堂

 

赞(0) 打赏
未经允许不得转载:东莞折扣网 » 【绿芽君】自定义 WooCommerce 插件的 CSS 样式的两种方法
分享到: 更多 (0)
广告也精彩
广告也精彩
在线客服
在线客服
热线电话

美惠家商城 万江新村店

美惠家商城万江新村店

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

站点地图