如何使用 Happy Addons 自定义您的 WooCommerce 商店

随着技术的快速发展，电子商务业务日新月异。 一般来说，无论您是否已经拥有实体店，建立网店都相对容易、成本低廉且风险低。

但是为什么要将商店页面的设计放在首位呢？

您的产品是独一无二的——展示它们的产品页面也应该是独一无二的。

WooCommerce

良好的设计使用户的购买过程变得容易。 这就是为什么您需要以适当的方式自定义您的电子商务网站。

幸运的是，您无需成为专家或开发人员即可执行此操作。 相反，您可以使用一些方便的页面构建工具来自定义您的商店。 毫无疑问，它将帮助您保持令人印象深刻和具有竞争力的地位，从而产生更多的销售和收入！

因此，在今天的帖子中，我们将展示如何使用 Happy Addons 轻松自定义您的 WooCommerce 商店并添加一些出色的功能。 让我们从一个基本问题开始——

什么是好的产品页面？

产品页面是您以有组织的方式向客户展示在线产品的地方。 这样他们就可以轻松地搜索、选择和购买产品。

如今，比起实体购物，人们更喜欢网上购物。 由于全球大流行，总的购物场景已经从实体店转移到网上商店——占所有购买的 95% 以上。 这就是为什么留住客户变得更加重要和更具竞争力。

假设你进入一家网上商店买东西（手机）。 你的第一个要求是什么？

轻松的购物体验。 正确的？

是的，通过简单的结帐流程获得轻松的购物体验决定了商店或产品页面的组织方式。 此外，它将帮助客户找到他们真正想要的东西。 这是精心定制的商店页面发挥作用的地方。

因此，让我们看看为什么 WooCommerce 商店定制对以下方面很重要：-

• 建立一个伟大的品牌形象
• 吸引更多客户
• 增加用户体验
• 从其他竞争对手中脱颖而出

您可能还喜欢：如何为您的多供应商市场寻找和说服供应商

如何使用 Happy Addons 自定义 WooCommerce 产品/商店页面

现在是时候演示自定义 WooCommerce 商店页面的过程了。 仔细按照这些步骤将它们应用到您的 WordPress 驱动的 WooCommerce 网站。

自定义 WooCommerce 商店页面之前的先决条件

• WordPress的
• WooCommerce （免费）
• 元素（免费）
• 快乐附加组件（免费和专业版）

首先，确保您已在您的网站上成功安装并激活所有这些先决条件。

让我们向您展示如何使用 Happy Addons 自定义您的 WooCommerce 商店页面。

第一步：打开您的商店页面

从您的 WordPress 仪表板转到您的 WooCommerce 商店页面。 然后点击使用 Elementor 编辑。

之后，将打开默认的 WooCommerce 页面。 您的商店定制之旅从这里开始。

第二步：利用 HappyAddons WooCommerce 小部件

为了使定制更容易，我们将使用四个令人惊叹的 Happy Add-ons WooCommerce 小部件。

• 产品网格：- 您可以使用 HappyAddons Pro 产品网格小部件在网格视图中有利地显示您的产品。
• 产品轮播：- 一个完整的 WooCommerce 产品轮播小部件，可以吸引客户的注意力
• 产品类别网格：- 最适合按类别显示 WooCommerce 产品。
• Product Category Carousel：- 您可以借助Product Category Carousel Widget根据特定类别在轮播中宣传产品，使它们更有成果

注意：这些都是 Happy Addons 的专业功能。 所以如果你想在你的网站上使用它们，你必须免费升级到高级版本。

使用产品轮播小部件

让我们看看如何在您的 WooCommerce 网站上使用产品轮播小部件。 要使用小部件，您需要选择小部件并拖放到屏幕上。

所以添加小部件后，您将获得这样的界面。

在这里你会得到四个选项——

• 布局
• 询问
• 轮播设置
• 和包装器链接

在布局中，您可以选择两种不同的皮肤。 经典与现代。 如果需要，可以打开或关闭选项。 并根据您的设计对齐图像内容。

现在单击查询选项以自定义更多内容。 在这里您可以根据类别展示产品。

此外，您还可以在设计中添加一些动画功能。 为此，您需要单击Carousel Settings 。 比如设置动画速度、幻灯片、幻灯片箭头等。

最后，您可以在设计中添加包装器链接。

但是，您可以通过单击“样式”按钮来使设计风格化。

要了解有关产品轮播小部件的更多信息，您可以查看官方文档。

使用产品类别网格

同样，选择产品类别网格小部件并将其粘贴到屏幕上。

添加小部件后，您将看到类别的预览。 此外，您还可以使用屏幕左侧的有用选项。

