如何样式化 WordPress 中的 Stripe 支付表单

您是否曾创建过一个色彩搭配恰到好处、字体优美的完美网站，却发现您的支付表单看起来……格格不入？

我经历过。您花费大量时间让您的网站看起来专业且值得信赖，但通用的“立即支付”按钮或默认的字段样式却与您的品牌不符。这会让收款这一最后、最关键的步骤与客户体验的其他部分脱节。

那时我才了解到，一些简单的样式调整可以带来多么强大的效果。而且，有了合适的支付插件，您无需聘请开发人员或深入研究复杂的主题文件即可完成。

担心这会变得太技术化？不必担心。这里不需要任何编码经验。我将坚持使用简单、循序渐进的说明，而对于最强大的自定义功能，实际上只需要知道复制什么以及粘贴到哪里。

在本指南中，我将向您展示一些对初学者友好的方法来自定义您的 Stripe 支付表单。我将涵盖从无代码可视化调整到使用自定义 CSS 来完全控制设计的所有内容。

在 WordPress 中自定义 Stripe 支付表单

为什么要美化您的 Stripe 支付表单？

任何销售的最后一步都是支付，而您的支付表单的设计在那个时刻起着至关重要的作用。一个干净、专业且与您网站其他部分一致的表单可以建立信任，并向客户保证他们的信息是安全的。

将其想象成一个实体店面；一个统一、品牌一致的收银台比一个通用的收银台感觉更安全。这些细微的设计细节创造了一种无缝的体验，可以直接影响您的转化率。

幸运的是，您不必成为一名设计师也能做出有意义的改进。

使用内置设置进行样式设置

我一直使用 WP Simple Pay 来创建 Stripe 支付表单，因为它不需要额外的插件，甚至不需要创建一个复杂的购物车系统。

它还包含一些内置选项，可以帮助您只需点击几下即可自定义表单。

在我们开始之前，最好在您的网站上设置好 WP Simple Pay。如果您还没有使用过它，这里有几个对初学者友好的教程可以帮助您入门：

• 如何在 WordPress 页面上添加支付表单（无需代码）
• 如何为您的 WordPress 网站添加“立即购买”按钮

一旦您使用 WP Simple Pay 构建了一个 Stripe 支付表单，您就可以开始对其进行样式设置了。让我们从直接在您的 WordPress 管理仪表板中进行操作开始。

如何使用 WP Simple Pay 自定义支付按钮

您的表单中最突出的部分是付款按钮。要对其进行快速样式调整，您可以直接在表单设置中选择两种外观。

WP Simple Pay 允许您在单个表单设置中更改“结账按钮”、“付款按钮”和“优惠券应用按钮”的样式。

只需访问您想编辑的付款表单，然后在自定义字段设置中调整按钮样式。

首先，导航到“付款表单”选项卡，然后点击您想要样式化的付款表单。

接下来，点击“表单字段”选项卡。在这里，您可以为付款按钮选择“Stripe 蓝色”或“默认”。

这是样式化付款按钮的快速预览：

总开关：“主观样式”

为确保您的表单从一开始就看起来很棒，WP Simple Pay 包含一个内置样式表。

它被称为“主观样式”，因为它为表单的布局、间距和响应式行为应用了默认设计。

对于大多数用户来说，保持开启是最佳选择。

WP Simple Pay 的样式旨在立即获得出色的效果，无需任何努力。但是，如果您有信心并想要一个空白画布让您的主题自己的样式接管，您绝对可以选择！

您可以通过转到“WP Simple Pay → 设置 → 常规 → 高级”并将“主观样式”切换为“禁用”来关闭我们的样式。

现在您已经了解了 WP Simple Pay 的内置设置如何工作，让我们来探索如何完全控制表单的设计。

自定义方式 — 使用 CSS 为表单设置样式

虽然内置设置非常适合快速更改，但您可能希望将付款表单与您网站的独特品牌完美匹配。这时就需要 CSS（层叠样式表）。它是浏览器用来设置网页样式的语言，您可以使用它来完全控制表单的设计。

担心这变得太技术化？别担心。对于大多数更改，只需将一小段文本复制并粘贴到正确的位置即可。我会向您展示具体方法。

接下来的步骤取决于您使用的主题类型，是“经典主题”还是“区块主题”。

经典主题使用较旧的自定义程序工具，通常依赖于小部件和页面模板。另一方面，区块主题使用较新的站点编辑器，它允许您使用区块设计整个站点。

让我们从经典主题开始。

使用自定义程序工具将自定义 CSS 添加到您的 WordPress 站点

将自定义 CSS 添加到您的 WordPress 站点的最安全、最简单的地方是主题自定义程序。这样，在更新主题时，您的更改不会丢失。

1. 从您的 WordPress 管理仪表板导航到外观 → 自定义。
2. 左侧将打开一个新面板，右侧显示您站点的实时预览。
3. 点击面板底部的“其他 CSS”选项卡。

会出现一个文本框，您可以在其中粘贴代码。例如，

