如何全面自定义和优化你的 WooCommerce 商店页面

使用 WordPress 和 WooCommerce 构建你的网站，可以让你完全拥有自己的商店，并使用灵活的框架来构建如您梦想般独特的系统和设计。

今天我们将讨论建立 WooCommerce 商店页面，应该如何自定义它。

什么是 WooCommerce 商店页面？

WooCommerce 商店页面默认包含在内，是产品页面类型的存档页面。这意味着它将显示发布的所有产品，供访问者滚动浏览。它本质上是你的在线展示厅，访问者可以在此查看你的目录。可以单独显示商品，也可以按类别显示商品，也可以同时按类别和产品显示，在一个页面上显示商品和产品。

为什么要构建自定义 WooCommerce 商店页面？

默认的 WooCommerce 商店页面是许多商店的不错选择，可帮助你快速启动和运行。但自定义此页面可为买家提供精心策划的体验，从而为你带来更多销售，并为顾客提供更简化的购物体验。

1. 让购物变得快捷方便

访客越快找到他们想要的东西，并获得他们放心购物所需的信息，效果就越好。井然有序的商店可以让购物者不会感到不知所措。

也有让购物者可以直接从“商店”页面选择数量并将商品添加到购物车。他们还在“商店”页面添加了内容部分，以推广他们的个性化选项。

2. 提供针对你的产品和受众量身定制的体验

对于新的和不熟悉的商品 – 或者购物者需要详细信息（如食品成分或配件规格）的产品类别 – 可能希望在商店页面上直接显示信息。

以下是一些如何根据你销售的产品或受众修改商店页面的示例：

• 添加过滤器以筛选大型产品目录或非常精细的商品。也许你销售替换零件，购物者需要根据其尺寸、颜色、SKU 等找到它们。
• 如果销售的商品更具视觉冲击力，请重点关注图片。例如，服装店可能希望展示更大的照片，或允许人们直接在商店页面上滚动浏览图片轮播。
• 在表格中展示产品。如果销售的商品不依赖视觉效果，可能需要完全不使用图像。不要使用更传统的产品网格，而是使用表格来展示关键信息。对于服务型企业或批发商店来说，这是一种特别好的设置，因为客户会一次将大量商品添加到购物车中。
• 包括特定于产品的徽章。例如，如果你销售食品，可能会有“素食”或“无坚果”的徽章。这可以帮助购物者立即看到哪些产品符合他们的需求（哪些不符合）。

3. 重点介绍特色产品和促销活动

编辑你的 WooCommerce 商店页面可以让你吸引客户的注意力，并将他们的兴趣引导至特色产品和类别、促销优惠以及免费送货或满意保证等内容。

在这种情况下，区块主题确实大放异彩。使用“最受好评的产品”区块来展示最好的一面，使用“特价产品”区块来突出显示折扣选项，或使用“精选产品”区块来拥有一个可以根据季节、当前事件或其它情况快速更换的商品部分。

4. 体现你的品牌和个性

自定义你的商店页面可以帮助你在竞争对手中脱颖而出，在你的网站和其他公司资料中呈现统一的外观，并通过展示评论和其它信任符号来建立信心。

每件产品下方添加了星号，以显示它们的评价有多好。此外，左侧还有一个巧妙的小标注，好奇的购物者可以点击它阅读更多评论，以缓解他们可能产生的犹豫。

如何自定义你的 WooCommerce 商店页面

1. 使用 WooCommerce 定制器定制你的商店页面

定制器的 WooCommerce 部分包括商店通知、产品目录、产品图片和结帐选项卡。这是对商店页面进行基本更改的最简单方法。

转到外观→自定义→ WooCommerce。

自定义 WooCommerce 商店通知

商店通知会显示在网站最底部的覆盖栏中（某些主题可能会将其放在顶部）。该栏会在整个网站显示，并可选择将其关闭。此功能是让访问者了解当前促销活动、特色产品类别、即将举办的活动或全店政策（如订单超过一定金额可免费送货）的绝佳方式。

