专注于外贸建站,分享WordPress建站和Elementor教程

如何用Elementor制作woocommerce产品列表【视频】

更新日期:2020-11-29

本文是B2B外贸建站教程的内容之一,我将逐步介绍如何使用Elementor Pro制作woocommerce产品列表模板,下面进入正题。

视频教程

20201129备注:1.你也可以用下面图文教程中的post元素块来制作产品列表;2.在视频中,在侧边栏插入的搜索按钮换行问题是主题Bug,你可以安装一个Ajax Search for WooCommerce来替代它(相关教程排期中),文末点赞5星表示催更哈哈ヾ(≧▽≦*)o

图文教程

进入“ 模板”>“添加新模板”,选择类型为 “Product archive”,为其命名,然后单击“ 创建模板”

elementor-woocommerce-archive-template

然后,在弹出的模板库页面上,可以选择一个模板,点击insert按钮导入

elementor-woocommerce-archive-template-2

导入后,页面上只有两个元素,一个是archive title(列表标题)、一个是archive products(产品列表),请点选他们后右键删除,模板里的元素块都不好用,设置受限,我们会换两个发挥空间更大的元素;然后按照下图所示,将标题的context选项关闭,关闭后就不会在标题前显示文案“Archives:”了。

接下来按下图所示,我们在左侧元素库中搜索Heading元素,并将它拖拽到右侧的画布中,按照下图设置,点击title右侧的elementor%E5%85%83%E7%B4%A0%E7%BC%96%E8%BE%91%E6%95%99%E7%A8%8B 26 - 如何用Elementor制作woocommerce产品列表【视频】按钮,并选择archive title,并在setting中将标题的include context选项关闭,关闭后就不会在标题前显示文案“Archives:”了;此外,将HTML tag从H2改为H1,表示当前标题为整个页面的大标题。

elementor-woocommerce-archive-2
elementor-woocommerce-archive

然后,我们在左侧元素库中搜索POST元素,并将它拖拽到右侧的画布中,然后按左侧图片所示,设置这个POST元素的Query,将source选为current query,因为默认post元素是展示Posts(文章)的,设置为current query,就可以根据页面的用途来选取展示的内容,这里我们做的是产品列表,那么就会取产品展示,譬如打开某个产品分类页面时,就会取该分类下的产品展示。

再次,我们可以按需调整一下产品的皮肤,见下图,有三种模式:classic、cards、full content,我比较喜欢第二种card,也是下图中所示的效果。

elementor-woocommerce-archive-template-5

接下来我们进行细节调整,下图是调整后的效果:

elementor-woocommerce-archive-template-6
  • colunms:默认为3,表示一行展示3个产品,点击旁边的电脑图标,可以切换到平板、手机设备模式,这样可以配置在不同设备上一行能展示的产品数量
  • Posts per page:默认为6,表示一页展示6个产品,你也可以设置为-1,那就是一页展示所有产品。
  • Show image:默认为YES,表示展示产品图片,若选择NO,那就不展示图片啦
  • Masonry:默认是关闭的,关闭时,不论产品简介内容长短,每一行的产品都是等高的,如果一行中产品简介又长又短,那么短的下方会留有空白;若开启masonry时,那产品就像砌墙一样,不会留有空白,而是错落有致。(说了这么多不如你自己点一下按钮试试看了~)
  • Image size:调整图片的尺寸,默认是300×300px,一般也不用改
  • Image ratio:用于设置图片比例,通常保持默认的0.66即可
  • Title:默认为开启,滑动开关可以选择显示或隐藏标题
  • Title html tag:默认是H3,由于页面的标题是H1,如果页面没有其他H2的话,此处我建议改为H2
  • Excerpt:默认为开启,选择显示或隐藏产品简介(又叫产品简短描述)
  • Excerpt length:设置简介的文字长度,默认为25,按需增减吧
  • Meta data:默认是data、comments,还有author、time两个选项,可以多选,但作为产品列表页,我们将他们都去掉,去掉就不再显示在产品中了
  • Separator between:默认是·,用于间隔不同的mata data
  • Read more:默认是开启,滑动开关可以选择显示或隐藏查看更多按钮
  • Read more Text:在这里设置按钮的文案,默认是read more
  • open in new windows:默认是关闭,滑动开关可以选择是否需要开启在新窗口打开产品
  • Badge:徽章,显示在图片上,滑动开关可以选择显示或隐藏徽章
  • Badge taxonomy:此处选择徽章上显示的内容,如果是产品列表页,此处要改为product category
  • Avatar:滑动开关可以选择显示或隐藏发表当前产品或文章的用户头像,默认是开启,此案例中我将它关闭

最后,我们点击左下角的update,并将conditon设置为all product archive,保存后,产品列表模板页面就完成了,我们就可以去找到任一产品分类,打开它的的页面查看一下了。

如何将侧边栏小工具加入到产品列表页面中

本教程不适合Hello Elementor,因为默认它未启用小工具(widgets)功能,适合其他提供了小工具的主题,相关教程:Astra主题免费建外贸网站

  1. 在后台的外观》小工具中,将WooCommerce产品小工具加入到区域中;
  2. 使用sidebar元素来将小工具所在区域加入到页面中。

相关教程:对模板进行样式调整添加自定义的产品字段

点赞
0 / 5 5

Your page rank:

教程

分享知识是一种美德,当我们每一个人都在不断的分享知识给这个社会的时候,我们这个社会将会变得越来越好,所以如果您喜欢这篇文章的内容,希望您可以把它分享到您的朋友圈当中,或者给到您指定的某一个人,您关心谁,就把知识分享给他,谢谢。

6 回复

  1. 最后,我们点击左下角的update,并将conditon设置为all product archive,保存后,产品列表模板页面就完成了,我们就可以去找到任一产品分类,打开它的的页面查看一下了。
    请问做好产品列表页之后怎么才能放在导航里面,点击product出现这个列表页.

发表评论

邮箱地址不会被公开。 必填项已用*标注

我自用的

当你点击本站的链接购买它们,我会得到一些佣金,谢谢你们对我这位自由职业娃妈的支持,比心( •̀ ω •́ )y

Namesilo

注册域名,购买时使用优惠券loyseo可减1美元
前往注册→

siteground logo
SiteGround

购买外贸建站主机,它是80%读者的选择
了解详情→

Astra

易用又轻快的WordPress主题,含超多免费模板
了解详情→

elementor logo gradient 01 1
Elementor

最热门的网页可视化设计编辑器,我的网站就是用它建的
了解详情→

Hi~当你点击本站中的主机、主题、插件的链接前往购买后,我将获取一些佣金,这是我撰写建站教程的主要收入~希望也能得到你的支持,比心( •̀ ω •́ )y

Copyright © LOYSEO.COM — 专注提供外贸网站建设 · 外贸建站 · 外贸网站制作 与 外贸建站教程

Do NOT follow this link or you will be banned from the site!
微信扫一扫
我朋友的锂电池外贸网站可与相关应用(如电摩轻骑、电动自行车、电动车等)、上下游、同行进行自然外链交换,有意向请联系我~