完整指南：如何将一个或多个 WooCommerce 产品添加到页面

WooCommerce 在商店页面和产品类别页面上列出产品。 但是，标准的 WooCommerce 安装并不能轻松地将一种或多种产品添加到您网站上的其他 WordPress 页面。 幸运的是，您可以使用单个产品短代码将 WooCommerce 产品添加到页面或帖子中。

在本文中，我们将向您展示两种将 WooCommerce 产品添加到页面或帖子的简单方法。 产品看起来很棒，人们无需离开页面即可快速将它们添加到购物车中。 您不必担心样式或乱码。

将 WooCommerce 产品添加到页面或帖子的 2 种方法

有两种方法可以将 WooCommerce 产品添加到页面或在 WordPress 网站上发布。 直接跳到您喜欢的任何方法的说明：

1. 仅添加一种产品
2. 列出多个产品

为什么要将产品添加到您的 WordPress 网站的普通页面？

您可能希望将一个或多个 WooCommerce 产品添加到页面或在您的网站上发布的原因有多种。 由于电子商务趋势的变化，这一点变得越来越重要。

电子商务行业正在发生变化，在线商店正在摆脱“传统”导航结构，即重点关注商店和产品类别页面。

相反，当产品以更加以内容为中心的方式展示时，它们就会被证明卖得很好。 这种方法的一个例子是推荐特定产品并将其合并到更广泛的内容中，例如销售页面或博客文章。 之所以如此有效，是因为它将产品置于上下文中。 用户因此更有可能购买它！

让我们看一些例子：

仅销售一种产品的网站

只销售一种产品的企业需要在销售页面、博客文章和指南中展示他们的产品。 这类网站仍然需要 WooCommerce 来支持后端电子商务功能。 然而，传统的商店和产品类别页面对于这个用例没有多大意义。

一个更好的方法是使用页面构建器（比如 古腾堡 或插件）创建关于您的产品的引人注目的内容，并提供直接从该页面将产品添加到购物车的快速简便的方法。 这也非常适合展示销售产品。

将产品作为更广泛的文章或博客文章的一部分进行宣传的网站

有大量网站将产品作为文章或博客文章的一部分进行宣传。

美食博客

例如，如果您经营一个美食博客，您可能有一个食谱页面，其中包含一个表格，该表格将食谱中的所有成分列为产品。 这样，读者无需离开页面即可快速购买。 这些可能是直接在您的网站上销售的产品或附属产品，其中 买 按钮链接到第三方网站（如 Amazon 或 Tesco）。

时尚博客

如果你经营一个时尚博客，你可能会发布一篇关于最新趋势、特色产品或畅销产品的文章。 您的文章可能会列出示例来说明每一点 买 链接到推荐服装的按钮。 这也适用于 看看 键入博客文章，在其中剖析趋势外观并列出特色产品，以使客户更容易购买。

科技网站

如果你经营一个科技网站，你可以包括一篇文章评论最新的小工具 买 每个直接嵌入页面的小工具的按钮。 这比必须点击进入商店页面甚至每个商品的单独产品页面更加用户友好。 客户可以简单地选择他们想要购买的产品，然后一次性将它们添加到他们的购物车中，然后进入结帐页面。 您还可以显示最近的产品和相关产品。

方法#1：如何将一个产品添加到页面

WooCommerce 快速查看插件是一次将一个产品添加到页面或在 WordPress 网站上发布的最简单方法。

您可以使用插件的 WooCommerce 单产品短代码插入 快速浏览 按钮在您网站的任何位置。

指示

1. 获取 WooCommerce Quick Vew Pro 插件并将其安装在您的 WordPress 网站上。
2. 转到要添加快速查看按钮的页面或帖子并插入 [quick_view id="123" text="Buy T-Shirt"] WooCommerce 简码。
   1. 代替 123 使用您要显示的 WooCommerce 产品的 ID。
   2. 代替 购买 T 恤 带有适当的号召性用语。
3. 前往 WooCommerce → 设置 → 产品 → 快速浏览 并向下滚动到 产品详情 部分以选择将出现在灯箱中的不同产品详细信息：
   1. 评论
   2. 价钱
   3. 简短的介绍
   4. 添加到购物车按钮
   5. 元信息（例如 SKU）
