Wordpress建站教程:WooCommerce短代码的使用

2025-03-06 05:20:51


继续分享wordpress建站教程。今天悦然建站给大家分享一个WooCommerce商城插件的短代码使用方法,同时也给自己做个记录,因为之前的wordpress外贸建站项目是使用到的WooCommerce短代码,非常方便,通过短代码可以实现一般付费插件才有的效果。


WooCommerce短代码的使用案例


之前的一个wordpress外贸建站主题使用到了ELEMENTOR编辑器,网站的首页产品调用需要在ELEMENTOR编辑器中设置,如上图所示。


但是,默认情况下,免费版本的ELEMENTOR编辑器是不提供WooCommerce商城相关组件的,需要购买专业版才能使用,那要怎么办呢?接下来就可以让WooCommerce短代码登场了。其实上图的产品调用效果主要有数量、栏目、分类、产品属性、日期,而这些项目都是可以通过WooCommerce短代码来调用的的,所以我们可以使用下面的短代码来实现:


[products limit="4" columns="4" category="new-collection" cat_operator="AND" orderby="date"]


上面的category大家填写实际的产品分类就可以了。


最终效果如上图所示。通过WooCommerce短代码我们实现了只有付费插件才能达到的效果。


其实WooCommerce短代码能够实现的功能远不止这些,接下来悦然建站就把常用WooCommerce短代码和官方说明贴出来,大家可以参考一下,活学活用。


WooCommerce短代码大全


页面短代码


[woocommerce_cart]
–显示购物车页面
[woocommerce_checkout]
–显示结帐页面
[woocommerce_my_account]
–显示用户帐户页面
[woocommerce_order_tracking]–显示订单跟踪表单


购物车短代码


[woocommerce_cart]


结账短代码


[woocommerce_checkout]


我的账户短代码


[woocommerce_my_account]


订单查询短代码


[woocommerce_order_tracking]


产品展示短代码


[products]


产品展示短代码使用是最多的,我们上面的案例使用的就是它,在此基础上我们可以通过下面的属性来达到各种不同的展品展示效果。


显示产品属性



内容产品属性





补充说明:如需查看产品ID,只需进入产品表示,鼠标移动到产品上可以看到ID了。


特殊产品属性


这些属性不能与上面列出的“内容属性”一起使用,因为它们可能会引起冲突并且无法显示。您应该仅使用以下特殊属性之一。



产品调用短代码示例


1、显示随机商品


[products limit="4" columns="4" orderby="rand" class="quick-sale"]


说明:class=”quick-sale”是对应的css值,如果有可以加上,一般我们可以删除就保持默认的样式即可。


2、显示特色产品


[products limit="4" columns="4" visibility="featured"]


3、最佳销售产品


[products limit="3" columns="3" best_selling="true"]


4、最新产品


[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]


5、指定类别产品


[products limit="8" columns="4" category="hoodies,tshirts" cat_operator="AND"]


category对应的就是分类,如果你想设置除了某分类显示其他类别的产品,那么就把最后的AND改成NOT IN。


6、按照属性显示产品


[products columns="3" attribute="season" terms="warm" orderby="date"]


7、显示特定tag的产品


[products tag="hoodie"]


产品类别调用


这两个短代码可以在任何页面上显示您的产品类别。


[product_category]</code> –将显示指定产品类别中的产品。
[product_categories]</code> –将显示您的所有产品类别。


可用的产品类别属性



只显示顶级分类产品


[product_categories number="0" parent="0"]


按ID或者SKU显示产品


[product_page id="99"]
[product_page sku="FOO"]


显示相关产品


[related_products limit="12"]


以上所有WooCommerce短代码的介绍都来自网络及WooCommerce官方文档,如果还有不明白的地方大家可以直接到WooCommerce官方查看教程。

相关推荐