关于php:如何使用WooCommerce简码

60次阅读

共计 6140 个字符,预计需要花费 16 分钟才能阅读完成。

WooCommerce 简码(shortcode)能够让咱们将产品、购物车等内容退出到页面或者文章中。咱们在外贸建站时,能够间接通过 Elementor Pro 的 Product 元素块来配置产品的展现,但如果元素块或是主题无奈提供所需的产品配置呢?那学习 WooCommerce 简码能让你自定义所需的产品展现,譬如在网站首页,以 tab 标签的模式展现不同类目标产品。

此外,如果你应用 WordPress 默认的古腾堡编辑器来编辑页面或者文章,如下图所示,点击左上角的加号按钮,在面板中你能够找到 WooCommerce 区块,单击区块即可退出到页面中。

它们与本文行将介绍的简码的作用是一样的,简码是一小段代码,须要你本人撰写代码规定,相比之下,这种区块更易用。

尽管咱们在制作网站页面时,不大会应用古腾堡编辑器,譬如我罕用 Elementor 编辑器进行外贸建站,即便如此,你仍旧能够在给外贸网站写博客文章时,通过这种形式插入相干的产品信息。

此外,学习了 WooCommerce 简码,当你再应用 Elementor 制作页面时,可能领会到更多的便当和灵活性,下文会有一些示例。

如何应用 WooCommerce 简码

[woocommerce_cart] 为例,它示意购物车页面。当你向页面中增加这个短代码时,那这个页面将蕴含购物车内容。

在后盾给页面增加了购物车简码

这是该页面的预览成果

如何批改 WooCommerce 我的账户、结算、购物车页面的设计款式

你也能够应用 Elementor 编辑这个页面,给他减少一些设计款式,下图便是我用 Elementor 加了款式后的成果(譬如我给内容加了边框和投影,给题目增加了背景色和底部形态分隔线)。

如果你在尝试用 Elementor 编辑这些页面时提醒无奈编辑,请先返回 WooCommerce 的设置中勾销关联再编辑,编辑实现后再建设关联。

举荐相干教程:Elementor 的 Advanced 高级设置教程(18 个性能点)

好,接下来咱们开始介绍各种 WooCommerce 简码及其用处、示例。

页面简码

在装置 WooCommerce 时,如果依照 WooCommerce 装置向导操作,会主动生成 4 个页面:我的账户、购物车、结算、商店。如果你想自行制作这些页面,只须要增加页面并退出这些简码即可。

其中购物车、结算、我的账户的简码如下。

  • [woocommerce_cart] – 购物车页面
  • [woocommerce_checkout] – 结算页面
  • [woocommerce_my_account] – 我的账户页面
  • [woocommerce_order_tracking] – 订单跟踪页面,这个页面未主动生成,你也能够自行添加。

当你编辑这些页面时,你将看到下图,实际上就是将简码退出了对应页面中。

购物车页面

简码:[woocommerce_cart]

结算页面

简码:[woocommerce_checkout]

我的账户页面

简码:[woocommerce_my_account]

订单跟踪页面

简码:[woocommerce_order_tracking]

产品简码

你能够应用产品简码在页面、文章、产品详情中插入产品。产品简码是 products,你须要在简码中退出各种属性组合,以便实现你想要展现的产品信息,咱们持续往下看。

咱们先看一个示例,譬如:展现 6 个卖的最好的促销产品,每行 3 个产品,它的简码如下。留神:上面的图例中的展现成果与主题强相干,主题不同看到的“皮肤”不同哦。

[products limit="6" columns="3" orderby="popularity"  on_sale="true"]
  • limit=”6″:示意展现 6 个
  • columns=”3″:示意一行展现 3 个
  • orderby=”popularity”:示意筛选卖的最好的商品
  • on_sale=”true”:示意筛选进去的产品是有促销价格的

用简码存在的一个问题是,产品展现的外观取决于你用的主题,无奈在 Elementor 中对简码进行款式上的粗疏批改,但能做一些整体的设置,譬如内外间距、背景、边框等等。

如果你想对细节进行款式批改,那么倡议你不要用简码,而是购买一个 Elementor Pro,应用它的 Product 元素来自定义款式。

接下来咱们介绍一下可供使用的产品属性

产品属性

以下属性可与 Products 简码一起应用。

