分享笔记:

WooCommerce常用短码Shortcodes

轻松调用产品信息

文章目录

WordPress和WooCommerce创建一个在线商店非常简单,设置也相对没那么负责,而且你也可以使用WooCommerce的短代码来实现一些特殊的配置和展示。接下来,我们来看看WooCommerce可用的短代码及其使用方法。

什么是短码?

短码,也叫简码,英文是Shortcode,它是一种编程捷径,一段执行更长代码指令的代码,通常包含在插件里,当前主题的functions.php文件里或你自己的自定义插件里。以包含在方括号里的形式出现。

WooCommerce你只能操作一些短码的显示内容,具体的样式是操作不了的,这个和你使用的主题有关。你要是用的网站构建器做的网站,当我没说。

WooCommerce页面短码

你在安装WooCommerce时,它会自动生成几个页面,里面就有带以下短码:

1. 购物车 Cart

显示“购物车”页面。

[woocommerce_cart]
woocommerce 购物车短码

2. 结算页面 Checkout

显示“结算”页面。

[woocommerce_checkout]

3. 我的账户 My account

显示“我的账户”页面。

[woocommerce_my_account]
woocommerce 我的账户短码

4. 显示订单状态 Order Tracking

这个页面并不会自动生成,而且它的作用其实也不大。如果你想要网站提供物流跟踪的功能,可以看看我之前发的笔记。

[woocommerce_order_tracking]
woocommerce 短码

自动生成的短码页面就这些,还有一个“退货和退款政策”也会自动生成,不过它里面没有代码,这个你要根据自己的情况填写噢。

WooCommerce简码

虽然WooCommerce自动生成的商城页面没有短码,不过是默认显示所有产品的,但有时我们只想在某个页面或文章中显示某些特定的产品,这个时候我们就需要用一些具体点的代码了。

1. 单个产品

从最简单的开始。要在任何页面或文章中显示某个特定的产品,可以使用以下短代码:

[product]

想要单独展示一个产品我们可以通过输入它的产品ID或者产品SKU

woocommerce产品id和sku
//通过ID导入单个产品
[product id="22"]

//通过SKU导入单个产品
[product sku="J0000"]
woocommerce产品id和sku

2. 显示多个产品

我们可以根据产品的ID,SKU,类别,属性等显示多个产品。

属性

  • limit – 要显示的产品数量。默认显示所有产品(-1)。
  • columns – 要显示的列数。默认是4列。
  • orderby – 根据指定的选项对显示的产品进行排序。可以通过添加多个参数并用空格分隔它们来传递多个选项。可用选项有:
    • date – 产品发布的日期。
    • id – 产品的ID。
    • menu_order – 菜单中的顺序,如果定义了(数字越小的优先显示)。
    • popularity – 购买数量。
    • rand – 加载页面时产品的随机顺序(在使用缓存的网站上可能无效,因为缓存会保存特定的顺序)。
    • rating – 产品的平均评分。
    • title – 产品的标题。这是默认的排序方式。
  • order – 设置产品的排序方式是升序(ASC)还是降序(DESC),使用orderby中定义的方法。默认是升序(ASC)。
  • class – 向HTML添加一个容器类,以便你可以使用自定义CSS修改特定的显示。

产品内容属性

  • attribute – 使用选择的属性slug检索产品。
  • terms – 用逗号分隔的属性术语列表,与attribute一起使用。
  • terms_operator – 比较属性术语的操作符。可用选项有:
    • AND – 显示所有选定属性的产品。
    • IN – 显示具有选定属性的产品。这是terms_operator的默认值。
    • NOT IN – 显示不在选定属性中的产品。
  • visibility – 显示基于选择的可见性产品。可用选项有:
    • visible – 在商店和搜索结果中可见的产品。这是visibility的默认值。
    • catalog – 仅在商店中可见的产品,不在搜索结果中。
    • search – 仅在搜索结果中可见的产品,不在商店中。
    • hidden – 在商店和搜索中都隐藏的产品,只能通过直接URL访问。
    • featured – 标记为特色产品的产品。
  • category – 使用特定类别的slug检索产品。
  • cat_operator – 比较类别术语的操作符。可用选项有:
    • AND – 显示属于所有选定类别的产品。
    • IN – 显示选定类别的产品。这是cat_operator的默认值。
    • NOT IN – 显示不在选定类别中的产品。
  • ids – 根据用逗号分隔的ID列表显示产品。
  • skus – 根据用逗号分隔的SKU列表显示产品。

示例短代码

[products limit="8" columns="4" category="hoodies, tshirts" cat_operator="AND"]

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]

[products ids="1, 2, 3, 4, 5"]

3. 最新产品短码

显示最新产品列表,per_page 决定页面上显示的产品数量(这个也和你主题WooCommerce的产品数量显示设置有点关系)columns 控制产品显示的列数。

[recent_products per_page="12" columns="4"]

你还可以添加下面两个,顺序是升序(asc)还是降序(desc)或者排序依据。

     'orderby' => 'date',
     'order' => 'desc'

4. 特色产品短码

它的原理和上面的最新产品相同,但它只显示标记为特色的产品

[featured_products per_page="12" columns="4"]

添加特色产品很简单,在后台产品界面把想添加的产品的星星点上就可以了。

woocommerce添加特色产品

5. 添加到购物车

通过产品ID显示特定产品的价格和“添加到购物车”按钮。

[add_to_cart id="22"]

6. 添加到购物车的URL

通过产品ID显示特定产品的“添加到购物车”按钮的URL。

[add_to_cart_url id="22"]

7. 显示单个产品页面

通过产品ID或SKU显示特定产品的详细信息页面。

//通过ID导入单个产品页面
[product_page id="22"]

//通过SKU导入单个产品页面
[product_page sku="J0000"]

8. 显示产品类别

通过类别的slug显示特定类别中的多个产品。

[product_category category="分类slug"]

9. 特价商品

显示所有打折商品。

[sale_products per_page="12"]

10. 畅销产品

显示最畅销的产品。

[best_selling_products per_page="12"]

11. 高评价产品

展示产品评论最高的产品。

[top_rated_products per_page="12"]

12. 产品属性

显示具有特定属性的产品。下面的短码是只显示有黑色属性的产品。

[product_attribute attribute='color' filter='black']

13. 相关产品

显示与当前产品相关联的产品列表。

[related_products per_page="12"]

使用自定义字段来排序产品

在以下短码里:

[recent_products]
[featured_products]
[products]
[product_category]
[sale_products]
[top_rated_products]
[product_attribute]
[related_products]

你可以使用以下任意一个值来对产品进行排序:

menu_order
title
date
rand
id

例如,你可以使用 ‘orderby’ 属性来指定排序方式,如下所示:

[products skus=”J0000, H2O, HAHA” orderby=”date” order=”desc”].

怎么使用shortcode?

如果你是用WordPress自带的古腾堡,那么去到想加短码的页面,找shortcode组件,把短码放进去就可以了。

古藤堡简码

经典编辑器也可以放短码,这没有问题。

woocommerce经典编辑器添加简码

你要是使用网站构建器,像ElementorBricks Builder,那么更没有问题,它们都有自己的短码widget。

使用WooCommerce短码插件

WooCommerce Shortcodes 插件会更简单,它在 WordPress 编辑器工具栏中添加了一系列按钮,方便插入带有各自修饰符的 WooCommerce 短代码。

woocommerce短码插件

全部这些简码你可以在WooCommerce的官方短码文章里找到更详细的内容.

为笔记评分

平均评分 5 / 5. 摘星者: 3

有疑问?留个言吧!

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors