关于自定义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

相关推荐

  • 关于phpwind找回密码的办法

    今天,小编在自己的努力下,终于找回密码,进去了phpwind的后台。我来分享一下自己的经验心得。 老版本的phpwind 密码是直接放在sql_config.php文件里面的,直接修改./data/sql_config.php文件内容: $manager=’admin’;            //管理员用户名 $manager_pwd=’21232f297…

    2019年11月4日 免费建站教程
    02.0K
  • 关于WordPress在后台使用其他颜色版本的方法

    之前有在WordPress后台给主题配置项加过一键更换主题色的功能,其中用到了wp自带的jQuery UI 的颜色选择器 组件(color picker),今天把添加的方法分享出来,希望对有需要的朋友一点帮助。   1. 在functions.php中加载 color picker 的 JS 和 CSS: 1 2 3 4 5 add_action(…

    2019年7月27日
    11.5K
  • 服务器建站必备:宝塔Linux面板安装教程分享

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

    2020年9月3日 免费建站教程
    01.9K
  • 阿里云服务器ECS搭建与环境配置

    阿里云ECS服务器搭建及配置 服务器不像虚拟主机操作那么简单,经常会让网站站长头疼不已。特别是新手站长朋友,更是一窍不通,不建议配置服务器及环境。 作者把自己所积累的经验全程做了视频录像,为的是帮助到一小部分愿意折腾和学习研究的同学参考。于是所花一天时间来录制和配置,没有专业的术语和华丽的语言,非常方面初学者学习探讨。 在这之前作者经常服务器搬家,每次都遇到…

    2019年3月13日
    01.2K
  • 纠结,WordPress忘记密码了!这次我来介绍几种解决方法

    不经意中,忘掉wordpress的登陆密码了,无语啊。正巧在后台管理又没都还没设定电子邮件,既然到处苦寻解决方案,还行终于找到…… ! 1. WordPress内嵌的找加登陆密码方式 当你的admin账号的电子邮件地址是恰当的, 你就依据一般的找回密码流程, 在Wordpress的登陆页点一下”密码忘了?” 随后键入admin或电子邮箱地址. 然后, 你能接…

    2019年5月24日
    01.4K
  • 2023年,wordpress新版本比老版本打开速度快多少?

    2023年,wordpress新版本比老版本打开速度快多少? 通常情况下,WordPress 的新版本相对于旧版本有一些性能改进和优化,包括加快网站的加载速度。具体来说,新版本可能会采用更快的算法、更有效的缓存机制、更优化的数据库查询等等,从而提高网站的性能和响应速度。 然而,WordPress 的版本更新也可能会引入新的特性和功能,这些功能可能会增加网站的…

    2023年5月18日
    037
  • 关于宝塔面板修改端口后无法登陆解决方案

    忘记宝塔面板登录管理端口怎么办?改完端口后忘记了怎么办?关于宝塔地址忘记了的处理方法,你知道吗? 服务器好几个月没有登录管理了,之前没有存档,现在忘记宝塔面板的后台端口是多少了怎么办 ?下面小编来给告诉大家几个指令,解决宝塔面板端口遗忘而无法登陆的问题。 1、找回端口 方法1 在终端输入 cat /www/server/panel/data/port.pl …

    2019年7月27日
    12.8K
  • wordpress如何从代码里查看是使用了哪个模板?

    wordpress如何从代码里查看是使用了哪个模板? 要查看 WordPress 网站中正在使用的模板,可以按照以下步骤: 登录 WordPress 后台。 在左侧导航栏中选择“外观”(Appearance)选项卡。 在下拉菜单中选择“编辑”(Editor)选项。 在编辑器页面右侧,将下拉菜单切换到“主题功能文件”(Theme Functions)。 在主题…

    2023年5月18日
    036
  • 网站后台介绍-DedeCMS织梦建站教程

    DedeCMS织梦建站教程 — 网站后台介绍: 简单说说,织梦DedeCMS的建站部分教程 。       Dede织梦CMS 下载地址: www.dedecms.com 无论是国内的还是国外的网站,都可以使用织梦DedeCMS开源程序来搭建网站哦。

    2019年3月16日
    11.2K
  • 关于网安备案与网安备案注意事项

    其实,“什么是网安备案呢?网安备案注意事项有哪些呢?” 许多刚刚icp备案完成之后的朋友都有这样的疑问,接下来,小编就给大家介绍一下网安备案。 什么是网安备案呢? 公安机关备案号是由公安部门所管的一种备案号,与申请网站ICP备案号所需的资料差不多,但不用空间接入商审核处理,直接在线填写资料即可。 网安备案注意事项有哪些? 1)提交资料后,网站负责人前往分局完…

    2019年10月29日
    01.4K
  • 详细解释开源程序织梦dedecms文件目录

    这次,小编来给大家说说,关于开源程序织梦Dedecms做网站的文件目录。希望对使用织梦做网站的站长小伙伴有所帮助。 本文主要是为了今后对 Dedecms 做二次开发所写。安装后 dedecms 的目录,如下图所示: “a”:默认 HTML 文件存放目录“data”:系统缓存或其它可写入数据存放目录“dede”:默认后台管理目录“images”:系统默认模板图…

    2019年11月24日
    01.3K
  • 个人网站公安备案应该如何操作?

    这次,小编来给大家说说 “个人网站需要公安备案吗?个人网站公安备案怎么操作?”的问题。 现在我们做网站,只要是国内的空间就都需要备案的,香港或者是国外的主机虽然不用备案,但是速度比不上国内的云主机与云服务器VPS(香港或者国外的空间需要加带宽,不然会很慢),而且显得不正规,因此网站最好都要备案。 个人网站需要公安备案吗? 现在的个人网站备案,不单是指网站备案…

    2019年10月29日
    01.3K