展现类产品属性

  • limit – 须要展现的产品数量,譬如,limit=”6″,默认是 limit=”-1″,示意显示全副产品,默认的意思是:如果你想展现全副产品,limit=”-1″可省略不写,下方同理。
  • columns – 每行的列数,默认为 4,示意一行展现 4 个产品。
  • paginate – 启用翻页性能,要与 limit 一起应用,默认值为 false,设置为 true 能够启用分页性能,譬如:paginate=”true”。下图的简码是:[products limit=”4″ columns=”4″ paginate=”true”],示意每页展现 4 个产品,每行展现 4 个产品,显示产品翻页性能。

  • orderby – 依据你设置的内容选项来定义排序,如果你想退出多个选项,多个选项之间以空格距离,可用的选项包含如下:
  • rand – 在页面加载时随机出现产品(可能不适用于应用缓存的站点,因为它可能会保留特定的程序)。
  • rating – 产品的评分
  • title – 产品题目,这是默认的 orderby 模式。
  • date – 产品的公布日期
  • id – 产品 ID
  • menu_order – 菜单排序,编辑产品时,在产品数据》高级中能够设置菜单排序,请填写数值,数值越大越优先展现。
  • popularity – 产品的销量
  • order – 为 orderby 中设置的选项定义排序形式,含:升序(ASC)和降序(DESC),默认为 ASC。
  • skus – 以英文逗号分隔多个产品的 SKU,每个产品的 sku 是惟一的。编辑产品时,在产品数据》库存中能够设置产品的 SKU。
  • category – 以英文逗号分隔多个产品分类的 slug。
  • tag – 以英文逗号分隔多个产品标签,你能够在编辑产品时增加标签,也能够在产品列表中,疾速批改产品并增加多个标签。
  • class – 增加一个 CSS Class,以便你能够应用自定义 CSS 批改产品的款式(难度颇高,无 CSS 常识储备的忽视它)。
  • on_sale – 展现促销商品,不能与下文的 best\_selling 或 top\_rated 一起应用。
  • best_selling – 展现销量最好的商品,不能与 on_sale 或top_rated 一起应用。
  • top_rated – 展现评估最好的商品,不能与 on\_sale 或 best\_selling 一起应用。

内容类产品属性

  • attribute – 产品属性,由你本人定义产品属性,譬如鞋子色彩、尺码,你能够指定产品的属性 slug 来选取要展现的产品。
  • terms – 产品属性值,通过指定产品属性值来选取要展现的产品,譬如红色、黄色鞋子,多个属性值之间要用英文逗号分隔
  • terms_operator – 产品属性值之间的运算关系,包含:
  • AND – 示意“和”关系,将显示蕴含全副所选属性值的产品。
  • IN – 示意“蕴含”关系,将显示蕴含任一所选属性值的产品,这也是 TERMS_OPERATOR 的默认值。
  • NOT IN – 示意“不蕴含”关系,将显示不蕴含任一所选属性值的产品。
  • tag_operator – 产品标签之间的运算关系,包含:
  • AND – 示意“和”关系,将显示所有选定标签中的产品。
  • IN – 示意“蕴含”关系,将显示蕴含任一所选标签的产品。这是 TAG_OPERATOR 的默认值。
  • NOT IN – 示意“不蕴含”关系,将显示不蕴含任一所选标签的产品。

示例:

按色彩属性(attribute=”color”)展现不蕴含(terms_operator =”not in”)绿色或红色(terms=”green,red”)的产品 6 个(limit=”6″),每行 3 个产品(columns=”3″)。

[products  limit="6" columns="3" attribute="color" terms="green,red" terms_operator ="not in"]

  • visibility – 可见性,将依据你选定的可见性选项来展现产品,可见性的选项如下:
  • visible – 可见的:在商店和搜寻后果中可见的产品。这是默认的可见性选项。
  • catalog – 产品目录:产品仅在商店页面、产品目录页中可见,在搜寻时不可见。
  • search – 搜寻后果:产品仅在搜寻后果中可见,但在商店、产品目录页中不可见。
  • hidden – 暗藏:产品在商店、产品目录页和搜寻后果都暗藏,只能通过拜访 URL 拜访。
  • featured – 特色产品:是指标记为特色产品的产品,在产品列表中点亮小星星即为特色产品。
  • category – 展现你抉择的产品类别的产品。
  • cat_operator – 产品类别之间的运算关系,包含:
  • AND – 示意“和”关系,将显示蕴含全副所选类别的产品。
  • IN – 示意“蕴含”关系,将显示蕴含任一所选类别的产品,这是 cat_operator 的默认值
  • NOT IN – 示意“不蕴含”关系,将显示不蕴含任一所选类别的产品。
  • tag – 展现你抉择的产品标签的产品。

示例:只展现产品标签里带有 demo 的产品

[products tag="demo"]

  • ids – 展现所选产品 ID 的产品,多个 ID 之间以英文逗号分隔
  • skus – 展现所选 SKU 的产品,多个 ID 之间以英文逗号分隔