商店通知选项卡有一个字段供你输入文本和 HTML 标签以进行格式化和链接。单击启用商店通知复选框以激活该功能。

自定义 WooCommerce 产品目录

产品目录选项卡有下拉菜单，用于管理你的商店和产品类别页面的各个方面。

如果你的商店中有大量商品，单个商店页面可能会让访客不知如何选择。使用商店页面显示菜单选择页面上应显示的内容 – 类别、产品或两者。类别选项将显示一个缩略图网格，代表商店中可用的类别。

使用默认产品排序菜单来管理商店页面上的商品显示。默认为自定义排序 + 名称，但也可以按以下方式排序：

• 受欢迎程度（销量）
• 平均评分
• 最近的
• 价格（升序）
• 价格（降序）

要为默认选项设置自定义顺序，请转到产品 → 所有产品。然后，单击顶部的排序选项卡。接下来，选择类别、产品类型、库存状态或三者的任意组合。单击“筛选”。

自定义 WooCommerce 商店页面产品图片

“产品图片”选项卡可让您自定义商店页面上产品图片的大小和显示。有三个选项：

• 1:1（裁剪为正方形）
• 自定义纵横比
• 未剪裁（使用上传图片的宽高比显示）

发布更改时，会自动生成新图像尺寸的缩略图。

2. 使用 Gutenberg 区块编辑器自定义你的商店页面

如果使用的是块主题，则可以使用站点编辑器编辑和自定义 WooCommerce 商店页面。在编辑商店页面模板之前，请务必备份你的 WordPress 网站。

要自定义你的页面，请转到外观 → 编辑器，然后从页面顶部中心的下拉菜单中选择浏览所有模板。单击可编辑产品目录模板。

产品目录模板由页眉、页脚和正文区域组成。单击页眉或页脚区域可编辑其内容并根据需要添加新块，例如图像或段落块。

默认情况下，页面主体仅包含产品网格块，其中将显示产品图像、标题、价格等。

在产品网格块上方和下方添加块以自定义您的商店页面模板。可以使用任何块类型，包括 20 多个 WooCommerce 块，这些块位于块插入器的专用部分，以便于浏览。

使用“最畅销产品”和“评分最高产品”区块来推广你最受欢迎的商品。使用“所有评论”区块在页面上添加客户评价。

自定义产品展示选项

可以编辑“所有产品”区块以进一步自定义你的 WooCommerce 商店页面。单击该区块，然后单击“编辑”图标。要管理其设置，可以单击示例产品中的元素 – 例如产品图片和产品标题。

可以重新排列网格中显示的商品内容。例如，可以将“添加到购物车”按钮移到产品评级上方。单击以选择一个元素，然后使用向上/向下箭头移动其在布局中的位置。

3. 使用 WooCommerce 扩展自定义你的商店页面

扩展是专为 WooCommerce 商店创建的插件类型。可以使用它们来改善购物体验并增强商店页面的内容和功能。我们将介绍几个示例。

WooCommerce 的产品过滤器

使用 WooCommerce 的产品过滤器，可以允许客户根据多个标准过滤您的产品，包括类别、价格、平均评分和库存状态。过滤器使包含数千种商品的目录变得易于访问，因为购物者可以使用它们快速轻松地获得相关结果。该扩展使用 AJAX 来更新结果，而无需访问者刷新页面。

WooCommerce 快速查看

WooCommerce Quick View 让您的购物者无需离开主商店页面即可了解有关产品的更多信息、在各个版本之间进行选择并将商品添加到购物车中。该扩展程序会将“快速查看”按钮添加到您的商店页面，单击后会触发一个弹出窗口。该窗口包含必要的产品信息，以及选择变体和将商品添加到购物车的功能。这加快了购物体验，因为访问者可以比较产品并进行选择，而无需加载多个新页面。

WooCommerce 高级产品标签

