WooCommerce 产品 Ajax 过滤插件 – Advanced AJAX Product Filters

2018-12-2210:14:49网站建设与开发Comments2,755 views字数 1318阅读模式

电子商务网站中,往往需要一个产品过滤器,如亚马逊产品列表页面左侧的过滤器。使用 WordPress 架设电子商务网站的时候,大部份用户会选择 WooCommerce 插件,WooCommerce 插件自带的产品过滤器并不是很强大,于是出现了 WooCommerce AJAX Filters 这个产品过滤插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/9001.html

WooCommerce 产品 Ajax 过滤插件 – Advanced AJAX Product Filters文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/9001.html

WooCommerce AJAX Filters 插件功能

  • AJAX 过滤,分页和排序
  • 过滤条件的个数不限
  • 多用户界面元素
  • SEO 友好的链接 URL
  • 可以设置在某个分类过滤或全局显示过滤。
  • 可以通过简码显示过滤条件
  • 可以在滚动主题中限制过滤盒子的高度
  • 可以在侧边栏区域中使用
  • 拖拽方式调整布局

最近新增的功能

  • 没有过滤小工具可以添加不同的自定义 CSS 类。
  • 更新按钮 – 是否在点击更新按钮时才开始进行过滤。
  • 点击选中的单选按钮时是否取消选择。
  • 为了更好的结构,URL 被缩短了。
  • 小工具可以显示子分类。

简码

  • 在可视化编辑器中使用: [br_filters attribute=price type=slider title="Price Filter"]
  • 在PHP代码中使用: do_shortcode('[br_filters attribute=price type=slider title="Price Filter"]');

简码选项

  • 小工具类型widget_type – filter 或 update_button
  • attribute(required) – 产品属性,如价格或长度,不要忘了,WooCommerce 加了一个 pa_ 的前缀到产品属性上面,如果你添加了 area 这个属性,这里的属性名禅应该是 pa_area
  • type(required) – 多选,单选,滑块和下拉选择。
  • 比较方法 – OR 或AND
  • 标题 – 筛选工具的标题,可以为空。
  • 父级产品分类product_cat – 父级产品分类 ID
  • 是否分页 – 是否显示分页,设置 1 为显示分页
  • 高度height – 过滤工具的最大高度,如果超过最大高度,将会出现滚动条。
  • 滚动主题scroll_theme – 选择滚动条的主题,只在设置了固定高度,且内容超出了固定高度时使用

高级设置(小工具区域)

  • CSS 类 – 如果你需要给过滤工具添加自定义样式,在这里添加css类。
  • 过滤小工具高度 – 如果设置选项中有太多内容,设置一个固定高度以防止过滤器占用太多的界面高度
  • 滚动主题 – 如果设置了 “过滤小工具高度”,可以在这里设置一个滚动条主题

高级设置 (插件设置):

  • 可以在管理界面的 WooCommerce -> 产品过滤找到插件的高级设置
  • “没有产品” 的提示信息 – 没有找到产品时的提示信息
  • “没有产品” 的 CSS 类 – 添加 CSS 类到 “没有产品” 的提示区块
  • 产品选择 – 产品选择的标签
  • 排序控制- 控制 WooCommerce 的排序选项
  • SEO 友好的 URL – 选择了过滤器以后,URL 将被修改
  • 关闭所有的过滤选项 – 如果想隐藏过滤工具而不丢失当前设置,关闭此项

Advanced AJAX Product Filters 小工具为我们提供了一些非常实用的设置选项,我们可以在任何风格的主题中集成这个小工具,只要稍微调整一下过滤小工具的 CSS 就可以了,对比于WooCommerce 内置的过滤小工具,设个插件可以瞬间提升 WooCommece 的产品过滤体验,非常值得尝试一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/9001.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/cms/9001.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定