WooCommerce 简码 101：您需要知道的一切

WooCommerce 提供了无数内置短代码或少量代码，可在您的网站上生成内容和完成操作。 这些即用型短代码中的许多都具有非凡的功能，可以在任何帖子或页面上添加添加到购物车按钮和产品详细信息等元素。

在此WooCommerce 简码指南中，我们涵盖了可用于您的在线商店的所有简码，以及如何添加它们的指南。

目录：

• 什么是 WordPress/WooCommerce 简码？
• 如何使用 WooCommerce 短代码
• WooCommerce 附带哪些短代码？
• WooCommerce 扩展可以提供额外的简码
• WooCommerce 短代码的替代品

什么是 WordPress/WooCommerce 简码？

简码如下所示：

 [this_is_a_shortcode]

除此之外，您可以更改这些括号内的文本以指定您希望短代码执行的操作。

但是，您不能简单地输入您想要的任何内容； 有一些特定的短代码可以在 WordPress 和 WooCommerce 插件中使用。

例如，WooCommerce 附带的一个默认短代码是：

 [products]

此简码从您的商店中提取产品库，并将它们显示在页面或您放置简码的帖子中。

WooCommerce 短代码：

• 在您的电子商务商店中生成基本操作/内容，例如将客户发送到结帐页面

或者…

• 允许店主将电子商务内容放置在其网站的任何位置，例如在博客文章中插入带有“立即购买”按钮的产品库

如果您想设置商店并在内容中插入产品，了解 WooCommerce 短代码很重要。

WooCommerce 正在远离简码（但它们仍然很重要）

虽然了解 WooCommerce 简码对于从您的商店中获得最大收益仍然很重要，但值得注意的是，WooCommerce 团队正试图摆脱简码以支持块。

自从在 WordPress 5.0 中推出块编辑器（AKA Gutenberg）以来，WooCommerce 一直在缓慢但肯定地为许多以前只能通过短代码访问的功能创建专用块。

这些块中的许多现在都可以在核心 WooCommerce 插件中使用。 如果您想要更多选项，官方 WooCommerce Blocks 插件可让您访问 WooCommerce 正在试验的所有块。

WooCommerce 块

作者：Automattic

当前版本： 7.9.0

最后更新时间： 2022 年 6 月 21 日

woo-gutenberg-products-block.7.9.0.zip

50%评级200,000+安装WP 6.0+需要

如果您想了解更多信息，请查看我们的 WooCommerce 块教程。

但是，WooCommerce 块系统仍然不如现有的短代码全面，因此了解 WooCommerce 短代码仍然很重要。

另外，如果您的网站仍然使用 Classic TinyMCE 编辑器，您将需要依赖短代码，因为 WooCommerce 块不适用于 Classic 编辑器。

如何使用 WooCommerce 短代码

WooCommerce 会在设置您的商店时自动添加一些短代码，通常用于购物车和结帐等关键页面。

要将其他短代码添加到您的站点，您可以手动复制和粘贴它们或直接输入它们。

无论您使用的是块编辑器 (Gutenberg) 还是经典的 TinyMCE 编辑器，您都可以在网站的任何位置添加 WooCommerce 短代码。 您还可以在其他区域中包含短代码，例如您的小部件。

让我们首先谈谈如何添加 WooCommerce 短代码，然后我们将分解一些最有用的短代码。

如何在块编辑器中添加 WooCommerce 短代码

首先，在 WordPress 上打开一个新的或当前的帖子或页面。

单击“ + ”图标之一以搜索内容块。 查找并选择 Shortcode 块，以便将其插入到编辑器中。

您现在必须获得一个简码以粘贴或输入到提供的字段中。

将所需的简码（我们将在本文中介绍的所有内容）放入该字段。

确保您保存或更新帖子或页面以查看结果。

转到该页面的前端或发布以查看短代码产生的内容。 在这种情况下，我们添加了一个 Products 短代码，配置为显示八种产品并按价格组织它们。

如何在经典编辑器中添加 WooCommerce 短代码

经典的 WordPress 编辑器以稍微不同的方式处理短代码。

要插入 WooCommerce 短代码，请打开页面或帖子编辑器，并确保将其设置为 Visual。

将短代码粘贴到编辑器中您想要的任何位置。

在前端，您将根据您在内容中放置的位置看到正在运行的短代码。

在简码中使用参数

有时称为“参数”或“属性”或“参数”，简码参数允许开发人员和网站所有者从使用的简码呈现更具体的内容。

例如，您可以采用以下“id”参数：

并将其添加到以下短代码中：

 [add_to_cart]

制作：

 [add_to_cart]

因此，带有该短代码的页面会显示 ID 为 #25 的产品的“添加到购物车”按钮：

如果有人单击该按钮，它将将该特定产品添加到他们的购物车中：

并非所有 WooCommerce 短代码都允许参数，但有些需要它们。 以下是您可以尝试使用 WooCommerce 短代码的一些参数示例：

