本文是LOYSEO的外贸网站建设教程内容之一，我将逐渐介绍如何应用Elementor Pro制作woocommerce产品列表模板，上面进入正题。
原文首发于：https://loyseo.com/creating-a…
视频教程
<iframe frameborder=”0″ src=”https://v.qq.com/txp/iframe/player.html?vid=a3208zk0jam” allowfullscreen=”true” height=”600″></iframe>
20201129备注：1.你也能够用上面图文教程中的post元素块来制作产品列表；2.在视频中，在侧边栏插入的搜寻按钮换行问题是主题Bug,你能够装置一个Ajax Search for WooCommerce来代替它（相干教程排期中）
图文教程
进入“ 模板”>“增加新模板”，抉择类型为 “Product archive”，为其命名，而后单击“ 创立模板”
而后，在弹出的模板库页面上，能够抉择一个模板，点击insert按钮导入
导入后，页面上只有两个元素，一个是archive title（列表题目）、一个是archive products（产品列表），请点选他们后右键删除，模板里的元素块都不好用，设置受限，咱们会换两个施展空间更大的元素；而后依照下图所示，将题目的context选项敞开，敞开后就不会在题目前显示文案“Archives:”了。
接下来按下图所示，咱们在左侧元素库中搜寻Heading元素，并将它拖拽到右侧的画布中，依照下图设置，点击title右侧的按钮，并抉择archive title，并在setting中将题目的include context选项敞开，敞开后就不会在题目前显示文案“Archives:”了；此外，将HTML tag从H2改为H1，示意以后题目为整个页面的大题目。
而后，咱们在左侧元素库中搜寻POST元素，并将它拖拽到右侧的画布中，而后按左侧图片所示，设置这个POST元素的Query，将source选为current query，因为默认post元素是展现Posts（文章）的，设置为current query，就能够依据页面的用处来选取展现的内容，这里咱们做的是产品列表，那么就会取产品展现，譬如关上某个产品分类页面时，就会取该分类下的产品展现。
再次，咱们能够按需调整一下产品的皮肤，见下图，有三种模式：classic、cards、full content，我比拟喜爱第二种card，也是下图中所示的成果。
接下来咱们进行细节调整，下图是调整后的成果：
- 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，保留后，产品列表模板页面就实现了，咱们就能够去找到任一产品分类，关上它的的页面查看一下了。
相干教程：对模板进行款式调整、增加自定义的产品字段
查看更多Elementor教程
本文原文由LOYSEO 公布，LOYSEO专一于WordPress外贸网站建设教程、Elementor教程。
转载请注明原文链接：如何用Elementor制作Woocommerce产品列表