4. 点击 保存更改 按钮继续。

每当潜在客户点击 快速浏览 按钮，它会打开一个包含产品信息的灯箱。 这样，客户可以了解有关该产品的更多信息并将其添加到他们的 WooCommerce 购物车，而无需离开他们当前所在的页面。

以下是有关如何优化页面以实现转化的一些可行提示：

1. 在大图像和产品概览之后立​​即添加快速查看按钮。 这提高了按钮的可见性，客户将更有可能点击它！
2. 改写按钮文本以使其与您的用例相关。 您可以将其设置为 立即购买 如果它是一个简单的产品或 选择选项 如果您要销售可变产品。

查看我们关于 WooCommerce 快速查看的完整指南以获取灵感和想法！

方法#2：如何使用 WooCommerce 单产品短代码在页面上列出多个产品

在页面或帖子上列出多个 WooCommerce 产品的最佳方式是在产品表布局中。 这使访问者可以轻松一目了然地查看所有产品并查看产品详细信息，而无需单击进入单个产品页面。 最好的部分是他们可以直接从他们所在的页面选择选项并购买产品。

我们建议使用 WooCommerce 产品表插件在您的页面或帖子上列出特定产品。 这个多功能插件可让您按产品类别、标签或产品 ID 指定要列出的产品。 您所要做的就是在您的页面或帖子中插入一个 WooCommerce 单一产品短代码。

指示

1. 获取 WooCommerce 产品表插件并将其安装在您的 WordPress 网站上。
2. 导航 WooCommerce → 设置 → 产品 → 产品表 并配置以下设置：
   1. 进入 image,name,description,price,buy 在里面 列 选项。
   2. 您可以根据需要显示其他列，例如 SKU。
   3. 该插件可让您选择要在页面上显示的产品数量。
3. 转到您要添加产品表的页面或帖子并插入 [product_table] WooCommerce 简码。 了解如何在产品表中列出特定的 WooCommerce 产品。

此方法可让您在商店和类别页面之外列出特定的 WooCommerce 产品。

您可以选择要显示的产品信息，包括数量选择器、变体下拉菜单，以及直接在表格中添加到购物车按钮（甚至是多选复选框）。 它还允许您显示特定类型的产品，例如畅销产品。

通过这种方式，人们无需离开当前页面即可快速找到他们想要购买的所有产品并将产品添加到他们的购物车中。

奖励：结合两种方法

如果您想在页面或帖子上列出多个产品怎么办 和 想要在灯箱中显示它们？

幸运的是，WooCommerce Quick View Pro 插件和 WooCommerce 产品表可以无缝工作，这意味着您可以结合方法 #1 和方法 #2 来为您的产品表添加快速查看按钮！

指示

1. 获取 WooCommerce Quick View Pro 插件和 WooCommerce 产品表插件并将它们安装在您的 WordPress 网站上。
2. 导航 WooCommerce → 设置 → 产品 → 产品表 并配置以下设置：
   1. 进入 image,name,description,price,quick-view,buy 在里面 列 选项。
   2. 您可以根据需要显示其他列，例如 SKU。
3. 转到您要添加产品表的页面或帖子并插入 [product_table] WooCommerce 简码。 您可以在产品表中列出特定的 WooCommerce 产品。

开始使用 WooCommerce 单一产品短代码插件

您可以使用 WooCommerce Quick View Pro 或 WooCommerce 产品表将一种或多种产品添加到 WordPress 网站上的页面和帖子中，而不是与 WooCommerce 插件苦苦挣扎。 设置起来非常容易，您不必担心弄乱 CSS 样式。

最好的部分是它可以帮助您提供更好的用户体验。 客户可以阅读您的内容，做出明智的购买决定，并直接从他们所在的页面购买产品。

如果您想将一种产品添加到您的页面或 WooCommerce 产品表以使用 WooCommerce 单一产品短代码将多个产品添加到您的页面和帖子，请获取 WooCommerce 快速查看专业版！