WooCommerce 简码:初学者完整指南
已发表: 2023-04-07如果您是 WooCommerce 的新手,您可能已经注意到购物车页面上有以下图片:

这是购物车页面的WooCommerce 简码。 购物车和结帐页面等默认页面使用短代码为页面提供功能。
WooCommerce 提供了一个空白画布,您可以自行设计页面并添加小部件或按钮。 但是创建和定制在线商店可能具有挑战性,尤其是对于初学者而言。 短代码是您正在寻找的可取之处。 它们为用户提供了一种插入内容或更改内容显示方式的简单方法。
在本文中,我们将讨论:
- 什么是 WooCommerce 简码?
- 你如何使用简码?
- 有哪些重要的简码?
到本文结束时,您将了解有关短代码的所有信息以及如何使用它们。
TL;DR :WooCommerce 短代码是简单的代码片段,有助于改变页面或帖子的外观。 简码控制查看产品列表、结帐表格等信息的方式。 它减少了对复杂编码的需求,并使更改页面功能变得容易。
一开始,短代码似乎会让初学者感到困惑。 很难说出它们的用途,因为您所看到的只是代码,称为处理程序函数。 您必须预览页面才能看到他们添加的功能。 以下是短代码与它们的作用的一些图像。

WooCommerce 短代码用于将产品列表、购物车、结帐表格、帐户信息和其他电子商务相关元素添加到您网站的页面和帖子中。
在我们开始之前,我们必须注意这些可能是很大的变化。 我们建议首先使用 BlogVault 进行备份。 备份是保护您的工作的安全网,以防更改出错。
随着您构建站点的进展,BlogVault 还具有暂存站点功能,可帮助您安全地测试主要更改。 这是在不影响您已在网站上完成的工作的情况下更改网站核心页面布局的好方法。 现在,让我们深入了解您需要了解的有关 WooCommerce 简码的所有信息。
什么是 WooCommerce 简码?
WooCommerce 短代码是执行特定功能的代码片段。 它包含在方括号中,并添加到帖子或页面以更改其外观或工作方式。 它还可以帮助您插入动态内容。 这些内容会根据某人与页面的交互方式而变化。
如果您熟悉插件,短代码和插件听起来可能很相似。 但是,它们有不同的用途。 短代码将特定功能或内容添加到帖子或页面。 它自定义站点上已存在的内容的显示。 安装并激活插件以添加影响整个站点的新功能。 它们在您网站的不同方面提供帮助,例如管理或设计,并且在功能方面更为复杂。
你如何使用 WooCommerce 简码?
要使用 WooCommerce 简码,只需将简码插入页面或发布您希望内容或功能出现的位置,然后保存或发布页面。 查看页面时,短代码将替换为它代表的实际内容或功能。
我们之前提到过短代码是预定义的代码片段。 这意味着他们的目标已经在您的站点文件中设定。 您只需要知道添加它的简码的处理函数即可。 处理程序函数是您在方括号之间写的一段文本。 我们在本文后面列出了最有用的处理程序函数。 您还可以查看 WooCommerce 文档以获取更多信息,或者询问 WordPress 社区是否有针对特定任务的简码。
知道句柄后,以下是将短代码添加到页面或帖子的步骤:
- 编辑页面或帖子:在您的仪表板上,根据您要编辑的内容单击帖子或页面。 然后将鼠标悬停在右侧页面或帖子上,然后单击“编辑”。 这将打开页面编辑器。

- 添加简码处理函数:在需要添加简码的地方,点击左上角的+号,搜索简码。 这添加了短代码块。 现在,添加处理函数。 例如,帐户页面的 WooCommerce 简码是 [woocommerce_my account]。 这是一张图片,显示了我是如何添加它的。


一些简码也有属性,比如产品简码。 我们还将通过具体示例介绍这些内容。
- 发布或更新帖子:完成后,预览页面或帖子,然后单击发布或更新。 恭喜,您刚刚在页面中添加了简码。

