乐趣区

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

jiezi

本文是 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 教程。

退出移动版