如何自定义 WooCommerce 购物车页面

已发表: 2021-12-28

您想编辑您的购物车页面以使其更加用户友好并充分利用它吗？ 你来对地方了。 在本文中，我们将向您展示自定义 WooCommerce 购物车页面的不同方法。

在我们了解如何做到这一点之前，让我们先看一下默认购物车页面，并了解为什么首先应该自定义它。 让我们更好地了解您可以定制什么以及它将如何使您的商店受益。

为什么要编辑购物车页面？

作为店主，您应该尝试优化业务的各个方面。 我们之前已经了解了如何自定义 Shop Page、Product Pages 和 Checkout Page。 在这篇文章中，我们将重点关注购物车页面。

当涉及到客户的购买决定时，购物车页面是关键。 这是购物者在完成购买之前查看订单的地方。 因此，您的购物车页面应该为客户提供附加值，以提高他们的转化机会。

放弃购物车是在线商店的主要痛点之一，因为大约 80% 的用户放弃了购物车。 这就是为什么您应该特别注意您的购物车页面。 即使放弃购物车的微小改进也会对您的销售产生很大影响。

默认情况下，购物车页面的外观和行为方式取决于您的活动主题。 例如，以下是带有 Astra 主题的购物车页面的外观。

带有 astra 主题的默认购物车页面

这是默认的二十一二十一主题的外观。

带有二十一个主题的默认购物车页面

如您所见，购物车页面的外观和感觉因每个主题而异。 此外，默认购物车页面非常基本。 即使它完成了工作，它也没有提供任何额外的功能，错过了交叉销售、提供特别优惠等的机会。

通过自定义购物车页面，您可以改善客户的用户体验。 您可以为重要更新添加自定义消息、显示相关产品、添加返回购物车按钮、更改“添加到购物车”消息等等。 这些东西有助于改善用户体验，从而带来满意的客户。

总而言之，改进购物车页面可能对您的在线业务非常有益，并且值得付出努力。 现在让我们向前迈出一步，看看在 WooCommerce 中自定义购物车页面的不同方法。

如何自定义 WooCommerce 购物车页面

有多种方法可以自定义 WooCommerce 商店的购物车页面：

  1. 使用默认的 WooCommerce 块
  2. 使用插件
  3. 使用页面构建器
  4. 以编程方式

让我们仔细看看每种方法，以便您选择最适合您的方法。

1. 默认 WooCommerce 块

WordPress 块编辑器 Gutenberg 带有一组专用于 WooCommerce 的默认块。 其中包括所有产品、特色产品、过滤产品、所有评论等等。 您可以将总共 20 个 WooCommerce 块添加到您网站上的任何页面，就像普通的 Gutenberg 块一样。

默认 WooCommerce 块

1.1）添加所有产品块

导航到您的购物车页面或在 WordPress 中创建一个新页面。 单击左上角的+图标以展示可用于古腾堡编辑器的完整块集。 然后，向下滚动到 WooCommerce 块部分并找到所有产品块。 单击并将其拖动到页面区域，它将将该块添加到您的页面。

将块添加到页面后，您库存中的所有产品都将显示在此处。 您可以进一步调整从最右侧部分的设置菜单中显示的产品设置，并更改列数、行数、排序等。

使用 WooCommerce 块添加所有 WooCommerce 产品

1.2）添加最新产品块

最新产品块将显示所有新添加到您的库存。 只需单击最新产品块并将其拖动到您的页面上，它就会显示您的最新产品。 此外，您可以从设置菜单自定义块的设置。

在 WooCommerce 中添加最新产品块

1.3) 添加精选产品

Hand-Picked Products块允许您手动选择要在页面上显示的产品。 这可能是在页面上展示某些特定产品或在另一个页面上突出显示某些产品的好工具。

要将块添加到您的站点，只需将Hand-Picked Products块拖到页面上即可。 它将显示一个搜索栏，您可以在其中查找要突出显示的产品。 找到您想要的产品并单击它以将其添加到列表中。 同样，您可以重复该过程并将多个产品添加到列表中。

通过 WooCommerce Blocks 将精选产品添加到 WordPress

将所有想要的产品添加到列表后，点击完成按钮，瞧！ 您精心挑选的产品现在显示在页面上。 正如我们之前看到的，您可以从设置菜单中编辑设置。

手工挑选产品块的设置

