🚀 Is building a website too difficult? Let me guide you step by step—Learn about the 「Naibabiji WordPress Website Building Coaching Service」 →

Complete WooCommerce Shortcode Collection: Display Product Information from Anywhere

ThisWooCommerce Tutorialintroduces how to use shortcodes to call WooCommerce product data. These shortcodes are all supported by WooCommerce by default, and you can call them in any Post or Page.

How to Use Shortcodes

古腾堡编辑器短代码

If you are using the Gutenberg editor, then when writing an article or page, find the Shortcode block.

古腾堡编辑器短代码

Then simply enter the corresponding shortcode.

If you are using the Classic Editor, then directly copy and paste the shortcode.

WooCommerce Shortcode

Next, let's summarize the shortcodes supported by WooCommerce.

Page Shortcodes

[woocommerce_cart]– Display Cart Page
[woocommerce_checkout]– Display Checkout Page
[woocommerce_my_account]– Display User Account Page
[woocommerce_order_tracking]– Display Order Tracking Form

Cart Shortcode

[woocommerce_cart]

Checkout

[woocommerce_checkout]

My Account

[woocommerce_my_account]

Order Tracking

[woocommerce_order_tracking]

Product Display

[products]

Products can be configured with values to achieve specified product displays.

Display Product Attributes

  • limit– The number of products to display.-1 Defaults to 'and' (all) when listing products.-1Display), category (show all).
  • columns– Number of columns to display. Default is4
  • paginate– Toggle pagination. Used in conjunction withlimit. DefaultfalseSettingstrueis paginate.
  • orderby– Sort displayed products by the entered options. One or more options can be passed by adding a space between two slugs. Available options are:
    • date– Date the product was published.
    • id– The product's Post ID.
    • menu_order– Menu order (if set) (small numbers displayed first).
    • popularity– Purchase quantity.
    • rand– Randomly order products on page load (may not work on sites using caching, as it can save a specific order).
    • rating– Average product rating.
    • title– Product title. This is the defaultorderbymode.
  • skus– Comma-separated list of product SKUs.
  • category– Comma-separated list of category slugs.
  • tag– Comma-separated list of tag slugs.
  • order– Indicates whether the product order is ascending (ASC) or descending (DESCorderbyusing the method set in. Default isASC
  • class– Add HTML wrapper classes so you can modify specific outputs with custom CSS.
  • on_sale– Retrieve special offer products. Do not use withbest_sellingor in combination with top_rated
  • best_selling– Retrieve best-selling products. Do not use withon_sale or in combination with top_rated
  • top_rated– Retrieve top-rated products. Do not use withon_saleor in combination with best_selling

Content Product Attributes

  • attribute– Retrieve products using the specified attribute slugs.
  • terms– A comma-separated list of attribute terms to use withattribute
  • terms_operator– Operator to compare attribute terms. Available options are:
    • AND– Will display products that have all selected attributes.
    • IN– Will display products that have any of the selected attributes. This is the defaultterms_operatorvalue.
    • NOT IN– Will display products that are not in the selected attributes.
  • tag_operator– Operator to compare tags. Available options are:
    • AND– Will display products that have all selected tags.
    • IN– Will display products that have the selected tags. This is the defaulttag_operatorvalue.
    • NOT IN– Will display products that are not in the selected tags.
  • visibility– Will display products based on the selected visibility. Available options are:
    • visible– Products visible in both the shop and search results. This is the defaultvisibilityoption.
    • catalog– Products visible only in the shop, but not in search results.
    • search– Products visible only in search results, but not in the shop.
    • hidden– Products hidden in both the shop and search, accessible only via direct URL.
    • featured– Products marked as featured products.
  • category– Retrieve products using the specified category block.
  • tag– Retrieve products using the specified tag slug.
  • cat_operator– Operator for comparing category terms. Available options are:
    • AND– Products belonging to all selected categories will be displayed.
    • IN– Products within the selected categories will be displayed. This is the default.cat_operatorvalue.
    • NOT IN– Products NOT in the selected categories will be displayed.
  • ids– Products will be displayed based on a comma-separated list of Post IDs.
  • skus– Products will be displayed based on a comma-separated list of SKUs.
查看产品的ID

On the product list page, hover your mouse over a product to see an ID value, which is the corresponding product ID.

Special Product Attributes

These attributes cannot be used together with the „Content Attributes“ listed above, as they may cause conflicts and fail to display. You should use only one of the following special attributes.

  • best_selling– Will showcase your best-selling products. Must be set totrue
  • on_sale– Will display your products on sale. Must be set totrue

Product Call Shortcode Examples

1. Display Random Products

随机商品展示
[products limit="4" columns="4" orderby="rand" class="quick-sale" on_sale="true"]

'quick-sale' is the corresponding CSS value, allowing you to design the style yourself.

2. Featured Products

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

Limit shows 4, columns display as 2 columns.

3. Best Selling Products

WooCommerce最佳销售商品
[products limit="3" columns="3" best_selling="true"]

Display 3, shown in 3 columns.

4. Latest Products

[products limit="4" columns="4" orderby="date" order="DESC"]

5. Products from Specified Categories

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

'category' corresponds to the category. If you want to display products from categories other than a specific one, change the final 'IN' to 'NOT IN'.

6. Display Products by Attribute

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

7. Display Products with Specific Tags

[products limit="12" columns="4" tag="hoodie"]

Product Category Calls

These two shortcodes can display your product categories on any page.

  • [ product_category]– Will display products from the specified product category.
  • [ product_categories]– Will display all your product categories.

Available Product Category Attributes

  • ids– Specify the specific category ID to list.
  • limit– Number of categories to display.
  • columns– Number of columns to display. Default is 4
  • hide_empty– Default value is „1“, which will hide empty categories. Set to „0“ to display empty categories
  • parent– Set to a specific category ID if you want to display all subcategories
  • orderby– Default sorting is by „name“. Can be set to „id“, „slug“, or „menu_order“. If you want to order by specified IDs, you can useorderby="include"
  • order– Using the method set in, indicates whether category order is ascending (ASC) or descending (DESCorderbyusing the method set in. Default isASC

Demo 1: Display only top-level category products

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

Demo 2: Display products by ID or SKU

[product_page id="99"]
[product_page sku="FOO"]
[product id="22"] // 注意:这是不同的短代码

Demo 3: Display related products

[related_products limit="12" columns="4"]

For more detailed usage of WooCommerce shortcodes, it is recommended to refer directly tothe official documentation

🚀 Still feeling confused after reading the tutorial? Let me guide you step-by-step instead.

「Naibabiji WordPress Website Building Coaching」 — From selecting a domain and purchasing hosting to installing themes and publishing posts, I「ll guide you through every step, helping you avoid detours and reach your goals directly.

👉 Learn about Website Building Coaching Service
🔒

Comments are closed

The comment function for this article is closed. If you have any questions, please feel free to contact us through other channels.

×
二维码

Scan to Follow