如何自定义 WooCommerce 商店页面（无代码）

正在寻找自定义 WooCommerce 商店页面的方法？ 在此分步指南中，您将学习三种 100% 无代码的方法来自定义商店的商店页面。

您商店的商店页面，也称为目录页面，是列出多种产品的页面。 这可能是您的所有产品（在“主”商店页面上）或具有特定产品类别或标签的产品。

用更专业的术语来说，它是 WooCommerce 商店中产品帖子类型的存档设计。

因为您的商店页面可以帮助访问者浏览和发现您的产品，所以正确处理它很重要。 这篇文章会教你怎么做！

下面，您将学习三种无需代码即可自定义 WooCommerce 商店页面的不同方法，以我们的 Botiga 主题为例：

• 原生 WordPress 主题定制器中的内置选项
• 本机 WordPress 块编辑器
• Elementor 页面构建器插件（此方法可让您使用 Elementor 的免费版本）

注意— 如果您还没有创建 WooCommerce 商店，您可以转到我们的指南，了解如何创建 WooCommerce 商店。 一旦您拥有一家可用的商店，请返回此处开始自定义商店页面！

自定义 WooCommerce 商店页面的快速介绍

如果您想完全自定义您的 WooCommerce 商店页面，您需要选择一个为您提供灵活性的 WooCommerce 主题。

虽然您在本教程中学到的一般原则适用于任何 WooCommerce 主题，但出于以下几个原因，我们将使用 Botiga 主题：

• 它包括 WordPress Customizer 中的详细选项，让您可以自定义商店页面，而无需从头开始设计所有内容。
• 如果您确实想从头开始设计所有内容，Botiga Pro 具有内置功能，可让您使用本机 WordPress 块编辑器或免费版 Elementor 自定义所有内容。

除了众多自定义选项之外，Botiga 还是最快的 WooCommerce 主题之一，因此它也将为您的商店在其他领域取得成功做好准备。

话虽如此，如果您使用不同的 WooCommerce 主题，您仍然会发现本教程很有用。

例如，大多数 WooCommerce 主题至少在定制器中为您提供了一些选项。

同样，我们展示的通用 Elementor 方法适用于任何主题。 唯一的区别是，如果您不使用 Botiga，则需要购买 Elementor Pro，而 Botiga 可让您使用免费版的 Elementor 完成所有操作。

如果你想了解更多关于 Botiga 的信息，可以前往 Botiga 主题页面。

方法 1 – 使用 WordPress Customizer 自定义商店页面

对于大多数人来说，编辑 WooCommerce 商店页面的最简单方法是使用 WordPress 定制器中的主题选项。

使用 Botiga，您可以获得一系列详细的选项来帮助您自定义商店页面的布局、样式和内容。

不同的主题可能不会提供那么多选项，但您至少应该能够在定制器中找到一些选项。

以下是如何使用 Botiga 主题的选项来自定义 WooCommerce 商店页面。

1. 选择要在您的商店页面上显示的内容

首先，您需要选择要在您的商店页面上显示的内容。 默认情况下仅显示产品，但 Botiga 还为您提供了显示类别的选项。

要访问这些设置，请在您的 WordPress 仪表板中转到外观 → 自定义，打开 WordPress 定制器。

然后，在WooCommerce下选择常规：

现在，使用Shop Page Display下拉菜单来选择是只显示产品、只显示类别，还是两者都显示。

您还可以使用“类别显示”下拉菜单为您的类别存档页面做出类似的选择。 在本例中，您选择是否显示子类别。

2. 在 WordPress 定制器中打开商店页面设置

接下来，返回定制器中的主菜单列表，并选择产品目录选项以更全面地定制您的商店页面。

您现在会在侧边栏中看到一堆选项，分为两个选项卡 —常规和样式：

• 一般– 控制商店页面上元素的布局和内容。
• 样式– 调整商店页面上元素的设计，例如更改颜色/字体或添加边框。

3.自定义总体布局

首先，展开布局设置以调整商店页面的总体布局。

