WooCommerce短程式碼Shortcodes使用方法

WooCommerce 是 WordPress 領先的電子商務外掛，幫助數百萬企業將其網站轉變為強大的線上商店。然而，許多人並不瞭解它的簡碼。

本指南將為您講解有關 WooCommerce 短程式碼的所有知識，從顯示產品和管理購物車的基本短程式碼，到定製使用者體驗的高階自定義程式碼。

讓我們一起來探索這些微小的程式碼片段如何對您的電子商務網站產生重大影響。最重要的是，知道如何使用WooCommerce的快捷鍵，可以讓你建立高度定製的銷售頁面，以及一個令人難以置信的銷售漏斗，為任何情況建立一個強大的電子商務網站。

1. 什麼是短程式碼？
2. 如何插入短程式碼
3. WooCommerce短程式碼如何工作
4. 基本的 WooCommerce 簡碼
5. 高階 WooCommerce 簡碼
6. WooCommerce短程式碼列表
7. 其他有用的簡碼
8. 短程式碼的故障排除
9. 小結

什麼是短程式碼？

簡單地說，簡碼是在你的網站上執行特定動作的一小段程式碼。

當你把這些程式碼放在WordPress的頁面、文章或部件區域時，就會發生一些事情。具體會發生什麼，取決於短程式碼。有些會載入文章內容，而有些會顯示一個聯絡表格。有數百種不同的使用情況。

短碼是一個WordPress範圍內的功能，所以它們都有相同的格式。其結構很簡單：一個簡短的文字被放置在兩個括號之間，像這樣：

[shortcode]

許多不同的外掛和主題使用短程式碼。因此，短程式碼通常會在前面加上外掛本身的名稱，以區別於其他的外掛，像這樣：

[pluginname_shortcode]

然而，這並不總是這樣的。這取決於特定的外掛。

什麼是WooCommerce短程式碼？

WooCommerce短程式碼是為WooCommerce外掛設計的短程式碼。WooCommerce有幾十個快捷鍵，它們被用來顯示大多數頁面，所以瞭解它們的工作原理很重要。

當你第一次安裝WooCommerce並通過設定嚮導時，一些頁面被自動建立。如果你去編輯其中一個頁面，你會發現它們包含一個短碼。

當頁面被載入時，該短碼會載入相關內容。例如，[woocommerce_cart] 短碼將載入WooCommerce購物車頁面。

短碼被用來顯示以下WooCommerce頁面：

• 產品
• 購物車
• 結賬
• 我的賬戶
• 訂單跟蹤

為什麼要使用WooCommerce Shortcodes？

短碼是定製您的WooCommerce商店的一種簡單方法。通過貼上一個短程式碼（並修改一些小引數），您可以輕鬆地建立您喜歡的任何型別的電子商務網站。

您可以選擇顯示哪些產品，如何訂購，以及每頁顯示多少個。此外，你還可以在合適的地方新增 “Add to Cart” 按鈕，比如在你的文章的結尾。

你也不需要知道如何編碼。你只需要複製和貼上一行或兩行文字。很簡單，對嗎？

如何插入短程式碼

要在 WordPress 網站中使用 WooCommerce 簡碼，請確保已安裝並啟用 WooCommerce 外掛。

為此，請登入 WordPress 儀表板，導航至外掛>安裝新外掛，然後搜尋 “WooCommerce”。接下來，點選立即安裝WooCommerce 外掛並啟用它。

最後，您可以按照 WooCommerce 安裝嚮導來配置基本設定，如店鋪詳情、付款方式和運輸選項。

安裝 WooCommerce 外掛後，您的 WordPress 網站會自動更新購物車、結賬和我的賬戶頁面。不過，您還可以對產品做更多處理，這就是我們要探討的簡碼。

簡碼的基本語法

WooCommerce 簡碼通常包含附加屬性，用於自定義輸出。以下是其基本結構：

[shortcode attribute1="value1" attribute2="value2"]

例如，簡碼 [products limit="4" columns="2"] 以兩欄佈局顯示四種產品。

古騰堡區塊編輯器

