WooCommerce商城带有一个内置的结帐页面，但它并未针对转化进行优化。通过将默认设计替换为自定义结帐页面，可以获得更多销售额并提高转化率。在本文中，我们将展示如何轻松自定义Wordpress WooCommerce电商网站结帐页面，无需编写任何代码。
为什么要在 WordPress 中自定义 WooCommerce 结帐页面？
研究表明，客户放弃了 70-85% 的购物车。换句话说，大多数客户不会花任何钱就离开结帐页面。
考虑到这一点，需要尽一切可能说服客户完成购买。
问题是内置的 WooCommerce 结帐并未针对销售进行优化。
通过将此默认设计替换为自定义 WooCommerce 结帐页面，通常可以提高转化率并获得更多收入。
例如，您可以向结帐页面添加社交证明，例如客户评论和五星级评分。这可以鼓励人们信任您的商城，即使他们以前没有购买过。
还可以展示购物者经常一起购买的相关产品，并优化布局以使结账流程尽可能简单。
在下图中，可以看到从 AIOSEO 网站获取的优化结帐页面示例。
话虽如此，让我们来看看如何轻松自定义WooCommerce 结帐页面并从在线商店中赚更多的钱。
方法 1.使用 FunnelKit Builder 自定义您的 WooCommerce 结帐页面
创建自定义 WooCommerce 结帐页面的最简单方法是使用 FunnelKit Builder。这个插件带有现成的结帐模板和表格。
它还具有内置的“优化”功能，旨在帮助您获得更多销售。
您需要做的第一件事是安装并激活插件。
激活后，转到 FunnelKit » Store Checkout。在此屏幕上，单击 ‘Create Store Checkout’ 按钮。
您现在可以从 FunnelKit 专业设计的任何结帐页面模板中进行选择，或选择“从头开始”。我们建议使用模板来帮助您快速创建高转化率的结账页面。
要仔细查看任何模板，只需将鼠标悬停在它上面，然后在它出现时单击“预览”按钮。
在我们的图片中，我们使用的是 Hific 模板，该模板有一个部分，您可以在其中讨论您提供的产品，还有一个部分可以展示客户推荐。
找到要使用的模板后，单击“导入此渠道”。
此时，FunnelKit 可能会要求您安装一些额外的插件，例如用于块编辑器的 SlingBlocks 插件。
如果您看到此消息，请单击“激活”以获取您需要的插件。
之后，您可以输入商店结帐页面的名称。这仅供您参考，因此您可以使用任何可以帮助您在 WordPress 仪表板中识别页面的东西。
完成后，单击“添加”按钮。
在下一个屏幕上，您将看到此模板中包含的所有步骤。
由于您使用的是 FunnelKit 的免费版本，因此该模板包括一个结帐页面和一个自定义 WooCommerce 感谢页面。
创建自定义 Checkout 设计
要继续自定义结帐页面，请单击其“编辑”链接。
您现在可以单击“编辑模板”以在 WordPress 块编辑器中打开模板。
注意： 如果您使用的是页面构建器插件，则 FunnelKit 可能会在不同的编辑器中打开模板。如果发生这种情况，那么您需要单击“切换到 WordPress 编辑器”而不是“编辑模板”。
您现在可以像构建任何 WordPress 页面一样自定义模板。只需单击任何块，然后使用右侧菜单和浮动工具栏中的设置对其进行微调。
例如，您通常需要将占位符 logo 替换为您自己的自定义 logo。为此，请单击以选择 Image 块，然后在浮动工具栏中选择 ‘Replace’。
现在，要么选择“打开媒体库”并从 WordPress 媒体库中选择一张图片，要么点击“上传”并从您的计算机中选择一个文件。
选择图像后，您可以使用右侧菜单中的设置添加图像替代文本、更改宽度，甚至添加圆角。
您还需要将占位符文本替换为有关您自己的在线市场和客户推荐的信息。只需单击任何文本块即可使其可编辑，就像在标准 WordPress 块编辑器中处理文本一样。
完成后，您可以使用右侧菜单中的设置设置文本样式。例如，您可以在 WordPress 中使用边框和框阴影来突出文本、更改字体系列或更改文本颜色。
只需重复这些步骤即可自定义 FunnelKit Builder 模板中的所有标准块。您还可以通过单击“+”图标来添加更多块，或删除任何不需要的块。
这些块中的大多数都应该很熟悉，但 FunnelKit 确实带有一些自定义块。由于您使用的是结帐模板，因此设计已经有一个 FunnelKit Checkout 数据块，因此单击以选择此数据块。
在右侧菜单中，您将看到 Checkout 块中所有不同部分的列表，例如 Form Header、Coupon 和 Payment Gateways。
只需单击即可展开每个部分，然后进行更改。
通常，如果该部分具有标题、副标题或按钮标签，则您可以通过键入新文本来更改它。
某些部分是可选的，因此您可以使用切换来启用和禁用它们。
例如，您可能希望添加可折叠的订单摘要，以便购物者可以看到购物车中的所有商品。
您可以向结帐表单添加更多字段，也可以删除任何不需要的字段。例如，如果您使用 WooCommerce 销售数字下载，那么您通常不需要收集任何运输信息。
自定义 Checkout 表单
当您对结帐页面的外观感到满意时，是时候仔细查看表单字段并进行任何必要的更改了。
为此，请单击“更新”以保存您的更改，然后选择“返回结帐页面”。
现在，单击 ‘字段’ 选项卡以查看构成结帐表单的所有不同部分和字段。
您可以使用拖放对这些字段重新排序。
要添加更多字段，只需将它们从右侧部分拖动，然后放到表单上即可。
您还可以通过单击“添加部分”按钮将这些字段组织成多个部分。
在出现的弹出窗口中，只需键入该部分的名称即可。由于客户会看到此内容，因此最好添加一个描述性的有用标题。
完成后，单击“添加”。
现在，您可以使用拖放功能将字段添加到该部分。
是否要从结帐表单中删除字段？然后只需将鼠标悬停在字段上，然后单击出现的红色“x”图标。
要自定义任何 FunnelKit 字段，只需单击该字段即可。
您看到的设置可能因字段而异，但您通常可以通过选中“必填”框来更改其标签、添加占位符值或将字段设为必填字段。
当您对结帐字段的配置方式感到满意时，请不要忘记单击 ‘Save Changes’ 来存储您的设置。
通过 FunnelKit 优化获得更多销售额
为了获得更多销售额，最好通过单击“优化”选项卡来启用 FunnelKit 的一些优化。
在这里，您将看到所有可以简化结帐过程的不同优化。
免费的 FunnelKit 插件带有所有最佳 WooCommerce 支付网关的快速结帐按钮。这允许购物者点击他们喜欢的快速结账按钮并使用现有帐户付款，类似于立即购买按钮。
由于客户不必填写结帐表格，这可以降低购物车放弃率并帮助您获得更多销售额。
要设置快速结账，请从左侧菜单中选择“快速结账按钮”。然后，单击 ‘启用’ 按钮并使用 ‘选择位置’ 下拉菜单来更改按钮在结帐页面上的显示位置。
请注意，您需要启用付款请求按钮才能使用 Stripe Apple Pay 按钮。
接下来，您可能希望启用 enhanced phone 字段。当客户输入他们的送货地址时，FunnelKit 可以在电话字段旁边显示国家/地区国旗。
这让购物者知道他们输入了正确的地址。
要添加此功能，请从左侧菜单中选择“增强型电话字段”，然后单击“启用”旁边的“是”按钮。
在此屏幕上，您还可以使用购物者选择的国家/地区验证电话号码。这是检查客户是否输入了有效电话号码的一种方法。
要启用此检查，只需选择“验证电话号码”旁边的“是”按钮。
最后，您可以选择是使用国家/地区代码还是不使用国家/地区代码保存电话号码。如果您向国际受众销售产品，那么选择 “With country code” 通常是有意义的。
当您对优化的设置方式感到满意时，请单击“保存更改”。
如您所见，FunnelKit 具有更多优化功能，可以帮助您获得更多销售额。这包括自动填写购物者的账单和送货地址、自动应用优惠券以及为回头客预填结帐表格。
要解锁这些强大的 WooCommerce 优化，您需要升级到 FunnelKit Builder Pro。
发布自定义 WooCommerce 结帐页面
免费的 FunnelKit 插件具有更多设置和功能，可以帮助您创建高转化率的结帐页面。但是，这就是创建自定义 WooCommerce 结帐页面所需的全部内容。
当您对结帐页面的设置方式感到满意时，是时候通过单击 “草稿” 按钮使其上线了。
如果您想在发布页面之前预览页面，请单击“预览”。这将在新选项卡中打开自定义结账页面。
要使页面处于活动状态，请单击“草稿”，但这次选择“已发布”。现在，如果您访问您的 WordPress 网站，您将看到实时的自定义结帐页面。
方法 2.使用 SeedProd 自定义您的结帐页面
您还可以使用 SeedProd 创建自定义 WooCommerce 结帐页面。
SeedProd 是超过 100 万个网站使用的最佳着陆页构建器。它带有 180 多个专业设计的模板，包括可用于创建销售页面和潜在客户挤压页面的电子商务模板。
更好的是，SeedProd 完全支持 WooCommerce，甚至带有特殊的 WooCommerce 块，您可以使用这些块快速创建自定义结帐页面。
由于它允许您创建各种页面，因此如果您想自定义其他页面，甚至为您的在线商店创建自定义 WordPress 主题，SeedProd 是一个不错的选择。
您需要做的第一件事是安装并激活插件。
激活后，转到 SeedProd » 设置并输入您的许可证密钥。
您可以在 SeedProd 网站上的帐户下找到此信息。输入许可证后，单击“验证密钥”按钮。
选择 SeedProd 模板
之后，转到 SeedProd » 着陆页，然后单击“添加新着陆页”。
接下来，您需要为自定义结帐页面选择一个模板。
SeedProd 的模板分为不同的活动类型，例如即将推出和 404 页面。您可以单击屏幕顶部的选项卡，根据广告系列类型过滤 SeedProd 的模板。
选择与您要创建的页面类型匹配的设计将帮助您更快地构建页面。但是，每个模板都是完全可定制的，因此您始终可以微调设计以更好地适应您的在线商店。
对于本指南，请选择“空白模板”，以便您可以从头开始。
要选择模板，请将鼠标悬停在模板上，然后单击“复选标记”图标。
接下来，为您的自定义结帐页面输入名称。SeedProd 将根据页面的标题自动创建一个 URL，但您可以将此 URL 更改为您想要的任何内容。例如，您可以通过添加一些相关关键字来改进您的 WordPress SEO。
要了解更多信息，请参阅我们关于如何为您的 WordPress 博客进行关键字研究的详细指南。
当您对输入的信息感到满意时，请单击“保存并开始编辑页面”按钮。
这将带您进入拖放编辑器，您可以在其中构建自定义 WooCommerce 结帐页面。
设计一个高转化率的结账页面
SeedProd 编辑器在右侧显示结帐页面的实时预览，在左侧显示一些块设置。
只需从创建品牌标题开始。
在这里，您可以使用一个部分，它是经常一起使用的块的集合。只需单击 ‘部分’ 选项卡，然后选择 ‘标题’ 类别。
之后，将鼠标悬停在 ‘标题 1’ 部分，然后单击 ‘加号’ 图标。
这会将 Header 部分添加到您的布局中。
首先，您需要通过单击以选择该块来替换占位符 ‘Your Logo’。
然后，单击左侧菜单中的 ‘Select Image’ 图标。
现在，您可以从媒体库中选择图像或从计算机上传新文件。
的 Header 1 部分附带一个导航菜单。但是，这会鼓励访问者在没有购买的情况下放弃结帐页面，因此最好将其删除。
要删除 Nav Menu 块，只需单击以选择该块。然后，单击“删除块”选项。
完成后，单击号召性用语按钮。
为购物者提供一种返回购物车页面并添加更多商品或更改数量的方法是一种明智的做法。考虑到这一点，输入要用于此按钮的行动号召，例如“查看购物车”或类似内容。
接下来，在 ‘Link’ 字段中输入您的 WooCommerce 购物车页面的 URL。
现在，购物者可以通过单击此按钮访问购物车页面。
添加追加销售和交叉销售内容
之后，是时候为结帐页面的其余部分选择布局了。
最好在侧边栏部分显示一些推荐的产品，因为这会鼓励购物者将更多商品添加到他们的购物车中。考虑到这一点，请单击“选择您的布局”下的内容和侧边栏布局。
完成后，在左侧菜单中找到 ‘Checkout’ 块并将其拖到您的布局中。
您可以使用左侧菜单中的设置完全自定义结帐的外观，包括更改配色方案、字体选择、链接颜色、按钮等。
当您对结帐部分的外观感到满意时，是时候添加热门产品或推荐产品部分了。这可以通过推广购物者可能想要购买的其他商品来增加销售额。
要创建此部分，只需将 ‘Best Selling Products’ 块拖到您的页面上即可。
您现在可以使用左侧菜单中的设置来配置此数据块。
接下来，最好在热门商品上方添加标题。只需将 ‘Headline’ 块拖到您的页面上，然后将其拖放到热门产品块上方即可。
然后，点击选择“标题”块并输入要使用的标题。
显示客户评论和评分
完成此操作后，我们建议您通过添加客户推荐块来显示社交证明。只需找到 ‘Testimonials’ 块并将其拖到您的布局上即可。
您现在可以更改推荐在您的在线商店中的外观。
例如，在左侧菜单中，您将看到更改评论气泡颜色、更改对齐方式和添加更多客户推荐的设置。
另一个好主意是在您的推荐下方显示星级。如果您已经有很多正面评价，这是一个不错的选择。
为此，只需找到 ‘Star Rating’ 块并将其拖到推荐块下即可。
发布 WooCommerce 结帐页面
当您对 WooCommerce 结帐页面的外观感到满意时，是时候通过单击“保存”旁边的下拉箭头来发布它了。
然后，选择 ‘Publish’ 选项。
现在，如果您访问您的商店，您将看到实时结帐页面。
专业提示：转化跟踪可以帮助您了解结帐页面上哪些内容有效，哪些内容无效。然后，您可以使用此见解通过 SeedProd 微调您的结帐页面。有关更多详细信息，请参阅我们关于如何设置 WooCommerce 转化跟踪的指南。
将您的结帐页面分配给 WooCommerce
此时，您已经发布了自定义结帐页面，但您的 WordPress 博客或网站仍在使用默认设计。您需要更改默认 URL 设置，以便 WooCommerce 将客户发送到新的结帐页面，而不是默认页面。
为此，请转到 WooCommerce » 设置，然后单击“高级”选项卡。
之后，打开 ‘Checkout page’ 下拉菜单并开始输入您刚刚创建的自定义结帐页面的 URL。
当正确的页面出现时，单击以选择它。
完成后，滚动到页面底部，然后单击“保存更改”以存储您的设置。WooCommerce 现在将使用自定义结帐页面。
创建自定义 WooCommerce 购物车页面
优化 WooCommerce 结帐页面后，您可能还需要考虑自定义您的 WooCommerce 购物车页面。
通过优化购物车和结帐页面，您可以使整个购买过程感觉轻松，这样您就不会错过任何销售。您还可以将两个页面设计为具有相同的品牌，以便访客获得一致的结账体验。
我们希望本文能帮助您轻松自定义 WooCommerce 结帐页面。
原文链接：https://www.itaoda.cn/blog/15488.html，转载请注明出处。
评论0