WooCommerce 簡碼的簡單指南

您可能聽說過 WooCommerce 短代碼並且可能也使用過它們。 但是您可能不知道它是如何以及在哪里工作的。

如果您想釋放 WooCommerce 的全部潛力，您肯定需要熟悉短代碼。

為什麼？ 因為短代碼支持插件的大部分功能，包括所有頁面，如購物車頁面、結帳頁面、產品頁面、產品類別頁面、我的帳戶頁面。

如果您更好地了解 WooCommerce 短代碼的工作原理，您可以輕鬆創建高度定制的銷售頁面，並為任何情況構建一個非常強大的在線商店網站。

什麼是 WooCommerce 短代碼，為什麼要使用它們，如何使用它們……我們將在本文中介紹所有這些。

什麼是 WooCommerce 短代碼？

用外行的話來說，WooCommerce 中的短代碼是包裹在方括號中的短代碼/文本，看起來像 [this]。

這些短代碼實際上是濃縮在一個較短的短語中的大量代碼，供非技術人員 WooCommerce 店主使用。

簡碼可以為您實現任何目標：

• 在任何頁面上顯示結帳
• 在您的主頁上展示暢銷書
• 當客戶對產品表現出興趣時，推銷相關產品
• 顯示視頻和音頻
• 添加創意滑塊
• 插入添加到購物車按鈕
• 突出顯示古騰堡區塊、側邊欄和其他小部件區域中的特色產品

...任何其他事情

現在了解了短代碼的基礎知識，讓我們看看如何將它們添加到您的商店。

如何將短代碼添加到您的 WooCommerce 商店？

經營 WooCommerce 商店對任何人來說都是耗時的。 商店管理、創建優惠、優惠券、結賬改進……有數百個任務需要注意。 為了節省時間，短代碼會派上用場。

短代碼還可以提高準確性，減少與編寫長代碼相關的錯誤。

添加短代碼的三種方法：

使用 Gutenberg 塊編輯器插入簡碼

使用古騰堡編輯器，添加簡碼很容易。

• 轉到您的 WordPress 管理面板。
• 單擊Pages > Add New 。 您還可以編輯任何現有頁面。



• 單擊plus號添加新塊，在搜索欄中輸入“短代碼”並選擇Shortcode塊。
• 現在，在字段中輸入您的簡碼。 例如 - [products] 。
• 單擊頁面右上角的藍色Publish或Update按鈕，您的產品現在將顯示在您的新頁面上。

使用經典編輯器/WordPress 編輯器插入簡碼

使用經典編輯器添加短代碼也很容易。 只需添加短代碼，確保包含括號（[ 和 ]）。

使用小部件插入短代碼

要將簡碼添加到小部件區域，只需添加帶有簡碼的文本小部件。 然後，加載頁面以在側邊欄上查看短代碼的內容。

WooCommerce 短代碼如何工作？

雖然它們看起來很簡單，但簡碼實際上非常強大！ 讓我們介紹構成短代碼的不同部分。

簡碼本身：
如上所述，簡碼是用下劃線連接的單個單詞或一組單詞，如下所示：

• [products]
• [woocommerce_order_tracking]

雖然一些簡碼可以單獨運行，但其他簡碼需要一些參數。

參數：
參數或參數（在 WooCommerce 的某些文檔中稱為 Args）是使短代碼更具體的方法。 例如，通過將 id=”36” 添加到[add_to_cart]短代碼，它將為 ID 為 36 的產品創建一個“添加到購物車”按鈕。

內置 WooCommerce 短代碼列表

WooCommerce 有五個基本的短代碼可用。

1. [woocommerce_cart] – 顯示購物車頁面
2. [woocommerce_checkout] – 顯示結帳頁面
3. [woocommerce_my_account] – 顯示用戶帳戶頁面
4. [woocommerce_order_tracking] – 顯示訂單跟踪表
5. [products] – 顯示產品

