关于自定义WooCommerce的CSS样式的两种方法

这次,小编来说说,“关于自定义WooCommerce的CSS样式的两种方法”。如果WooCommerce主题的价格不能隐藏的话,小编用的是把主题文件夹里的css文件夹里的style.css文件打开修改代码,然后把里面的文字代码color改成白色#FFFFF的颜色,在白底下价格和价格符号就变成透明了哦,相当于隐藏了独立站的商品价格和商品价格符号。内页要删除价格2个字的话可以寻找price开头的文件删除或者删除里面的price代码即可。如果直接改CSS不成功的话,再使用下面的方法二,加入相关代码,然后CSS修改应该就会成功了。

关于自定义WooCommerce的CSS样式的两种方法
关于自定义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 样式的主题样式文件。

小编修改了这个主题里的css字体颜色
小编修改了这个主题里的css字体颜色

woocommerce-Price-amount 颜色修改了,符号也修改了成透明的了完美。

 

原创文章,作者:SONIC SEO,如若转载,请注明出处:https://www.seo388.com/woocommerce-css/

(8)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020年6月8日 21:37
下一篇 2020年6月12日 16:58

相关推荐

  • 关于织梦模板代码添加

    这次,小编来说说,关于 “关于织梦模板代码添加” 的这个话题。 对于织梦模板这块,几乎都是由程序员写的,如果我们不懂代码,想修改自己模板是比较困难的。前段时间我找了一个模板,挺喜欢的,可是有一个缺点非常扎心,没有相关推荐。大家都知道,相关推荐在一个网页当中还是比较重要的,无论是站在搜索引擎还是用户的角度来看,都是非常友好的。下面我就给大家分享几个整理好的相关…

    2019年9月3日
    0783
  • 腾讯云服务器使用教程,配置Apache服务器环境

    腾讯自家的云服务器,作者手把手教你免费领取!无忧老师亲自为你全程录制,让每个人都有自己的网站。 很人新手同学不懂得如何搭建网站,更不懂得如何购买服务器。本节课程无忧老师将把服务器配置的整个流程全程记录讲解。教你如何安装LINUX环境。 下面是作者亲自录制的原创高清视频: moonseo01.oss-cn-hangzhou.aliyuncs.com/serve…

    2019年3月13日
    01.0K
  • 2020年解决升级WordPress 时提示“另一更新正在进行”

    2020年5月7日,小编搭建了好多个网站呢。其中有号一些提醒 “有新的WordPress版本可供升级。 您可以自动升级到WordPress 5.4.1–zh_CN”。又到了wordpress需要更新的时候了。现在有些方法已经不好使了。希望这次小编能帮助到需要升级wordpress版本的小伙伴们。有时候可能是wordpress服务器的问题哦。但是咱们不升级wo…

    2020年5月7日
    01.0K
  • 记一次:亿速云服务器搭建

    记一次:亿速云服务器搭建 1)注册亿速云账号: PC版: https://www.yisu.com/reg?s=0PC3N 手机版: https://m.yisu.com/reg?s=0PC3N 2)购买服务器 购买服务器后,得到相关的服务器IP地址与服务器连接密码; 新手建议购买389元的香港服务器(首次购买可以领券便宜30元,也就是说359元/1年的服务…

    2019年11月6日 免费建站教程
    03.2K
  • 服务器建站必备:宝塔Linux面板安装教程分享

    这次,小编要给大家带来的是,关于 “ 服务器建站必备:宝塔Linux面板安装教程分享”。希望能帮助想用宝塔面板搭建服务器环境的小伙伴们哦。 安装要求: 内存:512M以上,推荐768M以上(纯面板约占系统60M内存) 硬盘:100M以上可用硬盘空间(纯面板约占20M磁盘空间) 系统:CentOS 7.1+ (Ubuntu16.04+.、Debian9.0+)…

    2020年9月3日 免费建站教程
    01.3K
  • WordPress菜单插件安装推荐

    这次,小编来推荐几款WordPress菜单插件给大家。 菜单栏呢,它不仅可以作为浏览内容的导航工具,它还可以用来吸引访问者的注意力。换句话说,仅仅具有导航功能的菜单通常是不够的,可能还需要添加一些插件来使它更加生动。 在本文中,小编选择了2019年WordPress的10个最佳菜单插件。 1)MaxMegaMenu MaxMegaMenu可以自动替换word…

    2019年6月14日 免费建站教程
    01.1K
  • WordPress在线表单制作步骤教程

    原来wordpress做在线表单那么简单的,下载Contact Form 7插件,启用,插入短代码,表单完成。 如下图所示:    

    2020年2月23日 免费建站教程
    01.5K
  • 分享织梦文章内容加入相关推荐和翻页的代码

    分享织梦文章内容加入相关推荐和翻页的代码。 小编粗略写的,写得不好请见谅,萌新程序猿一枚。 <div><div><div><div><div id=”pages” class=”page”></div></div>{dede:p…

    2019年9月16日
    01.1K
  • 关于wordpress安全、通用的搬家方法

    WordPress搬家,一直以来都没有比较官方、安全的搬家方法。目前网上多见的都是通过phpmyadmin导出数据库,然后在新的服务器上导入数据库,以实现搬家的目的。但是这样做受到很多外在因素的限制,比如说新服务器中的mysql数据库版本不同、新服务器的数据库名不同、用户名密码不同等等,导致某些特殊情况下搬家不成功。有时候发生误操作,还有可能导致网站数据库崩…

    2019年6月13日 免费建站教程
    11.1K
  • 关于工信部网站备案流程

    工信部备案系统是什么呢?工信部备案系统有什么作用呢? 实际上,国内云虚拟主机、VPS云服务器建站都是要进行备案的,许多朋友都会直接在工信部备案系统里面备案。 接下来,小编来给大家说说工信部网站备案流程是什么? 1)首先进入电信备案系统网址,并在首页中点击用户注册 2)点击注册后在系统中输入用户所注册的用户名和密码,进入ICP备案信息录入登录,填写真实的用户信…

    2019年10月29日
    01.0K
  • 升级WordPress提示”另一更新正在进行”的解决方法

    最近我的强迫症老毛病又犯了,竟然又忍不住直接在WordPress后台点击现在更新到WordPress 4.6.1,没有想到那么小概率的事情都被我遇到了,在升级WordPress的时候,竟然直接给我一个提示说“另一更新正在进行”,反复点击几次都是这个错误提示,最后只能求助万能的度娘了。 前因: 在之前,同样是直接在后台点击升级到WordPress 4.6.1,…

    2019年8月3日
    11.3K
  • 记1次网站搬家操作步骤

    记1次网站搬家操作步骤: 这次小编来给大家说说,云虚拟主机如何把网站搬家到云服务器。 步骤如下: 1)先从原来的空间商那边,把网站备份好,一份是网站页面文件的备份,另外一份是网站数据库的备份sql文件; 2)下载网站页面备份文件,下载网站数据库备份文件到电脑本地; 3)需要搭建好服务器,小编用的是宝塔面板。 4)举例:小编现在要搬家的网站是 soft999….

    2019年11月5日 免费建站教程
    0937