共计 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– 产品 IDmenu_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_categorylimit– 要展现的分类数量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″]
相干产品简码
------
[related_products limit=”12″]
这个简码通常用于放在产品页面，主题通常都会配置展现相干产品的性能。退出购物车简码
-------
按产品 ID 显示单个产品的价格和“增加到购物车”按钮。
在非 WooCommerce 的页面上显示 WooCommerce 告诉
--------------------------------
shop_messages 简码容许您在非 WooCommerce 页面上显示 WooCommerce 告诉（如“产品已增加到购物车”）。当您应用其余简短代码（如 add\_to\_cart）并心愿用户对其操作取得一些反馈时，这将十分有用。
简码
成果示例
常见注意事项
------
* 倡议在编辑器的文本模式下退出简码，而不是可视化模式
* 留神简码的双引号是英文符号””，而非中文的双引号“”本文首发于：https://loyseo.com/woocommerce-shortcodes/
举荐浏览：[WooCommerce 教程](https://loyseo.com/woocommerce/)