在大多數情況下，這些短代碼將通過 WooCommerce 入職嚮導自動添加到頁面中，無需手動使用。

讓我們看看每個短代碼以及如何使用它們。

[woocommerce_cart]

此短代碼將 WooCommerce 購物車功能添加到頁面。 它將顯示用戶添加到購物車的所有產品。 沒有要添加到此簡碼的參數。

[woocommerce_checkout]

顧名思義，此簡碼顯示結帳頁面。 確保此頁面設置正確。 畢竟，如果客戶無法輕鬆找到結帳頁面或發現結帳很麻煩，他們就不會購買任何東西。

也沒有額外的參數可以添加到這個簡碼中。

[woocommerce_my_account]

此短代碼顯示包含所有客戶信息的“我的帳戶”頁面，以及他們之前從您的商店訂購的信息。

默認情況下，顯示的訂單數量設置為 15。您可以通過將數字設置為 -1 將其更改為顯示所有訂單。 您可以像這樣向此短代碼添加參數或參數：

大批（
     '當前用戶' => ''
 )

 woocommerce_my_account

當前用戶參數是使用get_user_by( 'id', get_current_user_id() )自動設置的。

[woocommerce_order_tracking]

此短代碼創建一個“訂單跟踪”頁面，允許客戶查看其訂單的當前狀態。 沒有其他論據。

[產品]

[products]簡碼是最強大的簡碼之一。 它允許您按帖子 ID、SKU、屬性、類別顯示產品，並支持分頁、隨機排序和產品標籤。

它取代了 WooCommerce 3.2 以下版本中對多個短代碼的需求，例如[featured_products] 、 [sale_products] 、 [best_selling_products] 、 [recent_products] 、 [product_attribute]和[top_rated_products] 。

有大量參數可讓您自定義顯示產品的類型和數量。

要添加參數，只需寫下它的名稱，後跟等號和引號內的所需值。 確保這是在[products]短代碼中。

例如，要顯示服裝類別中的五件產品，請使用以下短代碼： [products limit="5" category="clothing"] 。

可用的產品屬性

以下屬性可與產品簡碼結合使用。 有一些參數可以幫助您控制產品頁面的佈局。 讓我們通過示例來看看它們，從展示產品屬性開始。

顯示產品屬性

• 限制- 控制顯示的產品數量。 列出產品時默認為和 -1（顯示全部），類別時默認為 -1（顯示全部）。 示例 – [products limit="3"]
• columns - 控制要顯示的列數。 默認為 4。儘管這通常會在移動設備上折疊成較小的數字（取決於您的主題。）示例 – [products columns="3"]
• paginate – 確定您的產品結果頁面是否會被分頁。 與限制一起使用。 默認為 false，設置為 true 以進行分頁。 示例 – [products paginate="true"]
• orderby – 自定義您的產品的訂購方式。 默認為產品標題。 一個或多個選項可以通過添加兩個 slug 來傳遞，它們之間有一個空格。 可用選項有：
  • date – 產品發布的日期。
  • id – 產品的帖子 ID。
  • menu_order – 菜單順序（如果設置）（首先顯示較低的數字）。
  • 流行度——購買次數。
  • rand – 在頁面加載時隨機訂購產品（可能不適用於使用緩存的網站，因為它可以保存特定訂單）。
  • 評級- 平均產品評級。
  • 標題- 產品標題。 示例 – [products orderby="date"]
