要更改WooCommerce按钮的颜色，我们需要更改或替换按钮的默认style.css文件。 为此，我们需要添加一个 自定义CSS代码 对我们的 儿童的WordPress主题.

有两种方法可以做到这一点：

• 向子主题style.css文件添加自定义CSS
• 使用一些插件将自定义CSS代码注入您的网页。

1步：安装WordPress的简单的自定义CSS插件并激活它

我们将使用一个 WordPress插件 将 CSS 代码注入到 WooCommerce网上商店。 您可以下载插件： 简单的自定义CSS

你可以阅读我们的教程 WordPress插件的安装和激活.

激活插件后，新的子菜单将被添加到菜单中 Apparence :

访问此部分会将您带到带有文本框的界面，您可以在其中输入自定义CSS代码。

将以下CSS放在文本框中，然后单击“ 更新自定义CSS”。

.woocommerce＃内容input.button.alt：悬停，.woocommerce #respond输入＃submit.alt：悬停，.woocommerce a.button.alt：悬停，.woocommerce button.button.alt：悬停，.woocommerce input.button。 ALT：悬停，.woocommerce页＃内容input.button.alt：悬停，.woocommerce页输入#respond＃submit.alt：悬停，.woocommerce页a.button.alt：悬停，.woocommerce页按钮。 button.alt：悬停，.woocommerce页input.button.alt：悬停{背景：红显著; 背景色：红色重要; ！颜色：白色重要; 文字阴影：透明很重要; 箱阴影：无; 边框颜色：#ca0606重要; } .woocommerce＃内容Input.button：悬停，.woocommerce #respond输入＃提交：悬停，.woocommerce a.button：悬停，.woocommerce button.button：悬停，.woocommerce input.button：悬停，.woocommerce页＃快乐input.button：悬停，.woocommerce页输入#respond＃提交：悬停，.woocommerce页a.button：悬停，.woocommerce页button.button：悬停，.woocommerce页input.button：悬停{背景：红色重要; 背景色：红色重要; ！颜色：白色重要; 文字阴影：透明很重要; 箱阴影：无; 边框颜色：#ca0606重要; } .woocommerce＃内容Input.button，.woocommerce #respond输入＃提交，.woocommerce a.button，.woocommerce button.button，.woocommerce input.button，.woocommerce页＃内容input.button，.woocommerce页＃ ＃提交输入响应，.woocommerce页a.button，.woocommerce页button.button，.woocommerce页input.button {背景：红显著; ！颜色：白色重要; 文字阴影：透明很重要; 边框颜色：#ca0606重要; } .woocommerce＃内容Input.button.alt：悬停，.woocommerce #respond输入＃submit.alt：悬停，.woocommerce a.button.alt：悬停，.woocommerce button.button.alt：悬停，.woocommerce input.button .ALT：悬停，.woocommerce页＃内容input.button.alt：悬停，.woocommerce页输入#respond＃submit.alt：悬停，.woocommerce页a.button.alt：悬停，.woocommerce页按钮.button.alt：悬停，.woocommerce页input.button.alt：悬停{背景：红显著; 箱阴影：无; 文字阴影：透明很重要; ！颜色：白色重要; 边框颜色：#ca0606重要; }

现在，您可以访问您的在线商店，您会注意到按钮实际上已经更改了颜色。

要自定义按钮的颜色以最终获得所需的外观，

替换属性“ 背景：红色重要！ 由 您选择的颜色。 更新代码并再次访问您的在线商店。 实际上，使用我们刚为您提供的样式，您将能够完全更改按钮的结构。

通过一些研究，您将能够创建与您的风格相匹配的独特按钮 WordPress主题 (特别是如果后者与WooCommerce不兼容).

对于以下示例，可以使用以下CSS代码。

.woocommerce＃内容input.button，.woocommerce #respond输入＃提交，.woocommerce a.button，.woocommerce button.button，.woocommerce input.button，.woocommerce页＃内容input.button，.woocommerce页#respond ＃提交输入，.woocommerce页a.button，.woocommerce页button.button，.woocommerce页input.button {背景色：#6fba26; 填充：10px; 位置：相对; FONT-FAMILY： '打开三世'，无衬线; 字体大小：12px; 文字修饰：无; 颜色：#FFF; 背景图像：线性梯度（底部，RGB（100,170,30）0％RGB（129,212,51）100％）; 箱阴影：插图0px 1px 0px #7F8EF1，0px 6px 0px #0D496F; 边界半径：5px; } .woocommerce＃内容input.button.alt：悬停，.woocommerce #respond输入＃submit.alt：悬停，.woocommerce a.button.alt：悬停，.woocommerce button.button.alt：悬停，.woocommerce input.button .ALT：悬停，.woocommerce页＃内容input.button.alt：悬停，.woocommerce页输入#respond＃submit.alt：悬停，.woocommerce页a.button.alt：悬停，.woocommerce页按钮.button.alt：悬停，.woocommerce页input.button.alt：悬停{顶：7px; 背景图像：线性梯度（底部，RGB（100,170,30）100％RGB（129,212,51）0％）; 箱阴影：插图0px 1px 0px #0D496F，插图0px -1px 0px #0D496F; 颜色：#156785; 文字阴影：0px 1px 1px RGBA（255,255,255,0.3）; 背景：RGB（44,160,202）; }

对于那些希望在转换或销售产品方面优化其在线商店性能的人，

我们还提供了专为该任务设计的3高级WordPress插件。

1。 WooCommerce恢复被放弃的购物车

你的客户 经常把篮子装满并离开它们： WooCommerce恢复放弃购物车 您将可以与他们联系，提醒他们购买了什么，并邀请他们完成操作。

设置从购物车被丢弃到向您的客户发送个性化提醒电子邮件的时间间隔，该电子邮件包含指向购买页面的直接链接，供他们查看购物车的状态点购买。

下载 | 演示 | 虚拟主机

2. WooCommerce隐藏价格并添加到购物车按钮插件

WooCommerce隐藏价格插件使商人可以创建多个规则来隐藏价格或对具有您电子商务网站特定访问权限的未登录客户或用户隐藏“添加到购物车”按钮。

您可以隐藏某些产品或特定类别的价格和“添加到购物车”按钮。 您可以将它们替换为自定义文本或将它们带到  联系表。 您可以创建许多规则，这些规则会自动隐藏价格和“ 添加到panier”取决于您想要什么。

下载 | 演示 | 虚拟主机

3。 Woo商务货币兑换

该插件可让您实时将产品价格从一种货币转换为另一种货币。

这在电子商务中尤为重要，因为它面向全世界。 此插件可确保无论您的客户位于何处，都将始终能够从您的在线商店订购。

下载 | 演示 | 虚拟主机

推荐资源

发现其他推荐资源，这些信息将对您有帮助 优化在线商店的性能。 

• 50 WooCommerce插件来提高你的网上商店
• 9 WordPress插件来创建会员计划
• 9 WooCommerce插件可增强变量产品的属性
• 5 WordPress插件可以在您的博客上直观地编辑CSS

结论

这是 ！ 这是本教程的全部内容，专门用于按钮自定义 加入购物车 来自WooCommerce。 不要犹豫，与您的朋友分享 社交网络 首选。 

但是，您也可以咨询我们的 RESSOURCES，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建。

但是，与此同时，请告诉我们您的 评论 和专用部分中的建议。

...