有了Gutenberg編輯器，新增短程式碼很容易。只需按下加號新增一個新的塊，在搜尋欄中輸入Shortcode，並選擇短碼區塊。

然後，在欄位中輸入你的短碼。

儲存頁面並檢視它。現在你會看到你的短碼的結果。

經典編輯器

如果您喜歡使用經典編輯器，新增短程式碼也很容易。

只需像上面那樣新增短程式碼，確保包括括號（[和]）。

小工具

要新增一個短程式碼到一個部件化的區域，只需新增一個帶有短程式碼的文字部件。

然後，載入頁面，在您的側邊欄上看到短程式碼的內容。

WooCommerce短程式碼如何工作

雖然它們看起來很簡單，但短程式碼實際上是相當強大的！讓我們來談談組成短程式碼的不同部分！讓我們來介紹一下組成一個短碼的不同部分。

短碼本身

短碼是一個單獨的詞或一組用下劃線連線的詞，像這樣：

• [products]
• [woocommerce_order_tracking]

雖然有些簡碼可以單獨使用，但有些簡碼需要一些引數。

引數

引數，或引數（在一些WooCommerce的文件中稱為args），是一些額外的行，使短程式碼的動作更加具體。大多數，但不是全部，WooCommerce的短程式碼都使用引數。

例如，如果您在[products s]短程式碼中新增on_sale=”true”，那麼顯示的產品將是正在銷售的產品。

基本的 WooCommerce 簡碼

WooCommerce 提供了多種簡碼，讓您可以顯示產品、管理購物車並增強結賬流程。

讓我們來了解一下最基本的 WooCommerce 短程式碼、它們的屬性和詳細示例，以幫助您在店鋪中有效使用它們。

產品展示簡碼

[products] 簡碼是最通用的 WooCommerce 簡碼之一。它允許您根據各種條件顯示產品列表。

它擁有眾多屬性，可讓您隨心所欲地顯示產品：

• limit– 要顯示的產品數量。預設值為-1（全部顯示）。
• columns-列數。預設為4。
• orderby– 按特定條件（如 date, title, price, popularity 等）排列產品。
• order– 產品順序。可以是ASC（升序）或DESC（降序）。
• category– 產品類別的 Slug。
• tag– 產品標籤的標題。
• paginate– 啟用分頁。可以為true或false。預設為false。

例如，如果您想以四列布局顯示最新的八種產品，並按產品新增日期降序排序。您可以使用以下簡碼。

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

以四列布局顯示最新的八個產品。

如果還想啟用分頁功能，以便使用者在顯示限制的同時還能訪問其他產品，則可以使用 paginate 屬性。

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

您可能還想顯示特定類別的產品。通過 category 屬性，您就可以做到這一點。下面的簡碼以三欄佈局顯示了 “accessories” 類別中的六種產品：

[products category="accessories" limit="6" columns="3"]

在三欄佈局中顯示特定類別的六種產品。

顯示五個產品是因為該類別中目前只有五個產品。當該類別中再新增兩個產品時，將顯示七個產品，但由於數量限制，將只顯示六個產品。

通過新增 id 或 sku 屬性，[product] 簡碼還可用於根據 ID 或 SKU 顯示單個產品。例如，下面的簡碼顯示 ID 為 22 的產品。

[product id="22"]

使用 [product] 簡碼按 ID 顯示單個產品。

這可以新增到博文中或您選擇的任何地方。

如果您想有選擇地顯示多個產品，可以使用 id 和 skus 屬性。

[products columns="3" ids="22,35,26"]

此簡碼可顯示 ID 為22、35 和26 的產品。

根據 ID 有選擇地顯示多個產品。

您可能需要的另一個簡碼是 [product_page] 簡碼。此簡碼與 [product] 類似，但可顯示整個產品頁面，包括標籤、相關產品和評論。例如，讓我們顯示 ID 為 22 的產品的完整產品頁面。

[product_page id="22"]

按 ID 顯示產品的整個產品頁面。

這對於頁面或文章中的特色產品部分非常有用。

您還可以使用 cat_operator 屬性來控制如何根據類別篩選產品。該屬性的可用選項有：