• skus – 添加以逗號分隔的特定 SKU。 示例 – [products skus="shirt-black-small, shirt-black-large"]
• 類別- 顯示具有特定類別 slug 的產品。 您可以通過在它們之間放置一個逗號來添加多個類別。 示例 – [products category="watches, purses"]
• tag - 顯示具有特定標籤 slug 的產品。 您可以通過在它們之間放置一個逗號來添加多個標籤。 示例 – [products tag="rainy, kids"]
• order – 使用 orderby 中設置的方法說明產品訂單是升序 (ASC) 還是降序 (DESC)。 默認為 ASC。 示例 – [products order="DESC"]
• class - 添加一個 HTML 包裝類，以便您可以使用自定義 CSS 修改特定輸出。 示例 – [products class="custom-element"]
• on_sale – 顯示銷售產品。 不要將它與 best_selling 或 top_rated 一起使用。 示例 – [products on_sale="true"]
• best_selling - 顯示最暢銷的產品。 不要將它與 on_sale 或 top_rated 一起使用。 示例 – [products best_selling="true"]
• top_rated – 顯示評價最高的產品。 不要將它與 on_sale 或 best_sales 一起使用。 示例 – [products top_rated="true"]

接下來，內容產品屬性。

內容產品屬性

這些短代碼可用於根據產品的屬性（尺寸、顏色等）顯示產品。

• 屬性- 顯示具有特定屬性的產品。
• 術語- 顯示具有鏈接到屬性的某些術語的產品。 這必須與上面的屬性一起使用。 例如，屬性可以是顏色，而術語是紅色、藍色或黃色。
• terms_operator – 允許您執行計算以確定將包含哪些術語。 同樣，它們必須與屬性和術語一起使用。 可用選項有：
  • AND – 顯示所有選定屬性的產品。
  • IN – 顯示具有所選屬性的產品。 這是默認的 terms_operator 值。
  • NOT IN – 顯示不在所選屬性中的產品。
• tag_operator – 與上面的術語運算符相同，除了標籤。 可用選項有：
  • AND – 顯示來自所有選定標籤的產品。
  • IN – 顯示帶有所選標籤的產品。 這是默認的 tag_operator 值。
  • NOT IN – 顯示不在所選標籤中的產品。
• 可見性- 根據產品在您網站上的可見性顯示產品。 可用選項有：
  • 可見的——產品在商店和搜索結果中可見。 這是默認的可見性選項。
  • 目錄- 僅在商店中可見但在搜索結果中不可見的產品。
  • 搜索- 產品僅在搜索結果中可見，但不在商店中。
  • hidden - 產品對商店和搜索都隱藏，只能通過直接 URL 訪問。
  • 特色- 標記為特色產品的產品。
• 類別- 顯示具有特定類別 slug 的產品。
• tag - 顯示具有特定標籤 slug 的產品。
• cat_operator – 允許您執行計算以確定將包含哪些產品。 可用選項有：
  • AND – 顯示屬於所有選定類別的產品。
  • IN – 顯示所選類別中的產品。 這是默認的 cat_operator 值。
  • NOT IN – 顯示不在所選類別中的產品。
• ids – 基於逗號分隔的帖子 ID 列表顯示產品。
• sku – 根據逗號分隔的 SKU 列表顯示產品。

如果產品沒有顯示，請確保它沒有在“目錄可見性”中設置為“隱藏”。

基於屬性的產品場景示例

場景 1 – 隨機銷售物品

您想展示四種正在銷售的產品。

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true"]

此簡碼明確說明了四列（將是一行）的四種產品，顯示了最受歡迎的打折商品。 它還添加了一個 CSS 類快速銷售，您可以在主題中對其進行修改。

場景 2 – 特色產品

您想展示您的特色產品，每行兩個，最多四個項目。

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

這個簡碼表示最多四個產品將加載到兩列中，並且它們必須是特色。 雖然沒有明確說明，但它使用默認值，例如按標題排序（A 到 Z）。

場景 3 – 暢銷產品

您想在一行中展示您最暢銷的三款產品。

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

有關更多示例，請參閱 WooCommerce 簡碼文檔。

產品類別

這兩個簡碼將在任何頁面上顯示您的產品類別。

1. [product_category] ​​– 顯示指定產品類別中的產品。
2. [product_categories] – 顯示您的所有產品類別。 這是用於顯示特定類別的通用簡碼。 您需要添加下面列出的特定參數，以便實際顯示一個（或多個）。

可用的產品類別屬性