• limit=""：例如limit="5" 只显示五个产品
• id=""：根据 ID 显示特定产品，如 id="10"
• orderby=""：用于按日期、id、评级、标题、流行度、menu_order 或 rand（随机）组织产品列表。
• attribute=""：用于根据属性 slug 抓取项目
• columns=""：在产品库中设置一定数量的列

您可以在括号内添加这些，但在短代码文本的末尾，用等号和引号来保存值，如下所示：

 [products columns="3" orderby="popular"]

WooCommerce 附带哪些短代码？

WooCommerce 需要四个短代码才能正常运行，其中三个是在安装 WooCommerce 后自动添加的。

他们是：

• 购物车页面简码
• 结帐页面简码
• 我的帐户页面短代码
• 订单跟踪页面简码

WooCommerce 将其中三个短代码添加到 WordPress 的所有页面部分的自动生成页面中。

以下是每个 WooCommerce 短代码、每个短代码的功能，以及它是否已安装在页面上。

WooCommerce 购物车页面短代码

购物车页面简码如下所示：

 [woocommerce_cart]

目的

购物车页面简码在您的购物车页面上显示 WooCommerce 购物车，其中包含客户的详细信息，例如添加到购物车的产品、数量、定价和总计。

这是安装 WooCommerce 后自动添加到页面的简码之一。

例子

如果没有购物车页面简码，以下任何元素都不会出现在客户面前。

它有论据吗？

不。

WooCommerce Checkout 简码

结帐页面简码如下所示：

 [woocommerce_checkout]

目的

Checkout 简码在您的网站上呈现电子商务结帐页面，显示字段供客户输入联系和付款信息，同时还可以再次查看他们的订单。

安装 WooCommerce 后，此简码会收到自己的自动页面。

例子

Checkout 短代码生成从名称字段到订单信息和付款字段到“下订单”按钮的所有内容。

它有论据吗？

不。

我的帐户页面短代码

我的帐户页面短代码如下所示：

 [woocommerce_my_account]

目的

这个 WooCommerce 简码在您的网站上为客户提供了一个页面来管理他们的帐户信息，其中包含以下部分：

• 更改联系信息
• 调整密码
• 编辑付款方式
• 查看过去的订单
• 登录/退出帐户

请记住，我的帐户短代码没有自己的自动生成页面，因此您必须自己制作。

例子

根据您的配置，您可能在“我的帐户”页面上有其他选项卡，用于订阅和下载等内容。

它有论据吗？

是的。

• 当前用户

WooCommerce 订单跟踪短代码

订单跟踪简码如下所示：

 [woocommerce_order_tracking]

目的

此短代码为商家和客户创建一个页面，以使用承运人代码跟踪货件。

您必须创建一个新页面才能显示在您的在线商店中。

例子

为了使订单跟踪短代码起作用，您必须在您的交易电子邮件中发送跟踪 ID。

它有论据吗？

不。

WooCommerce 产品简码

产品简码如下所示：

 [products]

目的

也许是所有 WooCommerce 简码中最强大的，产品简码可让您显示您想要从库存中获得的任何商品，同时还可以根据以下内容更具体地了解您的选择：

• 库存单位
• 类别
• 属性
• 产品编号

它对于显示您拥有多个项目的产品画廊也很有用，它们的图像、标题和购买按钮都按列组织。

例子

此产品短代码提供了一组带有参数的项目，以在五列中显示十个项目的限制，并按最受欢迎的排序。

它有论据吗？

是的，比 WooCommerce 中的任何其他短代码都多。

Products 短代码的一些流行参数包括：

• 限制
• 列
• 订购
• 品类
• 标签
• 最畅销
• 命令
• 班级
• 属性
• 身份证
• 类别

WooCommerce 的产品页面简码

产品页面简码如下所示：

 [product_page]

但它依赖于额外的 ID 或 SKU 信息，因此在您包含以下内容之前，上述短代码实际上不会起作用：

 [product_page]

或者：

 [product_page sku="F12345"]

目的

产品页面简码与产品简码的不同之处在于它显示了完整的单个产品页面，而不是预览或项目集合。

例子

如您所见，此简码显示了您选择的任何一个产品页面的全部内容，而不仅仅是图像、标题和添加到购物车按钮（这是您从产品简码中获得的）。

它有论据吗？

是的，所需的 ID 或 SKU 参数。

WooCommerce 的相关产品简码

相关产品简码如下所示：

 [related_products]

目的

它旨在将相关产品的画廊放置在现有产品页面的任何位置，或任何带有某种产品信息的页面上。

如果没有可参考的产品，短代码将无法找到相关项目。

例子

我们在产品页面的描述中放置了一个相关产品简码，并包含一个限制参数 5。

这会在描述的正下方放置一个相关产品的画廊。

它有论据吗？

是的：

• 限制
• 列
• 订购

WooCommerce 的产品类别简码

产品类别简码如下所示（用于显示特定类别中的项目）：

 [product_category]

另一个版本的简码显示您的产品类别列表：

 [product_categories]

目的