首先，您需要选择布局类型，它提供三个常规选项：

• 网格
• 列表
• 石工

您还可以控制常规布局选项，例如要使用的行数和列数。

在此之下，您可以选择要在您的商店页面上使用的标题样式以及标题中要包含的内容，例如是否显示产品类别。

在“自定义程序”菜单的更下方，您可以获得控制侧边栏布局、页面元素和分页的选项：

• 侧边栏布局– 您可以添加垂直或水平侧边栏。 然后，您可以使用小部件控制侧边栏的内容。 这对于添加产品过滤器以帮助访问者浏览您的产品非常有用。
• 页面元素– 您可以在页面上显示/隐藏不同的元素。
• 分页– 您可以使用正常分页、无限滚动或 Ajax 驱动的“加载更多”按钮来加载新产品而无需重新加载页面。

4.自定义产品卡片

接下来，您可以打开“产品卡片”部分来自定义各个产品在商店页面上的显示方式。

首先，您可以选择不同的卡片布局和添加到购物车按钮的位置。

例如，在下面的屏幕截图中，您可以看到我们将添加到购物车按钮移动到了左下角的产品图片上方。

在设置的更下方，您可以做出其他一些重要的选择：

• 自定义或禁用产品快速查看行为。
• 启用/禁用特定内容元素——例如，是否在商店页面上显示评论数。
• 调整对齐方式和间距。

5.自定义销售标签和类别

接下来，您可以展开销售标签和类别部分来配置商店页面的这些区域。

销售标签设置可让您控制销售徽章的位置和文本。 还有一个显示销售百分比的选项，它将动态地为每个产品插入适当的折扣。

如果您在本指南的第 1 步中选择显示类别，则类别设置可让您控制类别卡的布局：

6. 根据需要调整样式选项

对商店页面的布局和内容感到满意后，您可以跳转到“样式”选项卡，根据需要调整所有内容的样式。

同样，您可以在此处更改颜色、调整字体、添加边框等。

你不需要在这里改变任何东西。 但如果你确实想做一些调整，这是一个值得探索的好地方。

7.探索其他定制器选项

除了定制器中的专用产品目录区域外，Botiga 还提供了一些可能会影响您的商店页面的其他选项。

例如，您可以通过打开按钮设置来调整添加到购物车和快速查看按钮（以及您网站上的所有其他按钮）的颜色。

如果您想更改某个特定细节，则值得探索这些其他选项。 但是，如果您已经喜欢您的商店页面的外观，则无需深入挖掘。

8. 发布您的店铺页面布局

一旦您对商店页面的外观感到满意，您需要做的就是单击“发布”按钮使其在您的商店中生效。

方法 2 – 使用 WordPress 块编辑器自定义商店页面

对于大多数商店，在 WooCommerce 中创建自定义商店页面时，Botiga 的内置定制器选项提供了足够的灵活性。

但是，在某些情况下，您可能希望从头开始构建真正的自定义设计。

为了帮助您在没有代码的情况下实现这一目标，您可以使用 Botiga Pro 中的模板生成器功能，使用本机 WordPress 块编辑器或 Elementor（甚至是免费版本）自定义商店页面。

在本节中，我们将向您展示它如何与块编辑器一起使用。 然后，我们将在下一节中向您展示它如何与 Elementor 一起使用。 如果您已经知道要使用 Elementor，请单击此链接跳至该部分。

1. 启用 Botiga Pro 模板生成器模块

要启用模板生成器，请转到外观 → 主题仪表板 → 主题功能。

然后，向下滚动并启用Templates Builder模块。

您将需要 Botiga Pro 来激活此模块——如果您还没有，可以单击此处购买。

2.创建新的商店页面布局

接下来，转到外观 → Botiga 模板 → 添加模板以创建新的商店页面模板。

在模板界面中，为其命名（例如“Shop Page”）并选择Shop Catalog作为模板类型。

3.使用块设计您的商店页面

现在，您可以使用编辑器使用块来设计您的商店页面布局。

您可以使用任何现有的 WordPress 块（或来自其他插件的块）。