• ids – 按其 id 顯示特定類別。用於 product_categories。 示例 – [products _categories ids="1,2"]
• category – 可以是類別 ID、名稱或 slug。 用於[product_category]
• 限制- 確定將顯示的類別數。 示例 – [products _categories limit="3"]
• 列- 確定將顯示的列數。 默認值為 4。
• hide_empty - 這將隱藏空類別。 默認值為“1”，它將隱藏空類別。 設置為“0”以顯示空類別。 .Example – [products _categories hide_empty="1"]
• parent - 這將顯示特定父類別的子類別，該類別由 id 定位。 例如，[parent="3″] 將顯示id為3的類別的子類別。如果將parent設置為“0”，則僅顯示頂級類別。 示例 – [products _categories parent="0"]
• orderby - 這控制顯示類別的順序。 默認是按“名稱”排序。 它可以設置為“id”、“slug”或“menu_order”。 如果你想按你指定的 id 排序，那麼你可以使用 orderby=”include”。 示例 – [products _categories orderby="id"]
• order - 使用 orderby 中設置的方法說明類別排序是升序 (ASC) 還是降序 (DESC)。 默認為 ASC。 示例 – [products _categories order="ASC"]

產品類別場景示例

僅顯示頂級類別
假設您只想在頁面上顯示頂級類別並排除子類別，可以使用以下短代碼： [product_categories number="0" parent="0"] 。

其他有用的簡碼

[添加到購物車]

此簡碼可讓您輕鬆為特定產品創建添加到購物車按鈕，該產品由 id 定位。 有很多參數。 與其他短代碼一樣，每個短代碼都應該放在兩個引號內，“like this”。

• id : 按 ID 選擇產品
• style : 直接自定義按鈕的 CSS
• sku : 按 SKU 選擇產品
• show_price : 選擇是否用按鈕顯示價格。 有兩個選項，“真”和“假”
• class ：為按鈕分配一個 HTML 類，以便您可以使用 CSS 代碼定位它
• 數量：選擇將添加到購物車的產品數量。 在大多數情況下，這只是“1”

示例： [add_to_cart show_price="TRUE" quantity="1" class="example-cart-button"]

添加到購物車網址

此短代碼將顯示特定產品的實際 URL。 只有兩個參數：

• id：按 ID 定位產品
• sku：按 SKU 定位產品

示例： [add_to_cart_url]

這將按 ID 在單個產品的添加到購物車按鈕上顯示 URL。

[shop_messages]

想要在非 WooCommerce 頁面上顯示 WooCommerce 消息？ 此短代碼將允許您在任何頁面上顯示“此產品已添加到您的購物車”之類的通知。

優惠券簡碼

WooCommerce 還提供了一種在任何頁面上顯示可用優惠券並自動生成優惠券的方法。 但是，您需要購買 Smart Coupons 擴展程序。 請參閱以下帖子以獲取簡碼：

• 如何在任何頁面上顯示可用的優惠券
• 如何自動生成優惠券

對簡碼進行故障排除

您插入的簡碼可能不起作用。 以下是您需要檢查的內容：

簡碼在標籤之間：
向頁面添加簡碼時，請確保它不在標籤之間，這些標籤旨在顯示（而不是執行）代碼。

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

有關詳細信息，請參閱此文檔。

WooCommerce 短代碼插件列表

除了內置和免費的 WooCommerce 短代碼外，這裡還有一些插件可以幫助您自定義商店。

• Woo 簡碼套件
• WooCommerce 的 SIP 評論簡碼
• WooCommerce 的 SIP 前端捆綁器

結論

WooCommerce 短代碼非常有用且功能強大。 雖然它可能看起來有點技術性，但它很容易使用和實現。

我希望本指南可以幫助您解決與 WooCommerce 短代碼相關的所有查詢。

同時，您還可以查看我們流行的 WooCommerce 插件，這些插件有助於讓您的 WooCommerce 商店更快、更智能。

如果您有任何疑問或建議，請在下方留言，我們會為您解決！