如何更改 WooCommerce 中的“添加到购物车”按钮文本

WooCommerce 是 WordPress 平台上广泛使用的电商插件。作为电商网站的重要组成部分，“添加到购物车”按钮是用户进行购买决策的关键环节。有时，商家可能希望根据具体业务需求或网站风格更改该按钮的文本。

本文将介绍两种方法，帮助实现这一目标：使用 Loco Translate 插件 和 自定义 CSS。

方法 1：使用 Loco Translate 插件更改“添加到购物车”按钮文本

步骤 1：安装并激活 Loco Translate 插件

首先，需要安装并激活 Loco Translate 插件。安装完后，插件会在 WordPress 仪表盘中添加一个新选项，可以方便地修改网站上的文本。

• 在 WordPress 仪表盘，点击 插件 > 安装插件，搜索 Loco Translate。
• 安装并激活插件。

步骤 2：进入 Loco Translate 设置

• 在仪表盘中，点击 Loco Translate > 首页。
• 进入插件后，将看到网站上所有已安装插件的列表。

步骤 3：选择 WooCommerce 插件

在插件列表中，找到 WooCommerce 并点击它。

步骤 4：添加新语言

点击 + 新语言 按钮，选择需要更改的语言。

步骤 5：搜索“添加到购物车”文本

使用顶部的搜索框，输入 “添加到购物车” 来找到该按钮的文本。

步骤 6：修改按钮文本

• 选择 “添加到购物车” 进行修改。
• 在下方的翻译框中，输入希望显示的新文本。例如，可以修改为 “立即咨询”。

步骤 7：保存更改

完成修改后，点击 保存 使其生效。

通过这种方法，可以轻松更改按钮文本，适应不同语言和业务需求。

方法 2：使用自定义器更改按钮文本样式

如果想全局更改网站上所有按钮的文本样式，可以在 自定义器 中进行设置，以下是详细步骤：

步骤 1：进入外观 > 自定义

• 在仪表盘中，点击 外观 > 自定义，进入网站自定义界面。

步骤 2：点击“全局”设置

• 在自定义器中，选择 全局 设置。

步骤 3：点击按钮样式设置

• 选择 按钮，进入按钮的样式设置界面。

步骤 4：编辑按钮字体样式

• 点击 字体 旁的铅笔图标，进入字体设置。

• 选择 text-transform: capitalize，使按钮文本变为大写。

这个设置会影响所有按钮的文本样式。

方法 3：使用自定义 CSS 更改“添加到购物车”按钮文本样式

如果只想更改 “添加到购物车” 按钮的文本样式，而不影响其他按钮，可以添加自定义 CSS 代码。

对于单个产品页面：

.woocommerce div.product form.cart .button.single_add_to_cart_button {
    text-transform: capitalize;
}

对于商店页面：

.woocommerce ul.products li.product .button, 
.woocommerce-page ul.products li.product .button {
    text-transform: capitalize;
}

通过这些 CSS 代码，只有 “添加到购物车” 按钮的文本会变为大写，而其他按钮保持原样。

总结

修改 WooCommerce 中的 “添加到购物车” 按钮文本非常简单，可以通过 Loco Translate 插件 或 自定义 CSS 来完成。若想调整按钮的文本样式，自定义器 和 CSS 提供了灵活的解决方案。这些方法能够帮助根据需求定制按钮，提升网站的个性化和整体外观。

最近更新

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息