注意:如果删除短代码,该功能也会消失。 例如,如果您删除 [woocommerce_cart] 短代码,该页面将不再具有购物车功能。 所以要小心并使用暂存站点来测试对您的页面或帖子的更改。
最有用的 WooCommerce 简码列表
有许多 WooCommerce 短代码可用于不同目的,以下是您的 WooCommerce 网站的基本要素:
WooCommerce 购物车简码:
大车
[woocommerce_cart]
此短代码显示购物车的内容,包括产品缩略图、名称、价格、数量和小计。 它具有允许您自定义输出的各种参数,例如列、show_shipping、show_coupon、show_totals 和 button_text。
示例:[woocommerce_cart columns=”2″ show_shipping=”true” show_coupon=”true” button_text=”Proceed to Checkout”]
这将显示包含 2 列的购物车、运输选项、优惠券代码字段和带有文本“继续结帐”的结帐按钮。
购物车总计
[woocommerce_cart_total]
此简码显示购物车的总价。 它有类和之前的参数。
示例:[woocommerce_cart_total class=”my-cart-total” before=”Total: “]
这将显示带有自定义类别和前缀“总计:”的购物车总价。
购物车优惠券
[woocommerce_cart_coupon
此简码显示购物车页面上的优惠券代码字段。 它具有类和占位符等参数
示例:[woocommerce_cart_coupon class=”my-cart-coupon” placeholder=”Enter coupon code”]
这将在购物车页面上显示带有自定义类和自定义占位符文本的优惠券代码字段。
购物车运输
[woocommerce_cart_shipping]
此简码显示购物车页面上的送货选项。 它有类和之前的参数。
示例:[woocommerce_cart_shipping class=”my-cart-shipping” before=”Shipping: “]
这将在带有自定义类别和前缀“Shipping:”的购物车页面上显示运输选项。
购物车内容
[woocommerce_cart_contents]
此短代码将购物车的内容显示为表格。 它具有类、之前和之后等参数。
示例:[woocommerce_cart_contents class=”my-cart-contents” before=”<table>” after=”</table>”]
这会将购物车的内容显示为带有自定义类和自定义前/后 HTML 标记的表格。
WooCommerce 结帐简码
查看
[woocommerce_checkout]
此短代码显示结帐表单,其中包含客户完成购买所需的所有字段。 它具有 order_review、terms、privacy_policy 和 login_form 等参数。
示例:[woocommerce_checkout order_review=”false” terms=”true” privacy_policy=”true” login_form=”false”]
这将显示没有订单审查部分的结帐表单,但带有条款和隐私政策复选框。
其他自定义结帐页面的短代码是:
结帐和购物车
[woocommerce_checkout_cart]
此短代码在结帐页面上显示购物车的内容。 它具有 show_shipping、show_coupon 和 show_cart 等参数。
示例:[woocommerce_checkout_cart show_shipping=”true” show_coupon=”false” show_cart=”false”]
这将在结帐页面上显示购物车的内容和运输选项,但没有优惠券代码字段或购物车总数。
结帐订单审核
[woocommerce_checkout_order_review]
此短代码显示结帐页面上的订单审查部分,包括产品列表、运输信息和总价。 它具有 show_shipping、show_coupon 和 show_cart 等参数。
示例:[woocommerce_checkout_order_review show_shipping=”false” show_coupon=”false” show_cart=”false”]
这将仅在结帐页面上显示订单审查部分,而没有运输、优惠券或购物车部分。
结帐字段
[woocommerce_checkout_fields]
此短代码显示特定的结帐字段,例如帐单和送货地址、付款方式和订单备注。 它具有诸如顺序、字段和必需的参数。
示例:[woocommerce_checkout_fields order=”billing,shipping”字段=”first_name,last_name,email,phone” required=”first_name,last_name,email”]
这将显示名字、姓氏、电子邮件和电话的账单和运输字段,并要求填写名字、姓氏和电子邮件字段
WooCommerce 订单跟踪表单简码
订单追踪表格
[woocommerce_order-tracking]
添加客户跟踪订单的功能。
WooCommerce 用户帐户简码
用户帐号
[woocommerce_my_account]

使客户能够更改他们的个人帐户详细信息。
WooCommerce 产品简码
产品
[产品]
此简码显示带有分页和排序选项的产品网格。 它具有各种参数,可让您自定义输出,例如类别、标签、限制、列、orderby 和 order。
例子:[products limit=”4″ columns=”2″ orderby=”price” order=”asc”]
这将在 2 列中显示 4 个产品,按价格升序排序
产品分类
[产品分类]
此短代码显示来自特定产品类别的产品网格。 它具有类似于 [products] 简码的参数,例如 limit、columns、orderby 和 order
示例:[product_category category=”clothing” limit=”6″ columns=”3″]
这将在 3 列中显示来自“服装”类别的 6 件产品。
存货单位
[products_by_sku]
此简码显示基于其 SKU(库存单位)的产品网格。 它具有 skus 和 limit 等参数。
示例:[products_by_sku skus=”ABC123, DEF456, GHI789″ limit=”3″
这将显示 3 种产品,SKU 分别为“ABC123”、“DEF456”和“GHI789”。
最近的产品
[最近的产品]
此短代码显示最近添加的产品的网格。 它具有限制和列等参数。
示例:[recent_products limit=”8″ columns=”4″]
这将在 4 列中显示 8 个最近添加的产品。
最畅销
[best_selling_products]
此简码显示最畅销产品的网格。 它有 limit 和 columns 等参数
示例:[best_selling_products limit=”10″ columns=”5″]
这将在 5 列中显示 10 种最畅销的产品。
单品
[产品]
此短代码按 ID 显示单个产品。 它有id、sku等参数。
示例:[产品 id=”123″]
这将显示 ID 为 123 的产品。
产品属性
[产品属性]
此简码显示基于特定产品属性的产品列表。 它具有属性、术语、运算符、限制和列等参数。
示例:[product_attribute attribute=”color” terms=”red” operator=”OR” limit=”6″ columns=”3″
这将在 3 列中显示最多 6 种具有“红色”颜色属性的产品。
特色产品
[特色产品]
此简码显示特色产品网格。 它有 limit 和 columns 等参数
示例:[featured_products limit=”8″ columns=”4″]
这将在 4 列中显示最多 8 种特色产品。
产品标签
[产品标签]
此短代码显示产品标签列表,其中包含指向相应产品档案的链接。 它具有 exclude、orderby 和 order 等参数。
示例:[product_tags exclude=”15,20″ orderby=”count” order=”DESC”]
这将显示按与每个标签关联的产品数量排序的产品标签列表,不包括 ID 为 15 和 20 的标签。
产品页面
[产品_页面]
此短代码显示特定产品的产品页面。 它具有参数,例如 id。
示例:[product_page id=”123″]
这将显示 ID 为 123 的产品的产品页面。
产品评论
[产品评论]
此短代码显示特定产品的评论列表。 它有 id 和 limit 等参数。
示例:[product_reviews id=”123″ limit=”5″]
这将显示 ID 为 123 的产品的最多 5 条评论。
产品描述
[woocommerce_product_description]
此简码显示产品描述
价格
[woocommerce_product_price]
此短代码显示产品的价格。
产品库存
[woocommerce_product_stock]
此简码显示产品的库存状态,例如“有货”或“缺货”。
最近的产品
[最近的产品]
显示新闻产品发布
评分最高
[top_rated_products]
显示您网站上评分最高的产品
产品类别
[产品类别]
显示您设置的所有产品类别。
产品过滤器
[woocommerce_product_filter]
这有助于您为客户可以用来对您的列表进行排序的产品添加过滤器。
如何对 WooCommerce 简码进行故障排除?
如果您遇到 WooCommerce 简码问题,请不要担心。 以下是您可以采取的一些故障排除步骤:
- 仔细检查 WooCommerce 插件:检查是否安装并激活了 WooCommerce 插件。 没有 WooCommerce,短代码将无法工作。
- 验证短代码语法:检查 WooCommerce 文档以了解正确的语法。 下划线在正确的地方吗? 你在使用方括号吗? 这是至关重要的。
- 检查是否有冲突的插件:有时,它可能是另一个插件。 您网站上的其他插件可能会干扰短代码的工作方式。 尝试一一禁用其他插件,看看问题是否已解决。 您还可以查看插件评论,看看是否有人抱怨冲突。
- 切换到默认主题:很像插件,你也可以有一个冲突的主题。 切换到默认的 WordPress 主题以查看问题是否已解决。
- 联系 WooCommerce 支持:如果这些步骤都不能解决问题,请联系 WooCommerce 支持以获得进一步帮助。 他们将能够帮助您更详细地解决问题。
为什么短代码有用?
我们喜欢短代码,以下是我们推荐它的一些原因:
- 节省时间:它们为您节省了添加自己的代码来自定义商店页面的时间和精力。 只需添加 [woocommerce_cart] 而不是编写更改页面布局的代码要容易得多。
- 易于使用:它非常适合初学者。 只需复制简码即可。 它几乎比安装你需要的插件更容易
- 无需编码:无需编码知识。 您所需要的只是了解处理函数的语法。
- 初学者的完全控制:您可以使用短代码完全控制页面设计。 您可以自定义所有关键电子商务页面的各个方面,例如购物车、产品和结帐。
WooCommerce 短代码的替代品
如果您还没有找到适合您需要的简码,这里有一些替代方案:
- WooCommerce 小部件:WooCommerce 有自己的使用块编辑器的小部件。 要使用它,请转到您的仪表板,单击侧栏中的外观,然后单击小部件。 您可以通过单击左上角的 + 搜索所需的小部件,然后拖放所需的小部件。
- WooCommerce 块: 这是一个可以免费安装的插件。 它为特色产品和过滤产品提供了 20 多个新块。
- 页面构建器插件:我们最喜欢的是 Elementor,因为它拥有庞大的资源、模板和主题库。 如果 Elementor 不是您的菜,还有 Gutenberg、Divi、WPBakery 和 Beaver Builder。
- 自定义代码:如果您具备编码知识,自定义代码显然是一种选择。 您可以编写自定义干净的代码。 WordPress 社区一直在讨论干净代码是否比自定义代码更好。 在我们看来,一个并不比另一个更好。 它们只是服务于不同的目的。 短代码专为想要在没有编码知识的情况下自定义其网站的初学者而设计。 干净的代码是开发人员确保他们的网站可扩展、可维护且易于协作的方式。
最后的想法
我们希望我们已经向您展示了 WooCommerce 短代码对初学者来说有多么棒。 它们是建立适合您品牌的电子商务商店的绝佳工具。 但是,就像您对 WooCommerce 商店所做的任何其他更改一样,我们建议您首先测试您在暂存站点上所做的更改。 这样您就可以在最终确定之前测试布局和页面设计。 BlogVault 有一个令人惊叹的暂存站点功能,既适合初学者又可以快速设置。
常见问题
我如何使用 WooCommerce 简码?
要使用短代码,编辑页面或帖子,然后在正确的位置添加短代码处理函数并单击更新或发布。 例如,如果您想将 WooCommerce Cart 短代码添加到页面,请编辑页面并编写以下内容:[woocommerce_cart]。 然后单击发布或更新。
我如何获得 Woocommerce 简码?
WooCommerce 简码是具有预定义功能的代码片段。 您只需要知道处理程序函数,然后将其添加到页面即可。 将鼠标悬停在页面或帖子上,单击编辑,然后添加简码。 例如,您可以添加 [woocommerce_checkout] 以将结帐表单添加到页面。 然后,单击发布或更新。
什么是 WooCommerce 简码?
WooCommerce 短代码可帮助用户对其 WooCommerce 商店进行功能更改。 它们是占位符,在显示页面时会替换为动态内容。 它们可用于显示产品、定价和其他信息,使它们成为 WooCommerce 网站所有者的有用工具。
如何使用简码来设计我的 WooCommerce 页面?
要使用短代码,请将所需的短代码插入页面编辑器。 查看页面时,短代码将自动生成所需的内容