同样，您可以添加您希望的任何其他 WooCommerce 块。 您可以在整个页面上使用单个块，也可以在同一页面上使用多个块。 可能性是无止境。

我们已经看到了默认的 WooCommerce 块如何帮助您自定义汽车页面。 现在，让我们继续下一部分，看看我们如何使用第三方插件自定义购物车页面。

2. 自定义购物车页面的插件

您可以使用几个插件来编辑购物车页面。 在本节中，我们将看看一些最好的。

2.1) WooCommerce 块

WooCommerce 块

WooCommerce Blocks 是实验性 WooCommerce 块的早期访问插件。 它允许您在将新的 WooCommerce 块发布到默认块编辑器之前试用它们。

在撰写本文时，该插件添加了两个额外的块：购物车和结帐。 激活 WooCommerce 块时，购物车和结帐块会自动添加到块编辑器中，您可以像使用任何其他块一样使用它们。

WooCommerce 块插件提供的块

要在页面上显示购物车，只需拖动购物车块，您的购物车就会出现。 然后，您可以单独自定义每个购物车部分并将购物车块作为一个整体。 此外，您甚至可以为装满和空的购物车编辑它。

使用购物车块将购物车添加到 WordPress 页面

同样，您可以在页面上显示结帐表单并根据自己的喜好对其进行自定义。 您还可以个性化设置中每个块的参数以及整个结帐块。

使用结帐块将结帐添加到 WordPress 页面

此外，您可以在购物车或结帐页面旁边的单个页面上放置许多块，这在以前是不可能的。 这为您提供了很大的灵活性，并允许您完全按照自己的意愿设计购物车页面。

添加这些块时，您可能会收到一条兼容性警告，表明该插件可能与其他插件或扩展存在兼容性问题。 这是因为某些块是实验性的并且正在开发中。 因此，它们应该只用于尝试新功能，而不是用于生产。 一旦它们稳定，它们将作为默认的 WooCommerce 块推出。

特征
  • 出于测试目的试验新块
  • 尝试购物车和结帐块
  • 如果发现任何错误和错误，请报告
价钱

这是一个免费插件。

如果您想尝试更多插件来编辑您的购物车页面，请查看其他两个：

2.2) StoreCustomizer

商店定制器

StoreCustomizer是一个多合一的软件包，可让您完全自定义您的 WooCommerce 商店。 您可以个性化从产品页面到商店页面、帐户页面、购物车页面和结帐页面的任何内容。

首先，您可以自定义整个商店使用的全局字体和颜色。 您还可以单独个性化每个页面、更改其外观、添加新功能和特性等等。

该插件消除了编写自定义片段来自定义 WooCommerce 商店部分的需要。 它自己添加所需的代码，因此无需创建任何子主题或添加自定义代码片段，因为它全部由插件处理。

最后，所有选项都方便地集成到主题定制器中。 因此，它可以无缝且轻松地自定义 WooCommerce 商店。

特征
  • 多合一插件来自定义您的 WooCommerce 商店
  • 个性化产品页面、商店页面、帐户页面、购物车页面和结帐
  • 根据您的喜好更改商店的设计
  • 无需任何编码即可为您的商店添加额外的特性和功能
  • 通过主题定制器轻松访问，使定制变得轻松
  • 极其轻量级，只添加必要的代码本身
价钱

这是一个免费增值插件，这意味着它有免费和高级版本。 虽然免费版本提供了不错的定制选项，但单个站点的高级计划起价为每年 49 美元，并为您提供高级定制体验。 它们包括一年的更新和支持。

2.3) WooCommerce 快速购物车插件

WooCommerce 快速购物车插件

WooCommerce 快速购物车旨在加快消费者的购买过程。 您可以使用该插件创建弹出式购物车和结帐页面，而不是单独的购物车和结帐页面。 此外，您可以完全跳过购物车页面并直接进行结帐。

购物车和结帐弹出页面都可以完全自定义。 您可以修改版式和颜色以匹配您网站的主题。 您还可以调整按钮的位置并自定义购物车布局。

此外，您可以从购物车页面应用优惠券，并使用弹出式购物车通过启用交叉销售来展示相关产品。 最后，该插件非常轻巧且经过良好优化，并支持所有广泛使用的支付渠道，例如 PayPal、Stripe 和 Amazon。

特征
  • 添加弹出式购物车和结帐页面以实现即时转换
  • 在弹出窗口中仅设置购物车或结帐或两个页面
  • 高度可定制
  • 轻量级和优化
  • 适用于所有流行的支付网关，如 PayPal、stripe、amazon