• AND — 顯示所選類別中的產品。
• IN — 顯示屬於任何選定類別的產品（預設值）。
• NOT IN — 顯示不屬於所選類別的產品。

例如，如果要顯示 “clothing” 和 “accessories” 類別中的產品，可以使用 AND 運算子：

[products category="clothing, accessories" cat_operator="AND"]

您還可以使用 NOT IN 運算子排除特定類別中的產品。例如，如果您想顯示除 “clothing” 類別以外的所有產品。

[products category="clothing" cat_operator="NOT IN"]

購物車和結賬簡碼

WooCommerce 為購物車、結賬和使用者賬戶等基本電子商務頁面提供了特定的簡碼。

例如，[woocommerce_cart]快捷程式碼可顯示購物車頁面，包括所有購物車專案、數量和總價。

顯示包含所有購物車資訊的購物車頁面。

此簡碼應放置在指定為購物車頁面的頁面上。

同樣，[woocommerce_checkout] 短程式碼可顯示結賬頁面，客戶可在此輸入賬單和送貨詳情並下訂單。

顯示結賬頁面的簡碼。

此簡碼應放置在指定為結賬頁面的頁面上。

woocommerce_my_account] 簡碼可用於顯示使用者賬戶，包括訂單、下載、地址和賬戶詳情等部分。

顯示使用者賬戶頁面。

最後，[woocommerce_order_tracking] 短程式碼可幫助您顯示一個表單，客戶可在此輸入他們的訂單 ID 和電子郵件，以跟蹤他們的訂單。

簡碼用於顯示客戶跟蹤訂單的表單。

此簡碼可放置在任何希望客戶跟蹤訂單的頁面上。

產品類別簡碼

當您想顯示產品類別列表或網格時，可以使用 [product_categories] 短程式碼。它具有以下屬性，可用於自定義其外觀：

• number– 要顯示的類別數量。
• columns-列數。
• orderby– 按特定條件排列類別。
• order– 類別的順序。可以是ASC或DESC。
• hide_empty– 隱藏空類別。可以是1（真）或 0（假）。

例如，如果您想在網格中顯示產品類別，可以使用以下簡碼：

[product_categories number="12" columns="4" orderby="name" order="ASC"]

此簡碼在四列網格中顯示 12 個產品類別，按名稱升序排序。

以四列網格顯示產品類別。

如果新增縮圖，縮圖將顯示在這裡，從而改善網站的外觀。您可以通過訪問 “產品“>”類別“>編輯特定類別來新增縮圖，然後滾動到 “縮圖” 欄位上傳圖片。

同樣，如果您想顯示特定類別的產品，可以使用 [product_category] 簡碼。該程式碼接受 per_page 屬性，用於指定 per_page 要顯示的產品數量。它還接受 category 屬性，用於指定產品類別標題和列數。

例如，此簡碼以四欄佈局顯示 “clothing” 類別中的八種產品。

[product_category category="clothing" per_page="8" columns="4"]

顯示 “clothing” 類別中的八種產品。

高階 WooCommerce 簡碼

除了基本的產品顯示簡碼外，WooCommerce 還提供高階簡碼，可提供更多控制和自定義選項。通過這些簡碼，您可以定製 WooCommerce 商店的顯示方式和功能，以滿足您的特定需求。

自定義產品顯示

[products] 簡碼非常靈活，允許各種屬性組合，以不同的方式篩選和顯示產品。

以下是一些您可以使用的屬性：

• on_sale– 是否顯示正在銷售的產品。true 或 false.
• best_selling– 是否顯示最暢銷的產品。true 或 false.
• top_rated– 是否顯示評分最高的產品。true 或 false.

有了它，您就可以顯示正在銷售的產品。

[products on_sale="true" limit="8" columns="4"]

您還可以使用下面的簡碼顯示類別中最暢銷的產品：

[products category="accessories" best_selling="true" limit="6" columns="3"]

該簡碼以 3 欄佈局顯示 “accessories” 類別中的六種最暢銷產品。

針對特定用例的簡碼

