如何更改购物车消息中的无产品

已发表: 2021-12-25

定制您的在线商店可以让您从竞争对手中脱颖而出，这已不是什么秘密。 您可以编辑一些明显的内容，例如产品页面、商店页面、购物车页面或结帐页面。 但是，其他一些事情经常被忽视，并且会对您的网站产生巨大影响。 在本指南中，我们将向您展示更改“购物车中没有产品”消息的不同方法。

我们之前已经了解了如何自定义在线商店的一些不那么明显的元素。 例如，我们已经了解了如何在结账时更改错误消息或在商店页面上显示类别。 “购物车中没有产品”消息也是如此。 大多数商店都保留默认选项，因此通过优化它们，您将脱颖而出并获得超越竞争对手的优势。

在我们了解如何更改该消息之前，让我们先看看该消息是什么以及为什么要更改它。

“购物车中没有产品”消息是什么？

当您第一次打开电子商务商店时，您的购物车将是空的，因为您尚未将任何商品添加到购物车中。 同样，如果您将一些商品添加到购物车，但随后将其删除或购买，它也将是空的。

在这些情况下，默认情况下，当您打开购物车页面时，您会看到以下消息：“您的购物车目前是空的”。 这通常称为“购物车中没有产品”消息。

除了在购物车页面上看到该警报外，如果您已将购物车小部件作为迷你购物车添加到商店的任何小部件区域，您还可能在迷你购物车中找到它。

迷你购物车预览 购物车中没有产品

为什么要更改“购物车中没有产品”消息？

您可能希望更改此消息的原因可能有多种。 首先，您可以自定义文本以使其更受客户欢迎。 一条显示“您的购物车是空的！ 请考虑查看我们的特色产品！ ” 例如，具有比默认色调更温暖的色调。 这样，您就可以邀请访问者访问您商店的其他页面。 只有少数在线商店这样做，因此您也会从竞争对手中脱颖而出。

此外，您可以将整个商店翻译成特定语言，但您的翻译插件可能无法正确翻译该消息。 在这种情况下，手动自定义“购物车中没有产品”消息可为您提供更好的控制。

尽管 WooCommerce 有许多自定义选项，但默认情况下不允许您自定义此消息。 但是，在本指南中，我们将向您展示如何自定义“购物车中没有产品”消息。

如何更改“购物车中没有产品”消息

有 3 种主要方法可以编辑此消息：

  1. 以编程方式
    1. 编辑 function.php 文件
    2. 编辑 mini-cart.php 文件
  2. 带插件

在以下部分中，我们将了解您应该遵循的所有步骤来更改“购物车中没有产品”消息。 这些方法涉及配置您的 WordPress/WooCommerce 文件，因此我们建议在开始之前创建完整备份。

1.1）自定义“购物车中没有产品”消息编辑functions.php文件

对于第一种方法，我们将在您的functions.php文件中使用WooCommerce 挂钩。 此过程只需要您打开主题文件编辑器并将几行代码添加到您的function.php文件。

在继续之前，如果您还没有，我们建议您创建一个 WordPress 子主题。 子主题是将自定义挂钩和脚本添加到主题文件的好方法，同时确保您可以随时撤消更改。 即使您更新主题或原始主题文件，这些更改仍然存在。 如果您不想手动创建，也可以使用这些子主题插件中的任何一个。

让我们首先打开您的WordPress 管理仪表板并转到外观 > 主题编辑器。 然后，单击右侧主题文件侧边栏上的functions.php文件，如下所示。

不更改购物车中的产品 - 功能文件

使用中间的编辑器，您可以将以下脚本添加到您的functions.php文件中：

 remove_action('woocommerce_cart_is_empty', 'wc_empty_cart_message', 10);
add_action（'woocommerce_cart_is_empty'，'custom_empty_cart_message'，10）；

功能 custom_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '在此处插入空购物车消息', 'woocommerce' ) ) );
回声 $html 。 '</p></div>';
}