这些简码根据指定的类别或只是您的类别列表提取产品。

请记住，您必须实际配置类别才能使其正常工作。

例子

此示例使用带有简单参数category=“clothing” 的 Product Category 短代码。

产品类别简码提供了不同的结果，其中包含您的类别、图片和产品数量的列表。

它有论据吗？

是的，很多：

• 命令
• 订购
• hide_empty
• 类别
• 身份证
• 限制
• 列
• 父母

添加到购物车

WooCommerce 有两个“添加到购物车”短代码，其中一个如下所示：

 [add_to_cart]

另一个是：

 [add_to_cart_url]

两者都需要 sku 或 id 参数才能起作用。

目的

一般的“添加到购物车”简码会提取产品的价格并将其显示在“添加到购物车”按钮旁边。

添加到购物车 URL 短代码显示您选择的项目的产品页面 URL，并将其放置在“添加到购物车”按钮上。

如果您无法让“添加到购物车”按钮出现在某处或无法替换另一个按钮（例如“立即购买”按钮），则可能需要这两个简码。 您很可能会将它们与产品图片配对，因为短代码仅显示按钮。

例子

[add_to_cart]

这个带有产品 id 参数的简码产生以下内容。

如您所见，它显示了价格和一个按钮。

另一方面，添加到购物车 URL 短代码仅生成所述产品的 URL。

它有论据吗？

是的：

• ID
• 库存单位
• 风格
• 显示价格
• 班级
• 数量

添加到购物车 URL 短代码的内容更少：

• ID
• 库存单位

WooCommerce 的商店消息短代码

Shop Messages 短代码如下所示：

 [shop_messages]

目的

这是一个方便的短代码，用于在非 WooCommerce 页面上显示内置的 WooCommerce 消息。

它通常仅在与另一个短代码配对时才有用，例如，如果您要在非 WooCommerce 页面上放置“添加到购物车”按钮，但仍需要一条消息说“该产品已添加到您的购物车”。

例子

Shop Messages 简码通常需要合作伙伴简码作为触发器。 添加到购物车简码就是一个很好的例子。

然后用户必须采取行动来触发消息。

这是一个非 WooCommerce 页面，因此短代码现在显示了有关正在添加到购物车的产品的内置 WooCommerce 消息。

注意：如果您在查看商店消息时遇到问题，请转到WooCommerce > 设置 > 产品 > 常规，然后取消选中“启用 AJAX 添加到存档上的购物车按钮”复选框。

它有论据吗？

不。

不使用 WooCommerce 短代码的预建页面

在 WordPress 的“所有页面”部分中，您会注意到来自 WooCommerce 的其他一些自动生成的页面，其中包含用于运行在线商店的特殊标签。

这些包括：

• 隐私政策页面
• 退款和退货政策页面
• 店铺页面

尽管它们是在安装 WooCommerce 后默认创建的，但这些页面的工作方式与结帐和我的帐户页面等带有简码的页面不同。

相反，他们使用其他方法来显示内容，例如帖子模板和简单的预加载文本。 它们可以帮助您加快整体设计过程，但您不应该期望在这些页面上看到任何短代码。

WooCommerce 扩展可以提供额外的简码

WooCommerce 已经拥有强大的短代码集合供您插入和管理，但第三方插件通常会提供更多短代码来增强您使用 WooCommerce 的开发体验。

例如，WooCommerce 产品搜索扩展具有用于更灵活产品搜索的简码，包括：

• woocommerce_product_search：在您网站的任何位置显示产品搜索字段
• woocommerce_product_filter_price：显示价格的产品搜索过滤器
• woocommerce_product_filter_sale：用于按销售项目过滤
• woocommerce_product_filter_category：用于在搜索字段中按产品类别过滤

WooCommerce 短代码的替代品

如果您发现 WooCommerce 短代码令人困惑，您有两种主要的选择来控制商店的内容。

WooCommerce 块

首先，您可以使用我们之前提到的官方 WooCommerce 块。 这些块旨在模仿您使用短代码获得的相同功能，但为您提供更用户友好的内容处理方法，因为您可以从可视化编辑器中完成所有操作。

同样，这些块中的许多块现在都内置于核心 WooCommerce 插件中，但您也可以通过安装 WooCommerce 块插件来访问其他实验块。

页面构建器插件

或者，您可以使用流行的页面构建器，例如 Elementor 和 Beaver Builder。

在使用 WooCommerce 时，Elementor Pro 可能是最强大的页面构建器之一。 除了用于以不同方式显示产品的多个块之外，您现在还可以获得专用的购物车和结帐小部件，它们可以替换这些页面的 WooCommerce 短代码。

除了简化事情之外，您还可以使用 Elementor 完全自定义这些页面的设计，这不是您可以仅使用简码完成的事情。

️ 要了解更多信息，请查看我们的 Elementor 评论。

开始使用 WooCommerce 短代码

今天就试一试，享受对商店内容的更多控制。

您对 WooCommerce 短代码有疑问吗？ 请在评论中告诉我们！