如何轻松自定义 WooCommerce 商店页面？

WooCommerce 的默认商店页面是动态预设的，大多数情况下您无法控制其设计。 那么如何自定义 WooCommerce 商店页面呢？ 如何使它符合您的需求，因为它是您网站上的基本页面之一？ 能够有效地管理商店页面绝对是一个优势。

商店页面经常用作占位符来显示您当前所有可供出售的商品。 商店页面的显示方式可能与您网站上其他页面的显示方式不同，因为您可以为特定的帖子类型存档设置不同的设置。

您使用的主题将成为默认 WooCommerce 商店页面外观和布局的基础。 商店页面上的产品通常以网格布局显示。

网格布局通常包含产品的图像，以及来自客户评论的价格、产品名称和星级。 该页面上列出了每个产品的简要产品说明。 产品变体或产品数量通常不包括在网格数据中。

许多默认的 WooCommerce 商店页面都是全宽的。 有些有一个侧边栏，允许您添加过滤器小部件（检查最佳 WooCommerce 产品过滤器插件）和其他自定义选项。

无需任何定制，商店页面就可以看起来很棒。 定制对于某些产品可能是理想的，但对于其他项目也无效。 如果您正在寻找一种更好的方式来展示您所销售的产品，那么现在是考虑自定义 WooCommerce 商店页面的好时机。

如何自定义 WooCommerce 商店页面？

有很多方法可以自定义默认的 WooCommerce 商店页面。 您可以进行的更改数量或类型没有限制。 例如，您可以添加自定义字段、显示独家优惠、编辑默认布局、包括产品过滤器、添加或删除侧边栏、创建自定义 WooCommerce 侧边栏或进行任何其他编辑。

您的商店页面布局和设计应该适合您销售的产品。 商店页面可用于：

• 鼓励新客户和现有客户滚动浏览您的产品选择。
• 让访问者在网站上快速找到他们想购买的商品。
• 使整个采购过程用户友好和直观。

您可以使用带有过滤器选项的表格布局在商店页面上显示和展示产品。 这种页面可以使批发商和其他批量销售商品的商店、提供高度可定制的商品（例如礼品篮、一盒巧克力或比萨饼）的商家、商品具有多种规格（例如笔记本电脑、硬件、厨房台面等）以及提供具有各种附加或变体选项（鞋子、衣服和其他类型的个性化礼物）的产品的公司。

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

页面构建器可以更改商店页面的布局、设计、显示的商品数量、产品类型等。使用页面构建器的最佳部分是您无需更改任何主题文件或编写代码。

您可以使用 Beaver Builder（请参阅 Beaver Builder 免费与付费比较）、Divi、Elementor、Visual Composer（Visual Composer 免费与高级之间的区别）或使用任何其他流行的页面构建器来编辑 WooCommerce 商店页面，而无需触摸任何一个代码行。

如果您使用的是 Elementor，则可以按照本指南使用 Elementor 自定义 WooCommerce 商店页面。 如果您使用的是 Divi，请按照本指南编辑 WooCommerce 默认商店页面。 如果使用 Beaver Builder，请遵循本指南。

此外，像 Astra、GeneratePress、OceanWP 等一些主题已经提供了用于自定义 WooCommerce 页面的集成选项。

方法 2 使用插件自定义默认的 WooCommerce 商店页面

以下是一些其他插件，它们不是可用于自定义和编辑 WooCommerce 页面的页面构建器：

1. StoreCustomizer（原 WooCustomizer）

StoreCustomizer 插件有免费和付费版本。 该插件使用 WordPress 定制器的设置对您的 WooCommerce 商店进行实时更改。 您可以在进行编辑时查看编辑。

如果需要，您可以隐藏价格（如何在 WooCommerce 中隐藏价格）或从您的在线商店中删除“购买”和“添加到购物车”功能。 这样做可以让您创建自己独特的 WooCommerce 目录。

可以为特定产品或所有 WooCommere 产品设置目录模式设置。 这些设置也可以仅适用于尚未登录的用户。这将要求用户创建一个帐户并登录，以便他们可以从您的站点购买商品。

可以激活 WooCommerce 的产品快速查看以帮助用户更快地浏览您的在线产品目录。 用户可以预览他们感兴趣的项目，然后将它们添加到他们的在线购物车中。

他们还可以使用 WooCommerce 商店页面查看他们正在搜索的项目的简短图片库弹出窗口。 一旦您的客户知道他们要购买什么，他们就可以轻松点击“添加到购物车”。

弹出窗口可以设置为出现在您的类别和产品页面上。 还有其他设置可用于根据 WooCommerce 商店的设计和布局自定义图片库弹出窗口和产品快速查看。

WooCommerce Ajax 搜索可用于帮助您的客户在更短的时间内找到他们想要的商品。 您可以使用简单的短代码在站点的任何位置显示 Ajax 产品搜索功能。

调整该功能的设置，以便每当您的网站访问者使用 Ajax 搜索栏时，都会显示各种预测的 WooCommerce 项目。 该插件还有更多功能，它是自定义 WooCommerce 商店页面的最佳方式之一。

2. 店面街区

Storefront Blocks 可用于覆盖现有的默认 WooCommerce 商店页面布局和设计、类别页面和主页。 无需输入任何代码即可集成这些块。

有八种不同的优质 WooCommerce Storefront Blocks 。 产品类别块、产品轮播块、产品滑块块、产品表块、砌体产品块和方形网格块只是一些可用选项。