WooCommerce 的簡碼可根據不同的標準提供動態內容，以滿足特定的使用情況。例如，[recent_products] 簡碼可用於顯示 WooCommerce 商店最近新增的產品。

[recent_products limit="5" columns="5"]

該簡碼以五欄佈局顯示最近新增的五個產品。

同樣，[featured_products] 簡碼可用於顯示 WooCommerce 商店中標記為特色的產品。

[featured_products limit="6" columns="3"]

在三欄佈局中顯示六個特色產品。

此簡碼可在三欄佈局中顯示六個特色產品。

如下圖所示，您可以通過導航至產品頁面併為其新增星標，將產品標記為特色產品。

如何將產品標記為特色產品。

假設您正在對某些特定產品進行銷售。您可以使用 [sale_products] 簡碼來顯示當前正在銷售的產品。

[sale_products limit="8" columns="3"]

要為產品設定銷售價格，請轉到產品 > 所有產品，然後點選要打折的產品。然後向下滾動到 Product data 部分。

最多可顯示八種當前正在銷售的產品。

如果在 WooCommerce Sale price ($) 欄位中輸入任何值，遊客在商店前端看到的價格就會是這個值。該欄位將覆蓋 Regular price ($) 值。如果您沒有舉辦促銷活動，請將該欄位留空，以免不小心給產品打折。

如果您有一個幫助您設定暢銷產品的外掛，您也可以使用 [best_selling_products] 簡碼在 WooCommerce 商店中顯示暢銷產品。

[best_selling_products limit="10" columns="4"]

top_rated_products] 簡碼還可以顯示 WooCommerce 商店中評分最高的產品。

[top_rated_products limit="4" columns="2"]

WooCommerce短程式碼列表

現在讓我們來看看一些最有用的WooCommerce短程式碼。

[woocommerce_cart]

這個短碼將WooCommerce購物車的功能新增到頁面中。換句話說，它將顯示使用者加入購物車的所有產品。沒有任何引數可以新增到這個短碼中。

[woocommerce_checkout]

這個短碼顯示結賬頁面。由於它是您業務的一個重要方面，請確保該頁面被正確設定。畢竟，如果客戶找不到結賬，他們就無法購買任何東西

如同上面的[woocommerce_cart]，結賬頁沒有額外的引數。

[woocommerce_my_account]

這個顯示的是 “My Account” 頁面，其中包含了客戶的所有資訊，以及他們以前在你的商店的訂單。

預設情況下，顯示的訂單數被設定為15。你可以通過將數字設為-1來改變它，以顯示所有的訂單。

[woocommerce_order_tracking]

這個短碼建立了一個 “order tracking” 頁面，它允許客戶看到他們的訂單的當前狀態。沒有其他引數。

[products]

[products]短程式碼是WooCommerce中最強大和最廣泛使用的短程式碼之一。正如您可能猜到的，它顯示您的產品。有大量的引數允許您自定義顯示產品的型別和數量。

要新增一個引數，只需寫下它的名字，然後是等號和引號內的期望值。請確保這是在[products s]短程式碼內。

例如，要顯示3個shoes類別的產品，請使用這個短碼：

[products limit="3" category="shoes"]

為了使它更容易理解，我們已經包括了一個產品短碼的樣本，每個短碼下面都包含了引數。

用limit控制顯示的產品數量

limit引數控制顯示產品的數量。預設情況下，它將是-1，顯示所有產品。

例子

[products limit="3"]

用category類別顯示來自某個類別的產品

category引數將顯示具有某個類別lug的產品。你可以通過在它們之間放置一個逗號來新增多個類別。

例子

[products category="shoes, hats"]

自定義佈局

有幾個引數可以幫助你控制產品頁面的佈局。

1. columns

這個引數控制列的數量。預設情況下，它被設定為4，儘管這通常會在移動端摺疊成一個較小的數字（取決於你的主題。）

例子

[products columns="3"]

2. paginate

這個引數將決定你的產品結果頁面是否會被分頁。它只有兩個選項：true或false。預設情況下，它被設定為false。