[取自这里的代码片段。]

此代码段将删除您的默认 WooCommerce Empty Cart 文本，并使用另一个函数来添加自定义文本。 只需将“在此处插入空购物车消息”替换为您想要的“购物车中没有产品”消息的文本。

例如，如果您希望消息显示“您的购物车目前是空的，我们建议您查看我们的特色产品！”，您可以使用以下代码：

 remove_action('woocommerce_cart_is_empty', 'wc_empty_cart_message', 10);
add_action（'woocommerce_cart_is_empty'，'quadlayers_empty_cart_message'，10）；

函数 quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( '您的购物车目前是空的，我们建议您查看我们的特色产品！', 'woocommerce' ) ) );
回声 $html 。 '</p></div>';
}

记得更新文件，你应该在前端看到这个结果：

不更改购物车中的产品 - 清空购物车文本功能演示

我们看到“购物车中没有产品”消息也可以出现在迷你购物车中。 让我们看看如何改变它。

1.2) 修改“No Products in the Cart”文本编辑 mini-cart.php 文件

您还可以选择自定义显示在迷你购物车中的“购物车中没有产品”消息。 无需为此使用函数，您只需替换WooCommerce 模板文件中的空迷你购物车文本即可。

为此，您需要通过WP 管理仪表板上的插件 > 插件编辑器来配置您的 WooCommerce 模板文件。

然后，使用Select plugin to edit选项选择WooCommerce并按Select 。 之后，单击插件文件下的模板 > 购物车 > mini-cart.php 。

不更改购物车中的产品 - woocommerce 迷你购物车插件

默认情况下，您应该在购物车底部看到以下代码行：

 <?php 其他：?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( '购物车中没有产品。', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action('woocommerce_after_mini_cart'); ?>

您可以通过将“购物车中没有产品”文本替换为自定义文本来简单地编辑此代码。 例如，要将文本更改为“请考虑添加新产品”，您应该使用以下代码：

 <?php 其他：?>

<p class="woocommerce-mini-cart__empty-message"><?php esc_html_e( '请考虑添加新产品', 'woocommerce' ); ?></p>

<?php endif; ?>

<?php do_action('woocommerce_after_mini_cart'); ?>

更改购物车中的任何产品 - 自定义迷你购物车文本

请记住保存更改，然后您应该会在前端看到更改。

更改购物车中的任何产品 - woocommerce 迷你购物车文本

2.如何使用插件更改“购物车中没有产品”消息

我们之前提到过，有时您将商店翻译成特定语言，但“购物车中没有产品”消息没有被翻译。 让我们看看如何使用翻译插件更改该文本。

有许多插件可以为自定义字符串启用翻译。 对于这个演示，我们将使用Loco Translate插件。 它是 WordPress 最好的翻译插件之一，它在仪表板中有一个内置的翻译编辑器。 在您的商店中自定义“购物车中没有产品”消息时，这会非常方便。

1.安装并激活插件

首先，安装插件，通过插件 > 添加新的。 输入插件的关键字，安装并激活它。

或者，您可以手动安装它。 如果您不熟悉该过程，请查看我们的指南，了解如何手动安装 WordPress 插件。

激活插件后，继续下一步。

2. 翻译“您的购物车目前是空的”消息

现在是时候翻译一些字符串了。 首先，前往WP Admin Dashboard上的Loco Translate > Plugins 。 单击插件列表上的WooCommerce以显示所有要翻译的可用字符串并选择您将翻译成的语言。

您还可以从此处为您的购物车消息添加所需的语言。 只需单击新语言并添加所需的语言。

更改购物车中的任何产品 - 选择 woocommerce 语言 loco 翻译

然后，使用过滤翻译选项搜索您要翻译的正确字符串。 要更改“购物车中没有产品”文本，只需输入“您的购物车当前为空” 。 然后，单击搜索结果上的源文本并将您的自定义字符串添加到翻译部分。

例如，让我们为我们的测试网站设置一个西班牙语的自定义翻译：

完成翻译后，按保存。 现在转到前端，切换您的站点语言，您将看到新的翻译消息。

更改购物车中的任何产品 - 自定义西班牙语翻译文本演示

3.翻译“购物车中没有产品”消息

使用相同的方法，您可以通过简单地搜索要更改的文本来翻译任何字符串。 在本节中，我们将重点关注“购物车中没有产品”字符串，但您可以为迷你购物车文本或您想要的任何消息设置自定义翻译。

正如我们之前看到的，转到Loco Translate > Plugins > WooCommerce并选择要将字符串翻译成的语言。 然后，搜索“购物车中没有产品”，选择字符串，然后添加所需的翻译。

请记住保存更改，您应该会在前端看到结果：

如果您想了解有关更改网站语言的更多信息，请查看我们关于如何更改 WordPress 语言的完整指南。

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

除了自定义“购物车中没有产品”消息之外，您还可以更改许多其他文本，以充分利用客户在商店中的每个接触点。 例如，您可以编辑其他文本，例如继续结帐、添加到购物车消息等。 在本节中，我们将重点介绍如何使用简单的 WooCommerce 函数更改 Proceed to Checkout 文本。

注意：由于我们将编辑一些核心文件，我们建议您创建站点的完整备份并使用子主题。

要自定义 Proceed to Checkout 文本，我们将在functions.php文件中添加几行代码。 为此，请转到外观 > 主题编辑器，然后单击主题文件侧栏上的functions.php 。

不更改购物车中的产品 - 功能文件

现在粘贴以下代码，同时使用您的自定义消息简单地更改“ Insert-checkout-text-here ”部分。

 函数 quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="checkout-button button alt wc-forward">
<?php esc_html_e( '插入-结帐-文本-这里', 'woocommerce' ); ?>
</a>
<?php
}

