自定义 WooCommerce 商店页面的完整指南

介绍

您是否正在寻找自定义 WooCommerce 商店页面的想法？ 通过仔细观察，您会注意到默认的 WooCommerce 预建商店页面在自定义选项中受到限制。 此外，您几乎无法控制其设计； 因此，利用商店的全部潜力可能是一场噩梦。

您的 WooCommerce 商店页面是负责展示您的产品的占位符。 因此，这对您的业务意义重大。 缺乏设计合理的商店页面最终可能会影响您的转化。

如果您正在寻找一种更好的方式来展示您的产品，那么您应该考虑自定义您的商店页面。

那么，你准备好开始学习了吗？

在这篇文章中，我们将带您完成自定义 WooCommerce 商店的整个过程，以及这样做的必要性。

但是，在开始我们的教程之前，让我们探索一下 WooCommerce 商店页面的含义。

什么是 WooCommerce 商店页面？

WooCommerce 商店页面是您的 WooCommerce 商店最重要的页面，因为这是您在线商店中所有产品的展示位置。

WooCommerce 将商店页面定义为“产品帖子类型存档的占位符”。

在 WordPress 中，WooCommerce 插件向仪表板添加了四个页面，包括购物车页面、结帐页面、我的帐户和商店页面。 正如博客页面是帖子的存档页面一样，商店页面是 WooCommerce 中产品的存档页面。

当客户访问您的网站时，他们将首先登陆您的商店页面。 出于这个原因，必须微调您的页面以获得更好的视觉外观。

自定义 WooCommerce 商店页面的好处

个性化 WooCommerce 商店页面有很多优点。 下面是其中的一些。

1.提升用户体验

在您的商店页面上显示良好的产品类别可以简化为客户在商店中查找产品的过程。 此外，确保显示产品的所有分组，包括子类别。 此外，请确保将高分辨率图像与相关信息一起添加。 客户会发现更容易浏览您的商店，从而提高用户体验。

2.提高转化率

一个漂亮的页面和精心安排的产品可能会吸引更多的客户。 此外，可以说服潜在客户从您的商店购买。 有了一个定制良好的商店，您可以轻松地更好地表达您的品牌，并提供一个直观的平台，让客户不断光顾。 您关闭订单的机会将会增加，这意味着更多的转化。

3.提高SEO排名

自定义 WooCommerce 商店页面不仅仅是安排您的产品和定位您的图像。 但是，它涉及整体页面优化。 例如，您可以添加更多关键字丰富的内容、元描述和元标题。 这将有助于改善您网站的 SEO，使您的网页在搜索引擎上排名

4. 从竞争对手中脱颖而出

为您的商店页面拥有独一无二的布局，使其具有专业的触感，使其看起来独一无二。 这使您比竞争对手更有优势，他们可能仅限于默认的 WooCommerce 商店页面布局。 此外，它使它更具吸引力，并且您的产品看起来越有吸引力，吸引更多的客户向您购买。

使用页面构建器自定义 WooCommerce 商店页面

通过在商店页面上组织您的产品，您可以简化客户的购物体验。 在本节中，我们将了解如何为 WooCommerce 应用 Elementor 页面构建器来自定义您的商店页面。

第 1 步：使用 Elementor 创建一个列表页面并填充内容

在 WooCommerce 页面定制方面，没有什么比 Elementor 更好的了。 Elementor 是 WordPress 的拖放 WooCommerce 页面构建器。 它因其易于使用和高度可定制的功能而广受欢迎。

您需要关闭 Elementor，创建一个新页面，然后向其中添加内容才能开始。 但是，在创建新页面之前，请确保您对页面的外观以及希望首先出现在商店页面上的产品有一个直观的了解。 例如，您应该选择最畅销的最新产品和特色产品首先出现。

接下来，我们将使用一个简单的短代码将内容添加到您的商店页面。 以下是一些对我们有帮助的基本简码。

我们将首先将特色和畅销产品添加到我们的商店页面。 要添加特色产品，请转到 WordPress 管理仪表板上的 WooCommerce > 产品，然后单击右侧的星形图标选择产品。

接下来，导航到 Elementor，将文本编辑器拖到特色产品下方，然后插入短代码 [featured_products]。

之后，单击“更新”，您的产品将如下图所示。

要添加您最畅销和最近发布的产品，请分别使用下面的简码。

此外，您还可以设置要在产品页面上显示的列数。 例如，要显示 2 列，每列 6 个产品，请使用以下简码：

现在，您可以重复此过程并添加任意数量的产品类别。

第 2 步：上传您刚刚创建的页面作为您的 WooCommerce 商店页面

完成创建新页面后，您需要将其设为您的 WooCommerce 商店页面。 您必须创建当前主题的子主题才能执行此操作。 为此，您可以使用 Generate Child Theme 和 Childify Me 等插件。

子主题覆盖父主题并将元素添加到父主题，帮助您生成单独的主题文件并在父主题文件中保留修改。

安装子主题后，复制商店页面的 URL，然后在 WordPress 仪表板上，导航到 WooCommerce > 外观 > 主题编辑器。

出现弹出窗口时，单击“我了解”选项。 您将被重定向到可以访问主题函数文件的页面。

单击functions.php 文件，将代码粘贴到PHP 文件结束的样式表上。

请注意，您应该照原样复制代码。 另外，请记住在 wp_redirect ('[yourURL]') 中添加您的 URL。

最后，点击“更新文件”按钮，瞧！ 您刚刚完成了对 WooCommerce 商店页面的自定义。

结束的想法

WooCommerce 商店页面是您商店中最不可或缺的部分。 毕竟，这是您的大多数客户花费时间的地方。

出于这个原因，重新设计您的商店页面以获得更直观和用户友好的布局以提供更好的客户体验至关重要。

过去，定制 WooCommerce 商店页面涉及数十行代码和复杂的流程。

但是，使用 Elementor WooCommerce 页面构建器，您可以对商店页面的布局进行完全自定义控制。 它就像创建一个列表页面、填充内容并将您的自定义页面设置为您的商店页面一样简单。

通过这样做，您可以在竞争对手中脱颖而出，提升您的 SEO 并增加您的销售额。

听起来很棒！ 正确的？ 立即自定义您的商店页面！

同时，非常感谢您花时间在我们的帖子上。 不要忘记在下面的评论部分分享您的想法。 我们的团队将很高兴收到您的来信！