接下来，自定义查询部分以将更多功能添加到设计中。 例如，您可以设置栏目、皮肤样式、图像大小、添加图像叠加等。

但是，如果您不想在此处展示所有类别，您也可以排除或包含它们。 请确保向用户显示正确的类别。

要风格化设计，请单击风格按钮。 在这里您将有四个可用选项。

• 布局：- 更改布局设计、高度、重量、行距
• 项目框：- 您可以更改图像的高度、重量、颜色等
• 内容：- 更改内容颜色、背景、高度、粗细、间距等
• 加载更多按钮：- 从这里您可以自定义加载更多类别按钮、字体颜色、排版、背景颜色等

但是，如果您想在您的 WordPress 网站上更多地使用这个小部件，您可以在此处查看我们的官方文档。

产品类别轮播小部件

选择小部件并将其拖动到所选区域。

之后，您将可以使用所有选项。 此小部件与产品轮播小部件几乎相同。 产品类别显示类别，产品轮播显示产品。

单击布局按钮后，您可以设置皮肤、图像大小、计数和定义图像叠加。 因此，如果你能正确地实现这些，它们看起来会更漂亮、更吸引人。

单击查询以在轮播中排除或包含该类别。 另外，您可以根据顺序设置轮播。

然后单击轮播设置以更改动画速度、自动播放选项、导航样式和幻灯片。 这将帮助您自定义您的 WooCommerce 商店页面，以向您的用户展示您最喜欢的产品类别。

无论如何，如果您想获得产品类别轮播的详细指南，您可以随时查看我们的官方文档。

产品网格小部件

如果您在 WooCommerce 商店页面上以完美的网格位置显示产品时遇到问题？ 是的，您可以使用 Product Grid Widget。

为此，请单击小部件并将其拖动到选定区域以开始使用小部件。 因此，当您添加小部件时，所有产品都将添加为网格视图。

您将有一个布局选项来自定义。 所有产品将自动添加到屏幕上。 您可以在此处显示定价页面、评级、徽章、购物车按钮和快速查看按钮。

您可以显示您想要的产品，也可以添加或排除您想要的产品。

在此小部件的预先设置中，您可以自定义添加到购物车按钮、快速产品查看按钮和附加链接。

最后，您可以使用“样式”按钮为您的设计赋予样式。 在这里您可以自定义徽章、内容、图像、购物车和快速查看等。

这就是 Happy Add-ons WooCommerce 小部件如何帮助自定义商店页面。 因此，请花点时间仔细按照步骤在您的 WooCommerce 商店页面上实施所有这些内容。

WooCommerce 商店的最终预览

好吧，我们上面展示的过程是针对单个供应商商店页面的。 但是如果想使用 Dokan 设计一个成熟的多供应商网站怎么办，您可以查看以下文章。

使用 Dokan 建立您自己的美容护理产品市场网站

自定义 WooCommerce 产品页面时应避免的错误

没有人，只有您可以确保您网站的性能如您所愿。 通常，我们都希望我们的网站看起来专业、美观且引人入胜。 但这可能不会那么容易发生。

这就是为什么我们都需要在对您的网站进行任何更改之前做出正确的决定。

但是，在考虑对网站进行任何更改时，我们中的许多人都会犯一些愚蠢的错误——电子商务市场错误。 因为我们都很匆忙，或者我们只是忘记了遵循正确的结构，尤其是定制电子商务商店。

为了帮助您摆脱困境，以下是我们认为您应该知道的一些重要的市场错误。 而这些无疑会毁掉你所有的努力，阻碍你的业务增长。

因此，让我们看看在自定义 WooCommerce 商店页面之前必须避免的常见错误：-

• 没有及时更新 WordPress
• 使用旧版本的 WooCommerce
• 保留过时的插件
• 不使用 SSL 证书
• “管理员”作为您的用户名
• 使用“免费”WordPress 主题
• 太多不相关的类别和标签
• 不注重用户体验
• 未针对移动响应优化商店
• 忘记谷歌分析

这些是您在开始自定义 WooCommerce 商店页面之前必须避免的错误。 因此，如果您想避免一些代价高昂的错误或希望您的电子商务业务蓬勃发展，那么这些错误肯定会对您有所帮助。

最后的话

好了，帖子到此结束。 我们尽力向您展示自定义 WooCommerce 商店页面的最简单方法。 Happy Addons 的 WooCommerce 小部件无疑易于使用。

因此，如果您对现有产品页面的外观不满意，并希望在您的产品页面上有所变化，您可以在您的网站上尝试这些功能并按照我们展示的步骤进行操作。