你可能希望將paginate引數與我們上面提到的limit引數結合起來使用。因此，限制引數將決定每頁列出多少個專案。

例子

[products paginate="true"]

3. orderby

這個引數有許多選項，允許你自定義產品的排序方式。預設情況下，它們將按產品的標題排序。

你可以新增一個以上的選項，用一個空格隔開它們。

• date：這是按產品的釋出日期排序（新的優先）。
• id：這個設定將按產品的帖子ID來排序
• menu_order：這將按選單順序排列產品（低位數字先）。
• popularity：這將按購買次數排列產品（最多者優先）。
• rand：這將以隨機順序顯示產品。對於使用快取外掛的網站可能會有問題。
• rating：這將按照產品的平均評分，從高到低排序。

例子

[products orderby="date"]

4. order

基於上述orderby設定，這決定了順序是升序（ASC）還是降序（DESC）。預設情況下，它是ASC。

例子

[products order="ASC"]

5. skus

SKU是指庫存管理單位（Stock Keeping Unit）。它是一個系統，旨在跟蹤不同市場上的產品。雖然它們不是WooCommerce所要求的，但它們是強烈推薦的，特別是如果你打算批發銷售你的產品。你可以使用這個外掛，為你的所有產品自動生成SKU。

這個引數可以讓你新增特定的SKU，這些SKU應該用逗號分開。

例子

[products skus="tshirt-white-small, tshirt-white-medium"]

6. tag

這可以讓你顯示帶有某個標籤的產品。你可以通過在它們之間加一個逗號來新增多個標籤。

例子

[products tag="blue, summer"]

7. class

這將在元素周圍新增一個HTML封裝類，允許你用CSS修改它。

例子

[products class="custom-element"]

8. on_sale

想顯示被標記為打折的產品？使用這個引數。選項是true或false。請確保不要與best_selling或top_rated同時使用。

例子

[products on_sale="true"]

9. best_selling

這將顯示最暢銷的產品。選項是true和false。請確保不要與on_sale或top_rated同時使用。

例子

[products best_selling="true"]

10. top_rated

top_rated引數將顯示評價最高的產品。可用的選項是true和false。請不要與on_sale或best_selling同時使用。

例子

[products top_rated="true"]

產品屬性

這些簡碼可以用來根據產品的屬性來顯示產品。屬性是多個產品共用的元素。例如，size 或 color.

1. attribute

這將顯示具有某種屬性的產品。

2. terms

這必須與上述屬性一起使用。它將顯示與該屬性相關的某些術語的產品。例如，屬性可能是size，術語是small, medium, 或 large。

3. term運算子

這些允許你進行簡單的計算，以確定哪些術語將被包括在內。同樣地，它們必須與attribute和terms一起使用。

• AND：將顯示所有列出的屬性的產品
• IN：將顯示選定的術語。這是預設的。
• NOT IN：將顯示不在所選術語中的專案（即除您選擇的術語外的所有專案）。
  

4. tag運算子

與上面的term運算子相同，除了標籤。

• AND：將顯示具有所有列出的標籤的產品
• IN：將顯示具有所選標籤的商品。這是預設的
• NOT IN：將顯示不在所選標籤中的專案（即除您選擇的標籤外的所有專案）。

5. visibility

這將根據產品在您網站上的可見度來顯示它們。

• Visible：顯示在搜尋和您的網站上可見的產品。這是在預設情況下設定的
• Catalog：顯示在商店中可見的產品，但不在搜尋結果中。
• Search：顯示在搜尋結果中可見的產品，但不顯示在商店中。
• Hidden：顯示在搜尋結果和商店中都隱藏的產品，但只能通過直接的URL訪問。
• Featured：顯示被標記為特色的產品

6. cat_operator

Cat代表類別。這允許您進行簡單的計算，以確定哪些產品將被包括在內。

• AND：顯示所有類別中的產品
• IN：顯示所選類別/分類中的產品
• NOT IN：顯示不在所選類別中的產品

產品類別

這兩個簡碼允許你顯示你的產品類別。與產品本身一樣，有大量的自定義選項。

[products _categories]

