本文是LOYSEO外贸建站教程内容之一。我将逐步介绍如何使用ElementorPro制作woocommerce产品列表模板。让我们进入主题。原文发表于：https://loyseo.com/creating-a...视频教程20201129备注：1、您也可以使用下方图文教程中的post元素块制作商品列表；2.视频中，侧边栏中插入搜索按钮的换行问题是主题的bug。你可以安装一个AjaxSearchforWooCommerce来替换它（相关教程已安排）。图文教程，进入“模板”>“添加新模板”，选择类型为“产品档案”，并设置为命名，然后点击“创建模板”，然后在弹出的模板库页面，可以选择一个模板，点击insert按钮导入，导入后页面只有两个元素，一个是archivetitle（列表标题），一个是archiveproducts（产品列表），请点击它们并右键单击以删除它们。模板中的元素块不太好用，设置受限。我们会更换两个有更大使用空间的元素；然后，如下图所示，将标题上下文选项关闭，关闭后标题前将不再显示文字“Archives:”。接下来，如下图，我们在左侧的元素库中搜索Heading元素，并将其拖到右侧的画布中，按照下图进行设置，点击标题右侧的按钮，然后选择存档标题，然后单击设置中，关闭标题的包含上下文选项。关闭后，标题前不会显示文字“Archives:”；另外，将HTML标签由H2改为H1，表示当前标题为整个页面的主标题。然后，我们在左侧的元素库中搜索POST元素，将其拖到右侧的画布中，并设置POST元素的Query，如左图所示，选择source为当前query，因为默认的post元素是用来显示Posts（文章）的。如果设置为当前查询，可以根据页面的用途选择显示的内容。这里我们做的是产品列表，接下来就是产品展示了。比如打开一个商品分类页面，会取该分类下的商品展示。同样，我们可以根据需要调整产品的皮肤。见下图。共有三种模式：经典、卡片和完整内容。我比较喜欢第二张卡，也是下图所示的效果。接下来，我们将调整细节。下图是调整后的效果：columns：默认为3，表示一行显示3个商品。点击旁边的电脑图标可以切换到平板和移动设备模式，可以在不同的设备上配置。一行帖子每页可显示的产品数：默认为6，即一页显示6个产品。也可以设置为-1，即所有产品都显示在一个页面上。显示图片：默认为YES，即显示产品图片。如果选择否，则不会显示图像。砌体：默认关闭。国内产品介绍一长一短，短的下面会有空白；如果打开砌体，产品将像一面墙，没有空白，但排列整齐。（说了这么多，不如自己点击按钮试试看吧~）图片大小：调整图片大小，默认300×300px，一般不用改。Imageratio:用于设置图片比例，一般保持默认0.66如果页面上没有其他H2，建议改成H2Excerpt：默认启用，选择显示或隐藏产品介绍（也叫shortproductdescription）Excerptlength：设置介绍的文字长度，默认为25、根据需要增减元数据：默认是数据、评论、作者、时间两个选项，可以选择多个，但是作为商品列表页，我们全部去掉，不再显示在移除后的产品。Separatorbetween：默认为·，用于不同间隔的mata。ReadmorebuttonReadmoreText：这里设置按钮的文字，默认是readmoreopeninnewwindows：默认关闭，滑动开关可以选择是否在新窗口打开产品Badge：徽章，显示在图片，滑动开关可以选择显示或隐藏徽章Badgetaxonomy：在这里选择徽章显示的内容。如果是产品列表页，则改为产品分类头像：滑动开关选择显示或隐藏发布当前产品或文章的用户头像。默认是on，在这种情况下，我会关闭它。最后我们点击左下角的更新，将条件设置为所有产品存档。保存后，产品列表模板页面就完成了。我们可以找到任何产品类别并打开其查看页面。相关教程：模板样式调整，添加自定义产品字段查看更多Elementor教程