例如，如果您希望消息显示“请移至此处结帐”，请使用以下代码段：

 函数 quadlayers_woocommerce_button_proceed_to_checkout() { ?>
<a href="<?php echo esc_url( wc_get_checkout_url() ); ?>" class="checkout-button button alt wc-forward">
<?php esc_html_e( '请移至此处结帐', 'woocommerce' ); ?>
</a>
<?php
}

更改购物车中的任何产品 - 更改结帐文本功能

这应该在前端给你这个结果：

这是一个示例，但您可以做更多的事情来自定义此文本。 有关更多信息，请查看我们关于如何更改 Proceed to Checkout 文本的教程。 本指南解释了为什么您应该考虑更改该文本以及这样做的不同方法。

您可以在商店中执行更多自定义设置。 如果您对此感兴趣，请查看我们的一些指南，以优化 WooCommerce 结账、创建单页结账，甚至自定义 WooCommerce 结账页面。 同样，您可以使用 WooCommerce Direct Checkout 和 WooCommerce Checkout Manager 等插件来帮助您改进结帐流程。

结论

总而言之，自定义“购物车中没有产品”消息可以让您个性化客户的旅程并提供更好的购物体验。 大多数店主经常忽略这一点，因此它可以帮助您从竞争对手中脱颖而出并提高销售额。

在本指南中，我们向您展示了在 WooCommerce 中更改“购物车中没有产品”消息的不同方法：

  • 自定义 function.php 文件
  • 编辑 mini-cart.php 文件
  • 带插件

现在您应该能够编辑消息并调整丢失的翻译。

您是否编辑过“购物车中没有产品”文本？ 您按照本指南有任何问题吗？ 请在下面的评论中告诉我们。

最后，如果您想了解有关如何自定义 WooCommerce 商店的更多元素的更多信息，请查看以下一些文章：

  • 如何删除 WooCommerce 中的附加信息选项卡
  • 3 种自定义 WooCommerce 购物车页面的方法
  • 在 WooCommerce 中更改货币：完整指南
  • 如何自定义 WooCommerce 商店页面