价钱

这是一个高级插件，单个站点每年花费 79 美元。 您还将获得 30 天退款保证。

在本节中，我们看到了一些自定义 WooCommerce 购物车页面的最佳插件。 让我们看一下我们可以完成的一些自定义。 为了演示，我们将使用 StoreCustomizer 插件。 让我们开始吧。

使用 StoreCustomizer 自定义购物车页面

StoreCustomizer 是一个功能丰富的插件，可让您自定义 WooCommerce 商店的几乎所有方面。 在上一节中，我们了解了插件的特性和功能。 现在让我们看看如何使用 StoreCustomizer 自定义购物车页面。

安装并激活插件

首先，转到您的WordPress 管理仪表板并导航到插件 > 添加新的。 搜索StoreCustomizer插件，单击立即安装按钮，然后激活它。

安装并激活 StoreCustomizer 插件

自定义购物车页面

激活插件后，转到外观 > 自定义以转到主题定制器。

导航到主题定制器

StoreCustomizer 在主题定制器中嵌入了其定制工具和功能。 只需从主题定制器菜单导航到StoreCustomizer > 购物车页面，您就会找到编辑购物车页面的所有选项。

基本自定义

从基本自定义开始，您有几种可能性。 您可以从购物车页面禁用优惠券，阻止用户更改购物车中的数量，或者在用户更新商品数量时让购物车自动更新。 您还可以删除指向产品页面的链接、显示产品元数据、列出库存产品等等。

购物车页面的基本自定义

添加返回商店按钮

如果用户需要在购物车中添加商品，返回商店按钮允许用户返回商店页面。 添加该按钮是个好主意，因为它可以为客户提供更好的购物体验。

StoreCutomizer 允许您向购物车页面添加返回商店按钮，并彻底改变其设计和感觉。 此外，您可以更改按钮文本并将其链接到任何页面。 最后，您还可以更改按钮的位置以满足您的需要。

在购物车页面上添加返回商店按钮

显示折扣/节省的金额

显示折扣/节省的金额允许您在总价部分中包含一个块，该块显示用户在使用优惠券或在全店销售期间获得的购买折扣。 你可以给它起任何你喜欢的名字，也可以改变背景和字体颜色。

在购物车页面显示折扣

交叉销售和购物车总计

您还可以在购物车页面上显示相关或特色产品。 通常，这些商品与购物车中的产品密切相关，因此用户可能会将它们添加到购物车中，从而帮助您提高销售额。

使用 StoreCustomizer 插件，您可以选择要显示的交叉销售总数和每行要显示的产品。 您可以选择将交叉销售部分移动到购物车总数下方或将其保留为默认值。 最后，您可以修改交叉销售的标题，甚至可以根据需要删除整个交叉销售部分。

除了交叉销售，您还可以更改购物车总计部分的标题。

在购物车页面上编辑交叉销售和购物车总计标题

编辑空购物车页面

默认的 Empty Cart 页面显示一条消息，通知用户购物车为空。 StoreCustomizer，允许您创建自定义消息以邀请用户浏览商店。

您还可以包含一个返回商店按钮以将客户重定向到商店。 您可以完全自定义按钮的设计和感觉，包括按钮的颜色、字体和文本。

自定义空购物车页面

自定义购物车表并继续结帐按钮

在 StoreCustomizer 购物车页面的设计组件区域下，您可以自定义购物车表格以及继续结帐按钮。 您可以调整按钮大小、颜色、字体等。

自定义购物车表格按钮并继续结帐文本

如您所见，插件可以帮助您自定义很多 WooCommerce 购物车页面。 但是，还有其他选择。 在下一节中，我们将了解页面构建器如何让您编辑购物车页面。

3. 使用页面构建器

页面构建器是一种万能的解决方案，可以满足您网站的所有修改需求。 大多数流行的页面构建器都有一个专门的 WooCommerce 部分，可让您完全自定义整个商店。

您可以使用页面构建器来更改购物车页面和任何其他 WooCommerce 页面。 页面构建器通常基于块或小部件的概念。 有各种功能和多种特性的小部件，您可以将它们添加到您想要的任何页面并进行编辑。

与页面构建器合作时，您在个性化方面拥有很大的自主权。 此外，页面构建器附带各种预制模板，这些模板经过完全预配置和创造性设计，供您使用。

