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 提供了灵活的解决方案。这些方法能够帮助根据需求定制按钮,提升网站的个性化和整体外观。