在 Elementor 网站中使用 WooCommerce 产品轮播小部件创建产品轮播
已发表: 2021-07-31创建 WooCommerce 商店可能是开始您的电子商务业务的好方法。 在构建电子商务网站时，您必须专注于商店设计。 它改善了用户体验，并最终有助于提高您的销售额。
WooCommerce + Elementor + Happy Addons = 在几分钟内设计电子商务网站的绝佳组合。
在 Happy Addons Pro 中，您将获得独家高级 WooCommerce 小部件和功能，可帮助您创建梦想中的在线商店。
现在，我们想介绍 Happy Addons Pro 的 Product Carousel 小部件，它允许您为 Elementor 网站设计一个漂亮的产品轮播。 让我们探索一下这个方便的小部件是如何工作的。
如何使用 Happy Addons 的 WooCommerce 产品轮播小部件创建令人惊叹的轮播
创建轮播以在 Elementor 网站上展示您的在线商店的产品不再是一项艰巨的任务。
使用 Happy Addons 的 WooCommerce 产品轮播小部件，您可以通过以下3 个简单步骤为您的 Elementor 网站创建独家产品轮播。 在开始这些步骤之前，让我们先向您展示先决条件列表。
先决条件
要使用那个很酷的 WooCommerce 产品轮播小部件，您需要以下内容：
- WooCommerce（免费）
- 元素（免费）
- 快乐插件（免费）
- 快乐插件专业版
让我们开始吧：
第一步 - 添加快乐插件产品轮播小部件
首先，在搜索栏中找到 Product Carousel 小部件，然后从左侧菜单中选择小部件。 然后将其拖放到工作区域。
第二步 - 向产品轮播添加内容
在内容区域中，您将获得将内容添加到轮播的必要选项。 选项是。
- 布局
- 询问
- 轮播设置
让我们一一探讨每个选项。
1. 布局
在Layout–> Skin中，您可以设置您的轮播皮肤设计Classic & Modern 。 查看下图以了解皮肤设计的工作原理。
您还可以使用以下设置自定义布局内容。
- 图片尺寸：您可以根据需要更改产品图片尺寸。
- 显示销售徽章：您还可以显示和隐藏销售徽章。
- 显示评分：如果要显示产品评分，可以在这里进行。
- 显示添加到购物车：添加到购物车按钮还可以根据您的目的显示和隐藏。
- 显示快速查看：如果您想查看您的单个产品，您需要启用显示快速查看。
- 内容对齐方式：您还可以定义内容对齐方式，例如左、中和右。
2.查询
查询选项有助于查询您的商店产品，以便您可以在轮播中显示它们。
在这里，您可以包括和排除特色产品、新到产品、畅销产品等产品。
您还可以使用Title、Id、Date、Menu Order和Random按产品排序。 并且能够定义像ASC & DSC这样的订单。
3.轮播设置
在轮播设置中，您可以设置产品轮播的动画速度、自动播放、自动播放速度和无限循环。
注意：动画幻灯片速度和 自动播放速度将以毫秒为单位定义。
轮播设置导航和幻灯片显示
您可以在轮播设置区域中设置导航样式，如箭头、点和箭头和点。 在这里，您还可以管理要在轮播中显示的幻灯片数量。
第三步 – 为您的 WooCommerce 产品轮播设置样式
在样式部分，您将找到用于自定义轮播内容的基本样式选项。 以下是可用选项。
- 轮播项目
- 图片和徽章
- 内容
- 添加到购物车按钮
- 导航 - 箭头
- 导航 - 点
- 快速查看按钮
- 快速查看模态
1. 轮播项目
在Style--> Carousel Items中，可以自定义整个轮播内容的高度、Item之间的间距、Border Type、Border Radius、Box Shadow、 Background Type 。
2. 图片和徽章
如果您想重新设计产品图片和徽章，可以在Image & Badge选项中进行。
图片
您可以设置图像的宽度、高度、边框半径和框阴影。
徽章
并且还可以按照自己的方式更改徽章位置、填充、边框半径、框阴影、排版、背景颜色和颜色。
三、内容
您可以通过转到样式 -> 内容区域来设置名称、价格和评级的内容。
4. 加入购物车按钮
根据您的需要，您可以自定义添加到购物车按钮的设计。 在这里，您可以管理购物车按钮的间距、填充、边框半径、边框类型和排版。
5. 导航箭头
产品轮播导航箭头也可以自定义。 要使其更时尚，您必须转到样式-> 导航箭头区域。 在这里，您将获得导航样式选项。
6.导航点
与导航箭头一样，您也可以重新设计导航点的垂直位置、间距、对齐方式和颜色。
7.快速查看按钮
如果需要，您可以更改Quick View Button的Padding、Border Radius、Typography、Color和Background Color 。
8.快速查看模式
您甚至可以按照自己的风格设计快速查看模态内容，例如标题、评级、价格、摘要和添加到猫。
WooCommerce 产品轮播小部件的最终预览
如果您遵循上述所有说明，您的产品轮播的最终输出将如下图所示。
要了解更多详细信息，您可以查看 Happy Addons 产品轮播小部件的文档。
快乐插件 您可能会考虑设计在线商店的其他 WooCommerce 小部件
Happy Addons Pro 带有 7 个方便的 WooCommerce 小部件，包括产品轮播小部件。 这些基本小部件有助于以更有条理的方式构建电子商务网站。 让我们一一谈谈其他有用的 WooCommerce 小部件。
1. Product Grid (Pro) : Product Grid 是一个令人惊叹的小部件，可让您以完美的网格对齐方式展示您的 WooCommer 产品。 现在，您可以轻松地将多种产品展示到 Elementor WooCommerce 商店的不同部分。
2.产品类别网格（专业版） ：您经常需要针对特定目标客户按类别显示您的电子商务产品。 使用这个新的 Happy Addons 产品类别网格小部件，您可以轻松地根据类别显示您的 WooCommerce 商店产品。
3. 产品类别轮播（专业版） ：您可以使用现代产品类别轮播小部件在轮播滑块中添加类别产品。
4. 单品（专业版） ：单品小部件可让您以自己的风格装饰每个产品。
5. Mini Cart (Pro) ：使用新的有效的 Mini Cart 小部件，您可以将购物车功能添加到电子商务网站。 现在，您的客户可以以适当的方式管理他们购物车中的订单。
6. 购物车（专业版） ：如果您想以您的梦想风格自定义和重新设计默认的 WooCommerce 购物车页面，请尝试使用方便的 Happy Addons 购物车小部件，并为您的购物车页面提供令人惊叹的外观。
7. 结帐（专业版） ：与购物车页面一样，您还可以使用 Happy Addons 的结帐小部件以有组织的方式自定义默认的 WooCommerce 结帐页面。
您还可以一目了然地探索 85 多个 HappyAddons 小部件（专业版和免费版）
你准备好使用快乐插件产品轮播小部件了吗
为您的电子商务网站提供令人惊叹的外观非常重要。 并始终尝试使其更吸引人，以便用户可以与您的 WooCommerce 商店互动。
在指南中，我们展示了如何使用 Happy Addons 的便捷 WooCommerce 产品轮播小部件在您的 Elementor 网站上创建令人惊叹的产品轮播。
如果您对博客仍有任何疑问，可以对我们发表评论。
请在您的社交渠道上分享这篇文章，以便其他人可以学习。 并订阅我们的时事通讯以获取即将推出的 Elementor 和 WordPress 教程。 免费！