WooCommerce 高级产品标签为您的商店页面增添了视觉效果，以吸引客户的注意力。您可以创建自定义标签来展示新产品、促销商品、畅销商品等。标签可以全局应用，也可以应用于特定产品，或者根据条件应用于一组项目。

WooCommerce 的产品表

WooCommerce 的产品表可让你以表格形式显示目录，以便在单个页面上轻松参考和比较。列标题可自定义，可以选择默认排序顺序。该扩展支持可变产品，并带有下拉菜单以选择变体。每行都有一个添加到购物车按钮和一个复选框，可同时将多个商品添加到购物车。购物者可以使用表格上方的字段根据类别和价格范围筛选结果。他们还可以按尺寸或颜色等变体属性进行筛选。筛选是通过 AJAX 完成的，因此非常快捷，无需刷新页面。

4. 手动定制你的商店页面（使用代码和挂钩）

钩子允许自定义模板（例如商店页面），而无需承担编辑核心文件所带来的任何风险。WooCommerce 使用模板文件 archive-product.php 作为商店页面。可以在 WooCommerce 操作和过滤器钩子参考页面上找到可用钩子的列表。

在进行任何更改之前，请务必备份你的网站。修改网站代码时，即使一个错误也可能导致严重问题。Jetpack VaultPress Backup 是一个很好的选择，因为它会在每次更改时保存你的网站。

切勿直接编辑插件文件，因为将来的更新会覆盖你的工作。需将你的自定义代码添加到子主题的 functions.php 文件中，或使用 Code Snippets 之类的插件。

可以使用挂钩和代码对商店页面进行以下一些自定义：

隐藏商店页面结果计数和默认排序下拉菜单

这些页面元素对购物者来说很方便，但对于只有少量商品的商店来说用处不大。添加此代码可将它们从你的商店页面中隐藏。

// Hide the shop page result countremove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );// Hide the shop page default sorting menu     remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

还可以使用 CSS 代码隐藏这些元素。转到外观→自定义→附加 CSS 并添加以下代码：

.woocommerce-result-count {
    display: none;
}

.woocommerce-ordering select {
    display: none;
}

更改“商店”页面上每行的产品数量

使用此代码可覆盖每行默认的产品数量。设置较高的数字可增加页面上无需滚动即可看到的产品数量。设置较低的数字，每件产品的图像将显示得更大，以便查看更详细的内容。

在此示例中，将数量设置为每行两个项目：

// Change the number of products per row on the shop page
add_filter('loop_shop_columns', 'loop_columns', 999);

if (!function_exists('loop_columns')) {
    function loop_columns() {
        return 2; // 2 products per row
    }
}

将产品标题移至商店页面上的产品图片上方

使用此代码将你的产品标题从每行产品图片下方移至上方。此布局更改为你提供了一个设计选项，可让你从其他商店中脱颖而出，并将你的标题放在页面的较高位置，这样购物者无需滚动即可看到它们。

// Move the product title above the product image
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_title', 10 );
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

让你的价格脱颖而出

通过在定制器中的附加 CSS 字段中添加以下代码，让你的价格在购物者眼中脱颖而出。如果价格点对你的客户很重要，则此样式更改很有用。在此示例中，价格以粗体显示并设置为蓝色。

.wc-block-grid__product {
    font-weight: bold;
    color: blue;
}

给产品图像边框添加一些颜色

此代码会为你的产品图片添加彩色边框。此处边框宽度设置为 2px，颜色为橙色。

.wc-block-grid__products .wc-block-grid__product-image img {
    border: 2px solid #f27c21;
}

结论

通过自定义 WooCommerce 商店页面，可以为客户提供更好的购物体验，增加销售机会，并突出你的品牌个性。无论是使用 WooCommerce 定制器、Gutenberg 区块编辑器、扩展还是手动代码，都有多种方法可以根据你的特定需求和技能水平进行调整和优化。牢记这些技巧和方法，能够创建一个既美观又功能强大的在线商店页面，为你的业务成功铺平道路。