留神:如果你所选的产品未展现,请确保它们的可见性没有被设置为“暗藏”。

进阶示例

我以前在建站时,会遇到这种需要:用标签切换的模式展现不同类目标产品(见下方视频)。但 Elementor Pro 里不提供这种模式的产品元素块,学习了 WooCommerce 简码,咱们就能用 tab 类元素块 + 简码来实现。

Elementor 免费版就提供了 3 种标签切换元素块,上图用到的是 tabs。

你只须要将简码放到 tab 的内容里即可,如下图所示,如果在编辑模式下无奈看到成果,请 update 页面后预览。

产品分类简码

上面这两个简码可能在任何页面上展现产品分类

  • product_category] – 展现指定分类下的产品
  • product_categories] – 展现所有产品分类

产品分类属性

  • ids – 指定要展现的分类 id,多个 id 之间用英文逗号分隔,用在 [product_categories] 简码中,你能够通过下图所示形式获取分类的 id,也能够查看编辑产品分类页面的 url 获取 id

  • category – 能够是分类 id、slug 或名称,用在 product_category
  • limit – 要展现的分类数量
  • columns – 每行展现的数量,即列数,默认值是 4。
  • hide_empty – 默认值是 1,示意暗藏无产品的空分类。如果设置为 0,则展现空的分类。
  • parent – 可设置展现某个分类 ID 的所有子分类。如果设置为“0”,则仅显示一级分类。
  • orderby – 默认按“名称”排序,可设置为按“ID”、“Slug”或“menu_order”排序。如果要按你指定的 ID 排序,则能够应用 orderby=“include”
  • order – 基于 orderby 中的排序根据,设置产品分类的排序是升序(ASC)还是降序(DESC),默认为升序 ASC。

产品分类简码示例

展现指定的多个产品分类,并依照所选的产品分类 id 排序

[product_categories ids="16,17,19,18"  orderby="include"]

展现 2 个有产品的一级产品分类

[product_categories limit="2" parent="0"]

展现指定分类下的所有产品

[product_category category="clothing"]

这个代码我放到了不同主题里成果不同,有些主题下展现的样貌惨不忍睹つ﹏⊂,目前 porto 主题的预览成果不错。

产品页面简码

按 ID 或 SKU 显示一个残缺的产品页面。(尽管我也想不到这个的常见应用场景,譬如在博客文章里直接插入产品?emm.. 也是能够的哈)

[product_page id="16"]

[product_page sku=”99″]


![image 16 - WooCommerce 简码【实例解说】](https://loyseo.com/wp-content/uploads/2020/12/image-16.png "image 16 - WooCommerce 简码【实例解说】")

相干产品简码
------

[related_products limit=”12″]


这个简码通常用于放在产品页面,主题通常都会配置展现相干产品的性能。退出购物车简码
-------

按产品 ID 显示单个产品的价格和“增加到购物车”按钮。![image 17 - WooCommerce 简码【实例解说】](https://loyseo.com/wp-content/uploads/2020/12/image-17.png "image 17 - WooCommerce 简码【实例解说】")

在非 WooCommerce 的页面上显示 WooCommerce 告诉
--------------------------------

shop_messages 简码容许您在非 WooCommerce 页面上显示 WooCommerce 告诉(如“产品已增加到购物车”)。当您应用其余简短代码(如 add\_to\_cart)并心愿用户对其操作取得一些反馈时,这将十分有用。![image 19 - WooCommerce 简码【实例解说】](https://loyseo.com/wp-content/uploads/2020/12/image-19.png "image 19 - WooCommerce 简码【实例解说】")

简码

![image 18 - WooCommerce 简码【实例解说】](https://loyseo.com/wp-content/uploads/2020/12/image-18.png "image 18 - WooCommerce 简码【实例解说】")

成果示例

常见注意事项
------

*   倡议在编辑器的文本模式下退出简码,而不是可视化模式
    

![此图像的 alt 属性为空;文件名为 image-9.png](https://loyseo.com/wp-content/uploads/2020/12/image-9.png "image 9 - WooCommerce 简码【实例解说】")

![image 20 - WooCommerce 简码【实例解说】](https://loyseo.com/wp-content/uploads/2020/12/image-20.png "image 20 - WooCommerce 简码【实例解说】")

*   留神简码的双引号是英文符号””,而非中文的双引号“”本文首发于:https://loyseo.com/woocommerce-shortcodes/

举荐浏览:[WooCommerce 教程](https://loyseo.com/woocommerce/)

正文完
 0