如何将 WooCommerce 购物车和结帐放在一页上

已发表: 2020-09-21

将 WooCommerce 购物车和结帐放在一页上

在这个简短的教程中，我将分享一个关于如何将 WooCommerce 购物车和结帐放在一个页面上的解决方案。这将极大地优化结帐流程，并为客户节省大量时间，因为他们无需等待另一个页面加载。如果您想节省额外的步骤，则可以使用此解决方案，特别是对于每个订单大约销售一种产品的高价产品。

一页上的 WooCommerce 购物车和结帐

经常在线购物的客户总是需要一个快速的结帐流程。如果加载速度较低或在付款前被重定向到其他页面，他们可能会选择另一家商店。许多人将 WooCommerce 用于他们的在线商店的主要原因是它允许您对其进行修改。

WooCommerce 中的默认结帐流程有两个单独的页面，分别用于购物车和结帐。我想说明如何将 WooCommerce 购物车和结帐放在一个页面上，以改善用户体验并增加转化率。

这将是您的终极指南，因为其中包含短代码、设置和 PHP 片段，您可以使用它们来完成这项工作。这可能看起来有点复杂，但是如果您认真按照我将要分享的步骤进行操作，您会发现它比您想象的要容易。

这样做的主要原因是多步骤结帐流程更有可能出现购物车放弃问题，从而提高您的 WooCommerce 商店的销售量。

综上所述，这里有一个简单的分步指南，可将购物车和结帐放在同一页面上。此外，您可以决定做一些 WooCommerce 测试和跟踪，看看转化率是否更好。

将 WooCommerce 购物车和结帐放在一页上的步骤

登录您的 WordPress 站点并以管理员用户身份访问仪表板。
从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加将购物车和结帐放在一个页面上的函数。
在php文件末尾添加以下代码。这意味着我们必须将“woocommerce_cart”短代码添加到结帐页面。请记住保存更改：

 /**

 * 仅在结帐页面显示购物车 – WooCommerce

*/

add_action（'woocommerce_before_checkout_form'，'njengah_cart_on_checkout_page_only'，5）；

功能 njengah_cart_on_checkout_page_only() {

if ( is_wc_endpoint_url( 'order-received' ) ) 返回；

echo do_shortcode('[woocommerce_cart]');

}

要查看结果，只需刷新结帐页面，您应该会看到：

值得一提的是，如果您熟悉购物车页面布局，您可能知道购物车总计部分。由于同一页面上有两个短代码，我共享的这段简洁代码会自动隐藏总数。这是一个不错的功能。

仅短代码就可以解决问题，但如果您进行一些审查，您会发现购物车页面仍然显示为独立的. 此外，购物车在结帐页面上被清空，WooCommerce 会将用户重定向到购物车页面并显示空购物车消息。这意味着需要进行一些调整才能改变这一点。您需要完全摆脱购物车页面，以便用户永远不会看到它。

在您的 WordPress 仪表板上，单击WooCommerce > 设置。 在设置页面上点击高级选项卡，然后只需点击小“x”并保存更改，如图所示：

之后，您需要删除购物车页面。这是因为它不再有用并且重定向已经到位并且您的购物车表已经在结帐页面上。
但是，如果您想在用户直接访问或购物车表清空时重定向一个空的结帐页面，这里有一个小片段。这将帮助您将空的结帐页面重定向到主页。

从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加将空结帐页面重定向到主页的函数。

在php文件末尾添加以下代码。

 /**

* 重定向空购物车/结帐 - WooCommerce

*/




add_action('template_redirect', 'njengah_redirect_empty_cart_checkout_to_home');

功能 njengah_redirect_empty_cart_checkout_to_home() {

if ( is_cart() && is_checkout() && 0 == WC()->cart->get_cart_contents_count() && !is_wc_endpoint_url( 'order-pay' ) && !is_wc_endpoint_url( 'order-received' ) ) {

wp_safe_redirect(home_url());

出口;

}

}

要查看结果，请删除购物车中的所有产品，您将被重定向到主页，如下所示：

结论

这就对了！现在您拥有优化的结帐流程，您不必担心 WooCommerce 商店中的购物车遗弃问题。在第一个代码段中，我使用将“woocommerce_cart”短代码添加到结帐页面，以在顶部添加购物车表格，并在其下方添加结帐表格。但是，重要的是要注意您需要完全摆脱购物车页面，以便用户永远不会看到它。

此外，我还添加了一个额外的 PHP 代码片段，可帮助您重定向空结帐。我希望这篇简短的文章提供了一个解决方案，说明如何将 WooCommerce 购物车和结帐放在一个页面上。

类似文章

如何更改 WooCommerce 支付网关图标
如何在页脚 [HTML] 中添加 WooCommerce 支付图标
如何在 WooCommerce 结帐页面上隐藏 PayPal 图标
如何调整 WooCommerce 产品图像的大小
如何在没有插件的情况下重定向 WordPress 页面？
如何逐步安装 WooCommerce 店面 [完整指南]
在 WooCommerce 中更改继续结帐文本
如何按类别显示 WooCommerce 产品
从 WooCommerce 产品页面隐藏或删除数量字段
如何在 WooCommerce 中隐藏购物车小计或删除小计行
如何隐藏 WooCommerce 优惠券代码字段
如何禁用特定类别的付款方式
如何在 WooCommerce 中隐藏添加到购物车按钮
如何在 WooCommerce 中获取付款方式 » 代码示例
如何在 WooCommerce 中创建我的帐户页面
什么是 WooCommerce 店面主题？ [已回答]
登录 WooCommerce 后如何重定向到购物车
如何在 WooCommerce 商店页面中更改添加到购物车按钮文本
如何跳过购物车并重定向到结帐页面 WooCommerce
如何更改 WooCommerce 的“已添加到购物车”通知