如果您想使用页面构建器，两个最受欢迎和首选的选项是 Elementor 和 Divi。 这两个页面构建器都有一组 WooCommerce 特定的块。

例如，Elementor 包含 22 个不同的 WooCommerce 块供您使用。 但是，值得一提的是 Elementor 中的 WooCommerce 块仅在 Pro 版本中可用。

Elementor WooCommerce 块

对于 Divi，您可以访问 17 个 WooCommerce 块。 Divi 是一个高级页面构建器，因此您必须付费才能访问这些功能。

Divi WooCommerce 模块

插件和页面构建器并不是自定义 WooCommerce 购物车页面的唯一方法。 您还可以添加自定义代码片段来个性化和增强购物车页面的功能。 如果您有一些编码技能，那么下一部分适合您。 让我们看看如何以编程方式更改购物车页面。

4. 以编程方式

在继续之前，我们建议您创建站点的完整备份并使用子主题来编辑functions.php文件。 如果您不知道如何操作，请查看我们的指南，了解如何创建子主题或使用任何这些子主题插件。

配置子主题后，转到WP 管理仪表板 > 外观 > 主题编辑器。 在这里，您可以在子主题的functions.php文件的末尾添加自定义代码片段。

编辑函数文件

代码片段 插件是向您的网站添加代码片段的另一种选择。 您可以从 WordPress 存储库安装插件以将片段添加到您的站点。 即使使用代码片段，您也不需要子主题，但我们始终建议您拥有一个。

代码片段插件

现在让我们看看一些可用于自定义 WooCommerce 购物车页面的代码片段。

4.1) 购物车页面上的自定义消息

首先，让我们学习如何自定义购物车页面上的消息。 这对于向您的用户提供基本信息很有用。 例如，您可以向他们发出通知，例如“由于 COVID 导致发货可能需要更多时间”，让他们知道促销活动等等。 只需将片段中的“这是我的自定义文本”替换为您自己的，然后将其发布到您的网站。

 // 将自定义消息添加到 WooCommerce 购物车页面
add_action('woocommerce_before_cart_table', 'shop_message', 20);
功能 shop_message() {
echo '<p class="woocommerce-message">这是我的自定义文本</p>'; // 更改此文本
}

完毕！ 这将在您的购物车页面上显示一条自定义消息。

将自定义文本添加到购物车页面

4.2) 自定义内容清空购物车页面

自定义您的 Empty Cart 页面非常重要。 默认的 Empty Cart 页面仅显示一条消息，指出购物车为空。 但是，使用以下代码段，您可以将其自定义为更友好和互动的消息，引导用户浏览您的库存，向他们提供有关您的产品的信息等。

只需替换“您尚未将任何商品添加到您的购物车。 查看我们的库存，您会喜欢我们的产品”以及您想要显示的信息。

 // 将自定义内容添加到 Woocommerce 空购物车页面

add_action('woocommerce_cart_is_empty', 'empty_cart_custom_content');
功能 empty_cart_custom_content() {
echo '<h4>您还没有添加任何商品到您的购物车。 查看我们的库存，您会喜欢我们的产品</h4>'; //用自己的消息替换消息
回声do_shortcode（'
 ');
}

添加自定义文本以显示在空购物车页面上

4.3) 购物车页面上的清空购物车按钮

尽管让购物者选择清空购物车可能会适得其反，但事实是它提供了更好的体验。 对于这种情况，您可以包含一个 Empty Cart 按钮，让用户可以从他们的购物车中删除所有商品。

要添加 Empty Cart 按钮，只需使用以下代码片段。

 // Woocommerce购物车页面上的“清空购物车”按钮

add_action('woocommerce_cart_coupon', 'woocommerce_empty_cart_button');
功能 woocommerce_empty_cart_button() {
echo '<a href="' . esc_url( add_query_arg( 'empty_cart', 'yes' ) ) . '" class="button cart"
title="' . esc_attr( '空购物车', 'woocommerce' ) . '">' . esc_html('空购物车', 'woocommerce') 。 '</a>';
}

add_action('wp_loaded', 'woocommerce_empty_cart_action', 20);
功能 woocommerce_empty_cart_action() {
if ( isset( $_GET['empty_cart'] ) && 'yes' === esc_html( $_GET['empty_cart'] ) ) {
WC()->购物车->empty_cart();
$referer = wp_get_referer() ？ esc_url(remove_query_arg('empty_cart')): wc_get_cart_url();
wp_safe_redirect( $referer );
}
}

