WooCommerce 是 WordPress 最受欢迎的电商插件之一，而 Elementor 是一个强大的页面构建器。将这两者结合起来，可以轻松构建一个视觉效果出色、功能强大的电商商店页面。本文将详细介绍如何使用 Premium Addons 中的 Elementor WooCommerce 产品列表小部件，来构建和优化你的 WooCommerce 商店页面。

一、前期准备工作

在开始之前，确保已经完成以下准备工作：

1. 安装并激活 WooCommerce 插件： WooCommerce 是 WordPress 上最常用的电商插件。确保它已安装并激活，这样才能添加产品并配置你的商店。
2. 安装并激活 Elementor 页面构建器插件： Elementor 可以通过拖放操作轻松构建页面布局，是目前最流行的页面构建器之一。
3. 安装并激活 Premium Addons 插件： Premium Addons 为 Elementor 提供了大量扩展功能，包括 WooCommerce 产品列表小部件，这对于创建专业的商店页面至关重要。
4. 启用 Premium Addons Pro（可选）： 如果想要使用高级皮肤和功能，请安装并激活 Premium Addons Pro 插件。这将解锁更多自定义选项，使你的商店页面更加独特和专业。

二、使用 Elementor 创建 WooCommerce 产品列表

Elementor 的 WooCommerce 产品列表小部件为用户提供了多种显示产品的方式，可以根据需要选择网格、轮播或Media Grid布局。

1. 网格布局

网格布局是展示产品的经典方式，尤其适用于商店页面和类别页面。要在 Elementor 中使用网格布局，可以按以下步骤操作：

• 选择网格布局：在小部件设置中，选择“网格”布局。可以设置每行显示的产品数量和每页的总产品数。

• 设置图像尺寸：调整产品图像的尺寸，以确保它们在网格中显示得清晰、美观。

• 添加加载更多按钮：如果产品较多，可以启用“加载更多”按钮，这样用户可以逐页浏览产品而不必重新加载页面。

2. 轮播布局

轮播布局适合在首页或特定产品页面展示精选产品。此布局可以节省页面空间，同时吸引用户的注意力。设置方法如下：

• 启用轮播选项：在小部件设置中选择“轮播”布局。可以设置轮播中的产品数量、滚动速度和自动播放选项。

• 自定义箭头和点：在“Navigation”可以为轮播添加导航箭头和点，并设置它们的颜色和位置，以确保它们与整体页面风格一致。

• 自动播放和循环：可以选择是否启用自动播放以及是否让轮播无限循环，这样可以提高用户的浏览体验。

3. Media Grid布局

从常规设置中设置，Media Grid布局非常适合展示高度不一的产品图片，它能以一种动态的方式将产品排列起来。此布局特别适合时尚、艺术类的商店页面。

• 选择砌体布局：在小部件设置中选择“Media Grid”布局，系统会自动调整产品图片的位置和大小，以形成流畅的视觉效果。
• 设置图片适应方式：可以选择图片如何适应布局，比如是否裁剪、缩放等，以确保图片展示效果最佳。

三、详细的自定义选项

通过 Elementor 和 Premium Addons，可以深入自定义 WooCommerce 产品列表的外观和功能。

1. 产品显示选项

Elementor 可以自定义产品显示的各个方面，包括图片、标题、价格、评分和添加到购物车按钮等：

• 自定义产品图片：选择产品图片的悬停样式、边框类型和阴影效果，以增加页面的互动性。

• 产品标题和价格：可以调整标题和价格的字体、颜色及位置，使其在页面上更突出。

• 添加到购物车按钮：自定义按钮的样式和位置，使其更符合整体设计风格。

• 对齐：将产品细节左对齐、居中或右对齐。

2. 快速查看功能

快速查看功能允许用户在不离开当前页面的情况下查看产品的详细信息，从而提高用户体验：

• 启用快速查看：在小部件设置中，启用快速查看功能，并选择触发方式（如点击图片或按钮）。
• 自定义快速查看窗口：设置快速查看窗口的宽度、背景颜色、边框和阴影效果，使其与页面其他部分风格统一。
• 隐藏不必要的元素：根据需要隐藏快速查看窗口中的某些元素，如评级、价格或描述，使界面更简洁。

3. 特价和缺货丝带

丝带是吸引用户注意特定产品（如特价商品或缺货商品）的一种有效方式：

• 启用特价丝带：可以为正在打折的产品添加特价丝带，并自定义其文本、颜色和位置。
• 启用缺货丝带：当某些产品缺货时，可以显示缺货丝带，让用户一目了然。

四、进阶查询和分页选项

Elementor 的 WooCommerce 产品列表小部件还支持高级查询和分页功能，可以更灵活地展示产品。

分页

分页功能允许将大量产品分成多个页面展示，避免页面加载过慢：

• 启用分页：选择分页类型（数字或箭头导航），并设置分页按钮的对齐方式。

五、使用 Elementor Pro 进行高级自定义

希望进一步自定义 WooCommerce 产品列表，Elementor Pro 和 Premium Addons Pro 提供了更多高级选项：

• 使用高级皮肤：Premium Addons Pro 提供了多种高级皮肤，你的产品列表更加个性化。
• 自定义 CSS：如果默认选项不能满足你的需求，还可以使用自定义 CSS 来调整页面元素的样式。
• 全局显示条件：结合 WooCommerce 显示条件，可以根据用户的购物行为（如购物车中的产品数量）动态显示或隐藏内容。

六、总结

通过 Elementor 和 Premium Addons，可以轻松创建一个功能强大、外观精美的 WooCommerce 商店页面。无论是使用网格、轮播还是砌体布局，都可以根据自己的需求进行高度定制。通过使用高级查询、分页和快速查看功能，可以显著提高用户体验和转化率。

在创建 WooCommerce 商店页面时，不要忘记利用 Elementor Pro 提供的高级功能，如自定义 CSS 和全局显示条件，以进一步优化页面效果。