simpay-checkout-btn

{background-color:

#800080!important; /* 这是一个标准的紫色 */}

这段特定的代码会将您网站上所有 WP Simple Payment 表单的付款按钮颜色更改为紫色。

您在此处添加的任何 CSS 代码都将应用于您的网站，允许您覆盖主题的默认样式。当您键入时，您将在右侧看到更改的实时预览。

另一个例子是创建一个 CSS 代码配方，用于为付款表单字段添加浅灰色背景和圆角。您可以直接将其粘贴到 WordPress Customizer 的“其他 CSS”框中。

使用 AI 创建 CSS 配方

不想从头开始编写 CSS？您不必这样做。您可以使用像 Gemini Pro 这样的 AI 助手为您生成自定义配方。只需用简单的英语描述您想要实现的目标。例如，您可以问：

“编写 CSS 代码，为 WP Simple Pay 按钮添加微妙的渐变背景并使文本加粗。”

人工智能是创建自定义样式的强大合作伙伴，为您提供了一个很好的起点，然后您可以在您的网站上进行测试和调整。”

使用块编辑器添加自定义 CSS

如果您的网站使用区块主题，您将使用完整的站点编辑器而不是 Customizer 来管理您的设计。

首先，在您的 WordPress 管理仪表板中转到 外观 → 编辑器 。

在左侧边栏中，单击 页面 图标。然后，找到托管 WP Simple Pay 付款表的页面。

现在您将看到 WordPress 编辑器。在屏幕右下角，单击其他 CSS 以调出框。

使用区块编辑器的好处是，它在每个页面或帖子中都提供了一个特定的位置来添加 CSS，这些 CSS仅适用于该单个页面。

这对于一次性更改非常有用。例如，您可以轻松更改付款表单标题的颜色。

这只是您可以使用区块编辑器自定义网站上付款表单的一种方式。

请记住，您不必成为开发人员或从头开始编写代码。试试 Gemini Pro 或选择另一个 AI 工具来帮助您制定配方。

使用代码片段添加自定义 CSS

虽然 Customizer 和区块编辑器对于快速调整都非常方便，但更强大、更有条理的方法是使用像 WPCode 这样的专用插件，它可以将您的样式与主题安全地分开。

WPCode 是一个轻量级且免费的插件，可让您安全地添加自定义代码片段（如 CSS、HTML 或 JavaScript），而无需直接编辑主题文件。

这是将您的自定义项与主题分开并保持井然有序的绝佳方式，因此您在更新时永远不会丢失它们。

安装并激活 WPCode 后，在您的 WordPress 管理仪表板中转到 代码片段 → 添加代码片段 。

点击写有 添加自定义代码（新代码段） 的框，并为您的代码段命名，例如 WP Simple Pay 表单样式。

在 代码类型 下，从下拉菜单中选择 CSS 代码段 。

将您的 CSS 粘贴到代码框中。然后，点击 保存代码段 并将顶部的开关切换到 激活 。

就是这样！您的自定义样式现在已在您的 WP Simple Pay 付款表单中生效，您可以随时返回此代码段进行修改。

我最喜欢 WPCode 的一点是，您可以轻松尝试不同的样式，让您的表单看起来符合您的要求。您可以使用该插件通过简单的复制粘贴为您的表单应用完全不同的“主题”。

这是一个示例，但请记住，您可以使用 WPCode 为您的表单创建无限的自定义样式。

“现代浮动卡片”

这种样式为表单增添了高级感，使其看起来像是从页面上浮起，并带有柔和的阴影和微妙的渐变背景。这是现代 Web 应用程序中非常流行的外观。

它的作用：

✅ 使用简洁、简单的字段样式，符合现代美学。

✅ 将表单包裹在带有圆角和柔和阴影的容器中。

✅ 为背景应用柔和的双色灰色渐变。

只需将提供的样式复制并粘贴到框中，然后点击更新。

WPCode 会处理其余的事情。您可以转到付款页面预览您的表单。

准备好自定义您的 WordPress 支付表单了吗？

现在您已经掌握了转换付款表单所需的所有工具和技术。

我们已经从简单的内置设置，走到了强大而灵活的自定义 CSS 控制。

您已经学会了如何使用像 WPCode 这样的强大插件，为您的所有设计调整创建一个可靠且有组织的中心。

如果您想为您的 WordPress 网站创建自定义的 Stripe 付款表单，最好的方法是使用 WP Simple Pay 和 WPCode。

您想了解更多关于如何创建高转化率的 Stripe 付款表单和品牌登陆页面（无需代码）的技巧吗？我推荐以下指南：

• 如何在 WordPress 中创建 Stripe 付款登录页面
• 如何在WordPress中创建完美的付款表单（9个简单技巧）
• 在 WordPress 中使用付款表单模板来提高销量
• 如何在 WordPress 中为表单创建单独的电子邮件确认消息

您还在等什么？立即开始使用 WP Simple Pay！

要阅读更多此类文章，请在 X 上关注我们。