如果该按钮未与其他购物车表格按钮分开，您可能需要将其添加到定制器 > 附加 CSS。

 a.button.cart {
左边距：10px；
}

添加和清空购物车按钮到购物车页面

我们已经看到了一些代码片段来编辑您的购物车页面。 以这些片段为基础并对其进行调整，您可以完全个性化您的购物车页面并提高销售额。

到目前为止，我们已经看到了自定义 WooCommere 购物车页面的不同方法：使用默认选项、使用插件、页面构建器和以编程方式。

现在让我们更进一步，看看如何绕过购物车页面，让客户的购买体验更快。 让我们看看如何跳过购物车页面。

如何跳过购物车页面

一些商店更喜欢跳过购物车页面，让客户在结帐页面上查看并支付订单。 这缩短了客户结账所需的步骤，使购物体验更快。

要跳过购物车页面，请转到WP 管理仪表板并导航到WooCommerce > 设置。 在产品选项卡下，选择子菜单中的常规设置并选中“添加成功后重定向到购物车页面”选项。 之后，请记住保存更改。

在 woocommerce 中启用重定向到购物车页面

然后，转到高级选项卡并选择页面设置。 将默认购物车页面更改为结帐并保存更改。

选择结帐作为默认购物车页面

完毕！ 您现在可以转到网站的前端并自行检查。

店铺前端

有趣的是，通过 WooCommerce 默认设置跳过购物车页面并不是唯一的方法。 您可以使用专用插件或自定义代码片段来实现相同的目的。 有关这方面的更多信息，请查看我们的指南，了解如何在 WooCommerce 中跳过购物车页面。

奖励：如何更改继续结帐文本

编辑购物车页面的另一个好方法是更改​​“ Proceed to checkout”文本。 这是一个有趣的选项，因此文本对您的商店更有意义。 例如，如果您销售订阅计划中可用的数字产品，“立即订阅”是比“继续结帐”更好的选择。

在本文中，我们已经解释了如何使用 StoreCustomizer 插件编辑“ Proceed to Checkout ”按钮和文本。 在本节中，我们将看到另一种使用自定义代码段更改“Proceed to Checkout”文本的方法。

例如，让我们看一下以下代码段，将Proceed to Checkout按钮替换为“Take me to checkout”。 只需使用您想要的任何内容更改“带我去结帐”文本。

 //更改继续结帐文本

remove_action('woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout',20);
add_action('woocommerce_proceed_to_checkout','custom_button_proceed_to_checkout',20);

功能 custom_button_proceed_to_checkout() {
echo '<a href="'.esc_url(wc_get_checkout_url()).'" class="checkout-button button alt wc-forward">' 。
__("带我去结帐", "woocommerce") . '</a>'; //用你的文本替换“带我去结账”

在 WooCommerce 购物车页面上更改继续结帐文本

就这样！ 您现在可以使用上面的代码片段更改购物车页面上的“ Proceed to Checkout ”文本。 然而，还有更多。 如果您想了解更多信息，请查看我们关于如何更改“继续结帐”文本的帖子。

结论

总而言之，您的购物车页面是您在线商店中最重要的页面之一，因此您应该充分关注它。 这是您的客户在完成交易之前查看订单的页面，因此需要特别考虑。

默认情况下，购物车页面由活动主题定义并提供有限的功能。 但是，您可以使用购物车页面做更多事情，例如添加自定义消息或交叉销售以提高销售额。 您还可以自定义 WooCommerce 购物车页面，为您的客户提供更好的购买体验。

在本文中，我们详细了解了如何自定义 WooCommerce 购物车页面。 我们从块编辑器附带的默认 WooCommerce 块开始。 然后我们跟随 WooCommerce Blocks 插件，引入了两个额外的实验块。 然后，我们看到了一些自定义购物车页面的最佳插件，并看到了使用 StoreCustomizer 插件的演示。 我们还查看了一些您可以用来个性化购物车页面的页面构建器。 最后，我们查看了一些代码片段，它们为您提供了对自定义偏好的更多控制和灵活性，并让您充分利用购物车页面。

除了自定义购物车页面外，我们还看到了如何跳过购物车页面以及如何使用插件和以编程方式更改“继续结帐”消息。

你有没有想过自定义你的 WooCommerce 购物车页面？ 您想进行哪些定制？ 请在下面的评论中告诉我们。