WooCommerce 产品旋转木马元素:三种工作方式

Master Addons WooCommerce 产品转盘小部件没有,这是前面的诚实答案,它可以为您节省安装费用。

What does work的是三条路线。Elementor Pro的Loop Carousel是唯一运行实时产品查询的,所以如果条带应该遵循您的目录,请选择它。免费的象限分页目录设计为您提供了一个手工策划的九项展示,后面没有查询。以及Master Addons的特色产品小部件聚光灯一个产品,免费的图像旋转木马覆盖产品摄影。所有三个都位于更宽的内部 元素轮播小部件 家人;如果你正在装备整家商店, woocommerce 的最佳 Elementor 插件 综述涵盖其余部分。

下面:每个轮播是如何构建的,然后大多数教程都会跳过,这就是产品轮播积极消耗您的销售成本的部分。

选择哪种方法

• 您拥有 Elementor Pro,该条带应跟踪库存、价格和新品 → 循环旋转木马。这才是真正的答案。
• 您需要九张手写卡片,您可以控制到最后一行副本 → 象限分页目录,免费。
• 您想用力推动一种产品 → 特色产品,专业版。
• 您只需要在赛道上拍摄产品照片 → 图像旋转木马,免费。

方法 1:Elementor Pro 的循环旋转木马

Elementor Pro 本机解决了这个问题,所以从这里开始。 环形旋转木马 loop Item模板,你设计一次的一张产品卡,并指向一个WooCommerce查询,添加一个产品,更改一个价格,卖出一个大小,转盘反映出来,没有人打开编辑器,不涉及任何插件。

1. 构建循环项目模板。 模板 → 主题生成器 → 循环项目,源设置为产品。使用动态标签布局图像、标题、价格、评级和按钮。
2. 在页面上删除循环轮播小部件 并选择该模板。
3. 设置查询。 Source 是真正工作发生的地方:所有产品、一个类别、一个标签、在售、特色或手动选择。然后按日期、价格、受欢迎程度或菜单顺序订购。
4. 设置要加载多少。 这是转盘容纳的总量,而不是可见的数量。八到十二适合相关产品条。用四个可见加载四个,没有什么可滚动的。
5. 排除不应该存在的东西。 Out-stock 的项目, 而在一个单一的产品页面上, 当前产品。包含您已经在看的产品的一个相关产品条读取为坏。
6. 每个断点设置每张幻灯片。 四台在桌面上,三台在平板电脑上,一台半在移动设备上。

That “移动”一个半不是错字, 全卡加下一张的一半是条形卷轴最强的信号, 一张卡填宽度看起来像静态块, 大部分人从不刷。

捕获的是许可证。循环旋转木马仅限 Pro,Elementor 核心中没有免费的等效项。 旋转木马插件综述 详细查看查询控件和免费解决方法。

方法 2:使用象限分页目录手工策划(免费)

Live查询有时是完全错误的,一个你想自己写每一行的首页集合,或者一个完全不运行WooCommerce的网站上的产品展示,想要手选卡。

象限分页目录是八个免费导入目录之一 小部件生成器 designs:一个网格,九个物品盒子一次分页三页,有一个段轨,显示你在哪里,在页面之间跳转,每个盒子都有一个图像,一个类别标签,一个标题,一行副本和一个统计,都是手工输入的,这就是重点。

现场演示 下载小部件 JSON

它通过主插件 → Widget Builder → Import Widget 在免费插件上导入,然后出现在 Elementor 的收藏夹下。该集的其余部分,二十种设计,其中八种是免费的,位于 免费 Elementor 滑块模板 综述。

The olden caveat: nine items, fixed 不是商品查询,没有东西追踪库存,没有东西更新价格,一个卖完的物品就坐在那里直到你编辑盒子,用它来做一个你很少更改的策划集,对于任何必须遵循目录的东西,回到方法1。

方法 3:特色产品和照片图像旋转木马

Master Addons 恰好有一个 WooCommerce 小部件,它不是旋转木马。 特色产品小部件 是专业人士,它做了一个不同的工作:一种产品,给定的空间,带有图像,标题,价格,描述和一个购买按钮,以块而不是条带中的卡片的形式布局。

反正形状往往更好。一个周围有空间的单一产品比同一产品转换得更难,因为有人必须滚动过去的四张卡牌之一。将其用于发布、畅销书或构建登陆页的一件商品。

对于赛道上的产品摄影(同一件夹克的六个角度、造型手册、材料条)免费 图片旋转木马 处理它。灯箱、字幕、每台设备每视图幻灯片。如果其中一些角度是剪辑而不是剧照,则 视频转盘和画廊滑块指南 覆盖处理播放的小部件。

清楚它不是什么:你自己添加图像,除非你用手设置链接,否则它们不会链接到产品,它是照片转盘,而不是商店饲料。

产品转盘所属的地方

无论您使用哪种方法,四个职位都可以可靠地工作:

• 相关产品位于单个产品页面上。 访客已经对这一类感兴趣,四种替代方案的滑条是一种服务。
• 交叉销售和“完成外观” 主要产品下的配件。没有人需要看到全部十二个;他们需要知道十二个存在。
• 主页上的特色或季节性系列。 精心策划,并非详尽无遗。
• 最近查看。 小型、个性化和旋转木马是它的自然形状。

这些分享的内容:产品是 可选。如果没有人触摸漫画,该页面仍然有效。

您销售成本在哪里

切勿在商店或类别页面上放置旋转木马。

Zhe就是那个要做对的,存在一个分类页面,这样人们Yi比较:扫描一个网格,发现自己想要的,点击一个转盘,Zhan示四个产品,其余的隐藏在一个箭头后面,这就把比Xiang变成了记忆练习,访问者要把产品二抱在头上,Zhuan视产品六。

Presentation成本也是,一个旋转木马和一个网格可以输出相同的标记,但一个明显显示六个项目的类别页面读取为一个薄类别,无论是对于购物者还是任何判断页面深度的人来说,你的商店页面应该看起来像一个商店。

第二个坏位置: 移动折叠上方。 品轮播是任何东西涂漆之前的查询、模板渲染和滑块初始化,在手机页面的顶部,那是你花在旋转器上的最大的满足感涂料,在那里放一个静态英雄,然后启动其下方的轮播。

添加到购物车:在旋转木马中还是不?

显示简单产品的按钮。隐藏它以供可变的。

AJAX 添加到购物车的简易产品在条带中是一个真正的快捷方式:一键点击,无页面加载,购物车更新。值得拥有。

A variable product,不挑选尺寸或颜色就无法添加,所以按钮要么什么都不做,要么把购物者弹到商品页面,两者都感觉破裂,对于variable product,把整张卡片做一个链接,跳过按钮。

如果您的目录混合两者,请运行两个具有不同查询的旋转木马,而不是一个折衷布局。

销售徽章和价格显示

Show出卖徽章,是产品卡中对比度最高的东西,也是人们停止滚动的原因。

显示价格,包括直销的原装促销商品,因为比较就是说服力。

变(“20至”45”)的产品显示范围, 远距离包裹和打破卡对齐, 水平条中未对齐的卡远比网格中更明显, 要么在价格行设置固定高度, 要么显示“20英镑起

看起来不业余的卡片设计

三件事比其他事情更重要。

等卡高度。 产品标题的长度差异很大,一行标题旁边的两行标题将价格行推向不同的高度。设置固定的标题高度并截断,或打开自动高度,以便行自行调平。

一图像宽高比。 同一条带中的肖像和方形产品照片是产品旋转木马看起来便宜的最常见原因。设置比例并让它裁剪。

卡片之间的间隙。 16到24px, 零间隙使产品一起流血;过多和四张牌停止读取为一组。

产品自动播放?

不,这个不是偏好。的 自动播放规则 对于英雄滑块来说是不同的,其中没有可点击的东西,旋转也不需要任何成本。

Product cards是可点击的,Autoplay意味着一张卡片可以随着有人伸手去拿而移动,而一个点击错误产品的购物者通常不会回去再试一次,他们离开。悬停覆盖桌面;在触摸上根本没有悬停,移动是你大多数购物者的地方。

关掉它。

性能:产品转盘的实际成本

Query 中的每个产品都是一个数据库读取加上模板渲染, 并且滑块脚本在那个标记存在之前无法初始化三个实际限制:

• 将查询上限为十二。 除此之外,你还提供没有人能接触到的卡片。
• Lazy-load除了第一行可见图像之外的所有内容。 屏幕外幻灯片急切加载是产品页面缓慢的常见原因。
• 以卡片大小服务卡片图像。 2000px的产品照片缩放到300px的卡片中,这是WooCommerce网站上最常见的浪费下载。

1页段1个转盘是合理的天花板,一个首页3个叠加的转盘就是3个滑块在手机上争夺主线。

模式:不要手卷

WooCommerce已经在单个产品页面上输出产品结构化数据,而这正是谷歌想要的地方,首页或登陆页面上的产品卡轮播不需要自己的产品标记,并且手工添加它是一个很好的方法,可以最终获得与真实产品页面相矛盾的价格或可用性数据。

如果转盘卡链接到产品页面,并且它们应该链接到产品页面,则爬行路径完好无损,结构化数据就生活在它所属的地方。别管它。

常见问题

下一个

6个角度拍摄一个产品而不是列出六个产品?就是 图像转盘教程的,它覆盖了灯箱和标题侧。

一切旋转木马形状、自由且专业,都在上面 旋转木马小部件中心、和 自由与职业的崩溃 准确显示许可证添加的内容。

象限分页目录免费导入。其他十二种设计需要许可证,并且 定价页面 显示每个级别属于哪一层。