Botiga 还为重要的动态内容添加了一堆自己的 WooCommerce 块，例如商店存档详细信息和产品详细信息。

要实际列出某些类型的产品，您可以使用产品查询块。

首先，添加产品查询块将显示您的产品网格。

然后，您可以使用块的设置来过滤不同类型的产品、自定义布局、调整产品卡片、更改样式等。

如需更详细的了解，请查看此视频：

4. 发布你的模板

一旦您对商店页面的设计感到满意，您需要做的就是单击“发布”按钮。

当您在前端打开商店的商店页面时，您应该会看到自定义商店页面模板。

方法 3 – 使用 Elementor 插件自定义商店页面

如果您更喜欢使用 Elementor 而不是块编辑器，您也可以按照类似的方法来自定义 WooCommerce 商店页面。

通常，您需要 Elementor Pro 来自定义商店的商店页面。 但是，借助 Botiga Pro，您可以使用免费版 Elementor 完全自定义您的商店页面。

您之所以能够做到这一点，是因为 Botiga Pro 添加了自己的自定义 Elementor 小部件，让您可以设置商店页面。

话虽如此，Botiga Pro 仍然与 Elementor Pro 完全兼容。 因此，如果您已经拥有 Elementor Pro 许可证，您仍然可以从它添加的所有额外设计功能中受益。

以下是使用 Elementor 和 Botiga 编辑 WooCommerce 商店页面的方法。

1. 启用 Botiga Pro 模板生成器模块

要启用模板生成器，请转到外观 → 主题仪表板 → 主题功能。

然后，向下滚动并启用Templates Builder模块。

您将需要 Botiga Pro 来激活此模块——如果您还没有，可以单击此处购买。

2. 创建新的商店页面布局并启动 Elementor

接下来，转到外观 → Botiga 模板 → 添加模板以创建新的商店页面模板。

在模板界面中：

1. 给它一个内部名称——例如“商店页面”。
2. 选择Shop Catalog作为模板类型。
3. 单击“保存草稿”按钮将其保存在数据库中（这对使用 Elementor 很有帮助）。

完成后，您可以单击“使用 Elementor 编辑”按钮以启动 Elementor 界面。

3. 使用 Botiga 小部件创建您的商店页面设计

现在，您可以使用常规的 Elementor 界面来设计您的商店页面。

为了帮助您使用免费版 Elementor 设置设计，Botiga 在Botiga WooCommerce部分添加了一堆自己的小部件。

对于商店页面，最重要的小部件是产品查询小部件，它可以让您显示部分/所有产品的列表。

还有其他有用的小部件，例如Archive Title 、 Archive Description和其他带有 Archive-labeled 的小部件。

在产品查询小部件的设置中，您可以选择要显示的产品、自定义布局、更改产品卡片等。

您还可以利用 Elementor 提供的所有常规样式和高级选项。

除了使用 Botiga WooCommerce 小部件来设计您的商店页面之外，您还可以免费使用任何其他 Elementor 小部件，包括来自第三方 Elementor 附加组件的小部件。

4. 发布您的店铺页面

一旦您对商店页面的设计感到满意，请单击 Elementor 中的“发布”按钮以使其生效。

发布后，您可以在前端打开您的商店页面，您应该会看到使用 Elementor 创建的自定义设计。

结论：今天创建自定义 WooCommerce 商店页面

这就是我们关于如何在不需要任何代码的情况下自定义 WooCommerce 商店页面的指南。

对于大多数人来说，Botiga 在定制器中的内置选项已经为创建自定义 WooCommerce 商店页面提供了足够的灵活性。

如果您想要更多控制权，Botiga Pro 中的模板生成器功能可让您使用本机 WordPress 块编辑器或 Elementor（甚至是免费版本）完全自定义商店页面的每个部分。

如果您还没有使用 Botiga，请考虑立即切换到 Botiga，以便能够访问所有这些自定义选项——还有更多！

您对如何自定义 WooCommerce 商店页面还有疑问吗？ 让我们在评论中知道。