关于php:如何用Elementor制作Woocommerce产品列表

59次阅读

共计 2133 个字符，预计需要花费 6 分钟才能阅读完成。

本文是 LOYSEO 的外贸网站建设教程内容之一，我将逐渐介绍如何应用 Elementor Pro 制作 woocommerce 产品列表模板，上面进入正题。

原文首发于：https://loyseo.com/creating-a…

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：滑动开关能够抉择显示或暗藏发表以后产品或文章的用户头像，默认是开启，此案例中我将它敞开