通常，WooCommerce 会为您动态创建类别页面。 这些页面不是很明显。 它们通常与您商店中的所有其他页面具有相同的布局和设计。 你也不能改变他们的外表。

使用 Storefront Blocks，您可以创建自定义类别页面。 如果您可以更改每个类别页面的外观，则销售量增加的可能性更大。

Storefront Blocks 可以帮助改进您的搜索引擎优化，因为您可以添加与您要销售的特定项目相关的更具吸引力的内容。

您甚至可以使用 Storefront Blocks 重新设计您的主页。 主题通常会自动生成在您网站主页上找到的项目。 Storefront Blocks 允许您控制内容。 您可以重新排列现有部分或添加全新的部分、类别和产品。

块可以重复使用、转换和扩展到全宽。 它们允许您调整产品网格列和行、标签对齐和定位、网格间隙、颜色、字体等等。

3. WooCommerce 块

WooCommerce Blocks 可用于显示您想要在商店中展示的产品。 产品可以按类别和标签显示。 您还可以展示特色商品、精选商品、畅销商品或当前正在销售的商品。

WooCommerce Blocks 的最新版本还包括分页。 对于拥有大量产品供客户选择的店主来说，这是一个方便的功能。

方法 3 手动自定义 WooCommerce 商店页面

另一种选择是跳过页面构建器和插件并手动自定义您的站点。 如果没有必要，这是不想添加第三方插件的人的首选方法。

如果你要走这条路，你不必是编码专家，但你应该有一些基本的编码知识。 这种方法并不适合所有人。

第 1 步：创建子主题

如果您还没有创建子主题（如何创建子主题），现在是创建子主题的最佳时机。 这样，如果您编辑和更新主主题，您就不必担心在保存这些编辑后有新主题更新时丢失所有这些更改。

有很多方法可以创建子主题。 您可以手动或借助诸如子主题向导和子主题配置器之类的插件来完成。 但是您在购买主题时可能已经有可用的子主题，或者您可以从主题开发人员那里请求一个。

第 2 步：在您的子主题中创建文件夹结构

cPanel（请参阅 cPanel 与 vDeck 比较）或 FTP 客户端可用于更改网站文件。 创建子主题后，请使用 cPanel 文件管理器或 FTP（如 FileZilla）转到 /wp-content/themes/your-theme-name。 例如，如果您的子主题是二十二十个主题，您可以将您的子主题命名为二十二十个子主题或类似名称。

现在在 /wp-content/themes/your-theme-name 创建名为 WooCommerce 的文件夹。 之后，在该文件夹中创建一个名为archive-product.php的文件，即商店页面模板文件。

您现在有一个 WooCommerce 商店页面。 下一步是向这个空页面添加内容。

第 3 步：为您的商店页面创建内容

您的网站访问者可以在商店页面中看到您在 archive-product.php 文本编辑器中输入的任何内容。 如果您愿意，您可以选择向页面添加编码。 如果您不知道或不确定如何对该页面进行编码，则可以继续执行第 4 步。

第 4 步：创建商店页面模板

您可以使用现有模板并对其进行自定义，而不是从头开始创建 WooCommerce 商店页面。 首先查看父主题。 您需要找到 index.php 文件或 single.php 文件。

如果您看到两者之一，只需将其复制并粘贴到您在步骤 2 中创建的 WooCommerce 文件夹中。如果 single 和 index.php 文件都可用，只需复制并粘贴single.php 文件。

删除现有的 archive-product.php 文件。 您会想要这样做，因为您刚刚复制和粘贴的文件现在将被命名为 archive-product.php 文件。

将刚刚粘贴到此处的文件的名称（index.php 或 single.php）更改为archive-product.php 。

该文件将用作您的商店页面，即使它可能看起来像您网站的产品页面之一。 您可以使用短代码自定义页面，使其看起来更像商店页面。

第 5 步：使用短代码自定义商店页面

首先将您的产品分成行或列。 例如，如果您想将产品分成两列，每列不超过 6 个产品，您需要输入以下短代码：

[产品限制=”6″列=”2″]

如果您不知道如何输入此短代码，则可以执行以下步骤：

• 单击archive-product.php 文件将其打开。
• 删除 <main id="main" class="site-main" role="main"> 和</main><!– #main –>之间的所有文本。 请注意，您不应删除这两行代码，而应删除它们之间的内容。
• 在上一步删除代码的地方添加这行代码： <?php echo do_shortcode ('[ products limit="6" columns="2" ]') ?>
• 完成后保存更改。

现在您的 WooCommerce 商店页面已准备就绪！ 如果您愿意，您可以添加额外的代码或短代码。 随意尝试不同的短代码，直到您对商店页面的外观感到满意为止。

创建自定义 WooCommerce 商店页面

您的 WooCommerce 商店的商店页面是人们用来了解有关您的产品的更多信息的主要页面之一。 这就是为什么有一个吸引客户并吸引他们购买的页面很重要。

设计需要具有视觉吸引力和用户友好性。 商店页面传统上是预先设计的。 如果您想更改页面的外观，WooCommerce 没有可用的内置资源。

默认商店页面为网站所有者提供了许多方便的功能。 问题是它不是每个在线商店的最佳解决方案。 增强商店商店页面的布局和设计有助于增加销售额、提高转化率、使网站更易于使用。 它也应该在视觉上足够吸引人，以吸引更多流量到您的网站。