其他分享
首页 > 其他分享> > 如何使用WooCommerce简码

如何使用WooCommerce简码

作者:互联网

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

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

image 104 - WooCommerce简码【实例讲解】

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

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

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

如何使用WooCommerce简码

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

image 105 - WooCommerce简码【实例讲解】

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

image 106 - WooCommerce简码【实例讲解】

这是该页面的预览效果

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

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

image 107 - WooCommerce简码【实例讲解】

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

image 10 - WooCommerce简码【实例讲解】

推荐相关教程: Elementor的Advanced高级设置教程(18个功能点)

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

页面简码

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

image 108 - WooCommerce简码【实例讲解】

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

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

image 109 - WooCommerce简码【实例讲解】

购物车页面

简码:[woocommerce_cart]

image 111 - WooCommerce简码【实例讲解】

结算页面

简码:[woocommerce_checkout]

image 112 - WooCommerce简码【实例讲解】

我的账户页面

简码:[woocommerce_my_account]

image 113 - WooCommerce简码【实例讲解】

订单跟踪页面

简码:[woocommerce_order_tracking]

image 110 - WooCommerce简码【实例讲解】

产品简码

你可以使用产品简码在页面、文章、产品详情中插入产品。产品简码是products,你需要在简码中加入各种属性组合,以便实现你想要展示的产品信息,我们继续往下看。

我们先看一个示例,譬如:展示6个卖的最好的促销产品,每行3个产品,它的简码如下。注意:下面的图例中的展示效果与主题强相关,主题不同看到的“皮肤”不同哦。

[products limit="6" columns="3" orderby="popularity"  on_sale="true"]

image 114 - WooCommerce简码【实例讲解】

用简码存在的一个问题是,产品展示的外观取决于你用的主题,无法在Elementor中对简码进行样式上的细致修改,但能做一些整体的设置,譬如内外间距、背景、边框等等。

image 115 - WooCommerce简码【实例讲解】

如果你想对细节进行样式修改,那么建议你不要用简码,而是购买一个Elementor Pro,使用它的Product元素来自定义样式。

image 116 - WooCommerce简码【实例讲解】

接下来我们介绍一下可供使用的产品属性

产品属性

以下属性可与Products简码一起使用。

展示类产品属性

image 118 - WooCommerce简码【实例讲解】

内容类产品属性

示例:

按颜色属性(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"]

image 1 - WooCommerce简码【实例讲解】

image 5 - WooCommerce简码【实例讲解】

示例:只展示产品标签里带有demo的产品

[products tag="demo"]

image 6 - WooCommerce简码【实例讲解】

image 4 - WooCommerce简码【实例讲解】

注意:如果你所选的产品未展示,请确保它们的可见性没有被设置为“隐藏”。

进阶示例

我以前在建站时,会遇到这种需求:用标签切换的形式展示不同类目的产品(见下方视频)。但Elementor Pro里不提供这种形式的产品元素块,学习了WooCommerce简码,我们就能用tab类元素块+简码来实现。

Elementor免费版就提供了3种标签切换元素块,上图用到的是tabs。

image 8 - WooCommerce简码【实例讲解】

你只需要将简码放到tab的内容里即可,如下图所示,如果在编辑模式下无法看到效果,请update页面后预览。

image 9 - WooCommerce简码【实例讲解】

产品分类简码

下面这两个简码能够在任何页面上展示产品分类

产品分类属性

image 15 - WooCommerce简码【实例讲解】

产品分类简码示例

展示指定的多个产品分类,并按照所选的产品分类id排序

[product_categories ids="16,17,19,18"  orderby="include"]

image 14 - WooCommerce简码【实例讲解】

展示2个有产品的一级产品分类

[product_categories limit="2" parent="0"]

image 12 - WooCommerce简码【实例讲解】

展示指定分类下的所有产品

[product_category category="clothing"]

image 13 - WooCommerce简码【实例讲解】

这个代码我放到了不同主题里效果不同,有些主题下展示的样貌惨不忍睹つ﹏⊂,目前porto主题的预览效果不错。

产品页面简码

按ID或SKU显示一个完整的产品页面。(虽然我也想不到这个的常见使用场景,譬如在博客文章里直接插入产品?emm..也是可以的哈)

[product_page id="16"]

[product_page sku="99"]


![image 16 - WooCommerce简码【实例讲解】](https://loyseo.com/wp-content/uploads/2020/12/image-16.png "image 16 - WooCommerce简码【实例讲解】")

相关产品简码
------

[related_products limit=”12″]


这个简码通常用于放在产品页面,主题通常都会配置展示相关产品的功能。

加入购物车简码
-------

按产品ID显示单个产品的价格和“添加到购物车”按钮。

![image 17 - WooCommerce简码【实例讲解】](https://loyseo.com/wp-content/uploads/2020/12/image-17.png "image 17 - WooCommerce简码【实例讲解】")

在非WooCommerce的页面上显示WooCommerce通知
--------------------------------

shop_messages简码允许您在非WooCommerce页面上显示WooCommerce通知(如“产品已添加到购物车”)。

当您使用其他简短代码(如add\_to\_cart)并希望用户对其操作获得一些反馈时,这将非常有用。

![image 19 - WooCommerce简码【实例讲解】](https://loyseo.com/wp-content/uploads/2020/12/image-19.png "image 19 - WooCommerce简码【实例讲解】")

简码

![image 18 - WooCommerce简码【实例讲解】](https://loyseo.com/wp-content/uploads/2020/12/image-18.png "image 18 - WooCommerce简码【实例讲解】")

效果示例

常见注意事项
------

*   建议在编辑器的文本模式下加入简码,而不是可视化模式
    

![此图像的alt属性为空;文件名为image-9.png](https://loyseo.com/wp-content/uploads/2020/12/image-9.png "image 9 - WooCommerce简码【实例讲解】")

![image 20 - WooCommerce简码【实例讲解】](https://loyseo.com/wp-content/uploads/2020/12/image-20.png "image 20 - WooCommerce简码【实例讲解】")

*   注意简码的双引号是英文符号””,而非中文的双引号“”

本文首发于:https://loyseo.com/woocommerce-shortcodes/

推荐阅读:
[WooCommerce教程](https://loyseo.com/woocommerce/)
> 本文原文由[LOYSEO](https://loyseo.com) 发布,LOYSEO专注于WordPress外贸网站建设教程、Elementor教程。

标签:WooCommerce,展示,image,如何,简码,产品,页面
来源: https://www.cnblogs.com/loyseo/p/14212729.html