如何使用WooCommerce简码

WooCommerce简码（shortcode）可以让我们将产品、购物车等内容加入到页面或者文章中。我们在外贸建站时，可以直接通过Elementor Pro的Product元素块来配置产品的展示，但如果元素块或是主题无法提供所需的产品配置呢？那学习WooCommerce简码能让你自定义所需的产品展示，譬如在网站首页，以tab标签的形式展示不同类目的产品。

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Jsj8jsn-1609322552332)(https://loyseo.com/wp-content/uploads/2020/11/image-104.png “image 104 - WooCommerce简码【实例讲解】”)]

它们与本文即将介绍的简码的作用是一样的，简码是一小段代码，需要你自己撰写代码规则，相比之下，这种区块更易用。

虽然我们在制作网站页面时，不大会使用古腾堡编辑器，譬如我常用Elementor编辑器进行外贸建站，即便如此，你依旧可以在给外贸网站写博客文章时，通过这种方式插入相关的产品信息。

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

如何使用WooCommerce简码

以[woocommerce_cart]为例，它表示购物车页面。当你向页面中添加这个短代码时，那这个页面将包含购物车内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SScQBE9g-1609322552335)(https://loyseo.com/wp-content/uploads/2020/11/image-105.png “image 105 - WooCommerce简码【实例讲解】”)]

在后台给页面添加了购物车简码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4A7hbVOi-1609322552337)(https://loyseo.com/wp-content/uploads/2020/11/image-106.png “image 106 - WooCommerce简码【实例讲解】”)]

这是该页面的预览效果

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

你也可以使用Elementor编辑这个页面，给他增加一些设计样式，下图便是我用Elementor加了样式后的效果（譬如我给内容加了边框和投影，给标题添加了背景色和底部形状分隔线）。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GdjPcpii-1609322552342)(https://loyseo.com/wp-content/uploads/2020/11/image-107.png “image 107 - WooCommerce简码【实例讲解】”)]

如果你在尝试用Elementor编辑这些页面时提示无法编辑，请先前往WooCommerce的设置中取消关联再编辑，编辑完成后再建立关联。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oo5qIyF6-1609322552349)(https://loyseo.com/wp-content/uploads/2020/12/image-10.png “image 10 - WooCommerce简码【实例讲解】”)]

推荐相关教程： Elementor的Advanced高级设置教程（18个功能点）

好，接下来我们开始介绍各种WooCommerce简码及其用途、示例。

页面简码

在安装WooCommerce时，如果按照WooCommerce安装向导操作，会自动生成4个页面：我的账户、购物车、结算、商店。如果你想自行制作这些页面，只需要添加页面并加入这些简码即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yD3azJrv-1609322552351)(https://loyseo.com/wp-content/uploads/2020/11/image-108.png “image 108 - WooCommerce简码【实例讲解】”)]

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

• [woocommerce_cart] – 购物车页面

• [woocommerce_checkout] – 结算页面

• [woocommerce_my_account] – 我的账户页面

• [woocommerce_order_tracking] – 订单跟踪页面，这个页面未自动生成，你也可以自行添加。

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Gwa3WpB-1609322552353)(https://loyseo.com/wp-content/uploads/2020/11/image-109.png “image 109 - WooCommerce简码【实例讲解】”)]

购物车页面

简码：[woocommerce_cart]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t1wZY44m-1609322552355)(https://loyseo.com/wp-content/uploads/2020/11/image-111.png “image 111 - WooCommerce简码【实例讲解】”)]