在沒有任何引數的情況下，這個簡碼將在一個頁面上顯示您所有的類別。如果您想新增一個以上的類別，您也應該使用這個短碼。

[products _category]

這是用於顯示一個特定類別的通用短碼。您需要新增一個特定的引數，如下所示，以便實際顯示一個（或多個）。

引數

現在讓我們來看看產品類別短程式碼的可用引數。

1. ids

通過他們的ID顯示特定的類別。

例子

[products_categories ids="1,2"]

2. limit

這決定了將被顯示的類別的數量。

例子

[products _categories limit="5"]

3. columns

這個引數決定了列的數量。預設情況下，它被設定為4。

例子

[products _categories limit="5"]

4. hide_empty

這將隱藏空的類別。有兩個選項： “1” 和 “0”。”1″ 將隱藏空類別，而 “0” 將顯示它們。預設情況下，它被設定為 “1”。

例子

[products _categories hide_empty="1"]

5. parent

這個引數將顯示一個特定的父類別的子類別，該類別是以id為目標的。例如，[parent=”3″]將顯示ID為3的類別的子類別。

如果你把parent設定為 “0”，將只顯示頂級的類別。

例子

[products _categories parent="0"]

6. orderby

這是控制類別顯示的順序。預設情況下，它將按名稱排序，但你也可以將其改為id、slug或menu_order。

例子

[products _categories orderby="id"]

7. order

與orderby相關，這個引數將使排序升序（ASC）或降序（DESC），預設情況下，它被設定為 “ASC”。

例子

[products _categories order="ASC"]

其他有用的簡碼

現在讓我們來看看其他一些有用的簡碼吧！

[add_to_cart]

這個短碼讓您輕鬆地為一個特定的產品建立一個新增到購物車的按鈕，這個按鈕是以id為目標。有相當多的引數。與其他短程式碼一樣，每個引數應放在兩個引號內，”像這樣”。

• id：通過ID選擇產品
• style：直接定製按鈕的CSS
• sku：通過SKU選擇產品
• show_price：選擇是否與按鈕一起顯示價格。有兩個選項，”TRUE “和 “FALSE”
• class：為按鈕指定一個HTML類，這樣你就可以用CSS程式碼鎖定它。
• quantity：選擇將被新增到購物車的產品數量。在大多數情況下，這將只是 “1”。

例子

[add_to_cart id="34" style="border： 1px solid #111111;" show_price="TRUE" quantity="1" class="example-cart-button"]

[add_to_cart_url]

這個短碼將顯示一個特定產品的實際URL。只有兩個引數：

• id：通過ID定位產品
• sku：通過SKU定位產品

例子

[add_to_cart_url id="99"]

[shop_messages]

想在非WooCommerce頁面上顯示WooCommerce資訊？這個短碼將允許您在任何有它的頁面上顯示通知，如 “This product has been added to your cart”。

優惠券短碼

WooCommerce還提供了一種在任何頁面上顯示可用優惠券的方法。然而，你需要購買他們的Smart Coupons外掛，你可以在這裡閱讀更多資訊。

短程式碼的故障排除

在最後一節中，讓我們簡單介紹一下阻礙短程式碼工作的一些常見問題。

短碼位於<pre>標籤之間

當新增一個短程式碼到一個頁面時，確保它不在<pre>標籤之間，這些標籤是用來顯示（而不是執行）程式碼的。

引號是捲曲的，不是直的

另一個常見的錯誤是，如果引號（與引數一起使用）是有角度的，或 “捲曲的”（像這樣：“），而不是直的（像這樣：“）。引數不會與捲曲的引號一起工作。

小結

正如你可能注意到的，WooCommerce中有很多短程式碼！希望這篇指南對你有幫助！希望本指南對你的電子商務工作是一個有用的資源。

雖然它看起來有點技術性，但快捷鍵的力量和靈活性使你可以建立你夢想中的幾乎任何型別的電子商務頁面。

如果你正在使用WooCommerce，你是否利用了簡碼？如果有，是以什麼方式？如果沒有，是不是因為你覺得這個過程令人困惑？請在評論中告訴我們！