WooCommerce 簡碼：初學者完整指南

如果您是 WooCommerce 的新手，您可能已經註意到購物車頁面上有以下圖片：

這是購物車頁面的WooCommerce 簡碼。 購物車和結帳頁面等默認頁面使用短代碼為頁面提供功能。

WooCommerce 提供了一個空白畫布，您可以自行設計頁面並添加小部件或按鈕。 但是創建和定制在線商店可能具有挑戰性，尤其是對於初學者而言。 短代碼是您正在尋找的可取之處。 它們為用戶提供了一種插入內容或更改內容顯示方式的簡單方法。

在本文中，我們將討論：

• 什麼是 WooCommerce 簡碼？
• 你如何使用簡碼？
• 有哪些重要的簡碼？

到本文結束時，您將了解有關短代碼的所有信息以及如何使用它們。

TL;DR ：WooCommerce 短代碼是簡單的代碼片段，有助於改變頁面或帖子的外觀。 簡碼控制查看產品列表、結帳表格等信息的方式。 它減少了對複雜編碼的需求，並使更改頁面功能變得容易。

一開始，短代碼似乎會讓初學者感到困惑。 很難說出它們的用途，因為您所看到的只是代碼，稱為處理程序函數。 您必須預覽頁面才能看到他們添加的功能。 以下是短代碼與它們的作用的一些圖像。

WooCommerce 短代碼用於將產品列表、購物車、結帳表格、帳戶信息和其他電子商務相關元素添加到您網站的頁面和帖子中。

在我們開始之前，我們必須注意這些可能是很大的變化。 我們建議首先使用 BlogVault 進行備份。 備份是保護您的工作的安全網，以防更改出錯。

隨著您構建站點的進展，BlogVault 還具有暫存站點功能，可幫助您安全地測試主要更改。 這是在不影響您已在網站上完成的工作的情況下更改網站核心頁面佈局的好方法。 現在，讓我們深入了解您需要了解的有關 WooCommerce 簡碼的所有信息。

什麼是 WooCommerce 簡碼？

WooCommerce 短代碼是執行特定功能的代碼片段。 它包含在方括號中，並添加到帖子或頁面以更改其外觀或工作方式。 它還可以幫助您插入動態內容。 這些內容會根據某人與頁面的交互方式而變化。

如果您熟悉插件，短代碼和插件聽起來可能很相似。 但是，它們有不同的用途。 短代碼將特定功能或內容添加到帖子或頁面。 它自定義站點上已存在的內容的顯示。 安裝並激活插件以添加影響整個站點的新功能。 它們在您網站的不同方面提供幫助，例如管理或設計，並且在功能方面更為複雜。

你如何使用 WooCommerce 簡碼？

要使用 WooCommerce 簡碼，只需將簡碼插入頁面或發布您希望內容或功能出現的位置，然後保存或發布頁面。 查看頁面時，短代碼將替換為它代表的實際內容或功能。

我們之前提到過短代碼是預定義的代碼片段。 這意味著他們的目標已經在您的站點文件中設定。 您只需要知道添加它的簡碼的處理函數即可。 處理程序函數是您在方括號之間寫的一段文本。 我們在本文後面列出了最有用的處理程序函數。 您還可以查看 WooCommerce 文檔以獲取更多信息，或者詢問 WordPress 社區是否有針對特定任務的簡碼。

知道句柄後，以下是將短代碼添加到頁面或帖子的步驟：

1. 編輯頁面或帖子：在您的儀表板上，根據您要編輯的內容單擊帖子或頁面。 然後將鼠標懸停在右側頁面或帖子上，然後單擊“編輯”。 這將打開頁面編輯器。

2. 添加簡碼處理函數：在需要添加簡碼的地方，點擊左上角的+號，搜索簡碼。 這添加了短代碼塊。 現在，添加處理函數。 例如，帳戶頁面的 WooCommerce 簡碼是 [woocommerce_my account]。 這是一張圖片，顯示了我是如何添加它的。

一些簡碼也有屬性，比如產品簡碼。 我們還將通過具體示例介紹這些內容。

3. 發布或更新帖子：完成後，預覽頁面或帖子，然後單擊發布或更新。 恭喜，您剛剛在頁面中添加了簡碼。

注意：如果刪除短代碼，該功能也會消失。 例如，如果您刪除 [woocommerce_cart] 短代碼，該頁面將不再具有購物車功能。 所以要小心並使用暫存站點來測試對您的頁面或帖子的更改。

最有用的 WooCommerce 簡碼列表

有許多 WooCommerce 短代碼可用於不同目的，以下是您的 WooCommerce 網站的基本要素：

WooCommerce 購物車簡碼：

大車

[woocommerce_cart]

此短代碼顯示購物車的內容，包括產品縮略圖、名稱、價格、數量和小計。 它具有允許您自定義輸出的各種參數，例如列、show_shipping、show_coupon、show_totals 和 button_text。

示例：[woocommerce_cart columns=”2″ show_shipping=”true” show_coupon=”true” button_text=”Proceed to Checkout”]

這將顯示包含 2 列的購物車、運輸選項、優惠券代碼字段和帶有文本“繼續結帳”的結帳按鈕。

購物車總計

[woocommerce_cart_total]

此簡碼顯示購物車的總價。 它有類和之前的參數。

示例：[woocommerce_cart_total class=”my-cart-total” before=”Total: “]

這將顯示帶有自定義類別和前綴“總計：”的購物車總價。

購物車優惠券

[woocommerce_cart_coupon

此簡碼顯示購物車頁面上的優惠券代碼字段。 它具有類和占位符等參數

示例：[woocommerce_cart_coupon class=”my-cart-coupon” placeholder=”Enter coupon code”]

這將在購物車頁面上顯示帶有自定義類和自定義佔位符文本的優惠券代碼字段。

購物車運輸

[woocommerce_cart_shipping]

此簡碼顯示購物車頁面上的送貨選項。 它有類和之前的參數。

示例：[woocommerce_cart_shipping class=”my-cart-shipping” before=”Shipping: “]

這將在帶有自定義類別和前綴“Shipping:”的購物車頁面上顯示運輸選項。

購物車內容

[woocommerce_cart_contents]

此短代碼將購物車的內容顯示為表格。 它具有類、之前和之後等參數。

示例：[woocommerce_cart_contents class=”my-cart-contents” before=”<table>” after=”</table>”]

這會將購物車的內容顯示為帶有自定義類和自定義前/後 HTML 標記的表格。

WooCommerce 結帳簡碼

查看

[woocommerce_checkout]

此短代碼顯示結帳表單，其中包含客戶完成購買所需的所有字段。 它具有 order_review、terms、privacy_policy 和 login_form 等參數。

示例：[woocommerce_checkout order_review=”false” terms=”true” privacy_policy=”true” login_form=”false”]

這將顯示沒有訂單審查部分的結帳表單，但帶有條款和隱私政策複選框。

其他自定義結帳頁面的短代碼是：

結帳和購物車

[woocommerce_checkout_cart]

此短代碼在結帳頁面上顯示購物車的內容。 它具有 show_shipping、show_coupon 和 show_cart 等參數。

示例：[woocommerce_checkout_cart show_shipping=”true” show_coupon=”false” show_cart=”false”]

這將在結帳頁面上顯示購物車的內容和運輸選項，但沒有優惠券代碼字段或購物車總數。

結帳訂單審核

[woocommerce_checkout_order_review]

此短代碼顯示結帳頁面上的訂單審查部分，包括產品列表、運輸信息和總價。 它具有 show_shipping、show_coupon 和 show_cart 等參數。

示例：[woocommerce_checkout_order_review show_shipping=”false” show_coupon=”false” show_cart=”false”]

這將僅在結帳頁面上顯示訂單審查部分，而沒有運輸、優惠券或購物車部分。

結帳字段

[woocommerce_checkout_fields]

此短代碼顯示特定的結帳字段，例如帳單和送貨地址、付款方式和訂單備註。 它具有諸如順序、字段和必需的參數。

示例：[woocommerce_checkout_fields order=”billing,shipping”字段=”first_name,last_name,email,phone” required=”first_name,last_name,email”]

這將顯示名字、姓氏、電子郵件和電話的賬單和運輸字段，並要求填寫名字、姓氏和電子郵件字段

WooCommerce 訂單跟踪表單簡碼

訂單追踪表格

[woocommerce_order-tracking]

添加客戶跟踪訂單的功能。

WooCommerce 用戶帳戶簡碼

用戶帳號

[woocommerce_my_account]

使客戶能夠更改他們的個人帳戶詳細信息。

WooCommerce 產品簡碼

產品

[產品]

此簡碼顯示帶有分頁和排序選項的產品網格。 它具有各種參數，可讓您自定義輸出，例如類別、標籤、限制、列、orderby 和 order。

例子：[products limit=”4″ columns=”2″ orderby=”price” order=”asc”]

這將在 2 列中顯示 4 個產品，按價格升序排序

產品分類

[產品分類]

此短代碼顯示來自特定產品類別的產品網格。 它具有類似於 [products] 簡碼的參數，例如 limit、columns、orderby 和 order

示例：[product_category category=”clothing” limit=”6″ columns=”3″]

這將在 3 列中顯示來自“服裝”類別的 6 件產品。

存貨單位

[products_by_sku]

此簡碼顯示基於其 SKU（庫存​​單位）的產品網格。 它具有 skus 和 limit 等參數。

示例：[products_by_sku skus=”ABC123, DEF456, GHI789″ limit=”3″

這將顯示 3 種產品，SKU 分別為“ABC123”、“DEF456”和“GHI789”。

最近的產品

[最近的產品]

此短代碼顯示最近添加的產品的網格。 它具有限制和列等參數。

示例：[recent_products limit=”8″ columns=”4″]

這將在 4 列中顯示 8 個最近添加的產品。

最暢銷

[best_selling_products]

此簡碼顯示最暢銷產品的網格。 它有 limit 和 columns 等參數

示例：[best_selling_products limit=”10″ columns=”5″]

這將在 5 列中顯示 10 種最暢銷的產品。

單品

[產品]

此短代碼按 ID 顯示單個產品。 它有id、sku等參數。

示例：[產品 id=”123″]

這將顯示 ID 為 123 的產品。

產品屬性

[產品屬性]

此簡碼顯示基於特定產品屬性的產品列表。 它具有屬性、術語、運算符、限制和列等參數。

示例：[product_attribute attribute=”color” terms=”red” operator=”OR” limit=”6″ columns=”3″

這將在 3 列中顯示最多 6 種具有“紅色”顏色屬性的產品。

特色產品

[特色產品]

此簡碼顯示特色產品網格。 它有 limit 和 columns 等參數

示例：[featured_products limit=”8″ columns=”4″]

這將在 4 列中顯示最多 8 種特色產品。

產品標籤

[產品標籤]

此短代碼顯示產品標籤列表，其中包含指向相應產品檔案的鏈接。 它具有 exclude、orderby 和 order 等參數。

示例：[product_tags exclude=”15,20″ orderby=”count” order=”DESC”]

這將顯示按與每個標籤關聯的產品數量排序的產品標籤列表，不包括 ID 為 15 和 20 的標籤。

產品頁面

[產品_頁面]

此短代碼顯示特定產品的產品頁面。 它具有參數，例如 id。

示例：[product_page id=”123″]

這將顯示 ID 為 123 的產品的產品頁面。

產品評論

[產品評論]

此短代碼顯示特定產品的評論列表。 它有 id 和 limit 等參數。

示例：[product_reviews id=”123″ limit=”5″]

這將顯示 ID 為 123 的產品的最多 5 條評論。

產品描述

[woocommerce_product_description]

此簡碼顯示產品描述

價格

[woocommerce_product_price]

此短代碼顯示產品的價格。

產品庫存

[woocommerce_product_stock]

此簡碼顯示產品的庫存狀態，例如“有貨”或“缺貨”。

最近的產品

[最近的產品]

顯示新聞產品發布

評分最高

[top_rated_products]

顯示您網站上評分最高的產品

產品類別

[產品類別]

顯示您設置的所有產品類別。

產品過濾器

[woocommerce_product_filter]

這有助於您為客戶可以用來對您的列表進行排序的產品添加過濾器。

如何對 WooCommerce 簡碼進行故障排除？

如果您遇到 WooCommerce 簡碼問題，請不要擔心。 以下是您可以採取的一些故障排除步驟：

• 仔細檢查 WooCommerce 插件：檢查是否安裝並激活了 WooCommerce 插件。 沒有 WooCommerce，短代碼將無法工作。
• 驗證短代碼語法：檢查 WooCommerce 文檔以了解正確的語法。 下劃線在正確的地方嗎？ 你在使用方括號嗎？ 這是至關重要的。
• 檢查是否有衝突的插件：有時，它可能是另一個插件。 您網站上的其他插件可能會干擾短代碼的工作方式。 嘗試一一禁用其他插件，看看問題是否已解決。 您還可以查看插件評論，看看是否有人抱怨衝突。
• 切換到默認主題：很像插件，你也可以有一個衝突的主題。 切換到默認的 WordPress 主題以查看問題是否已解決。
• 聯繫 WooCommerce 支持：如果這些步驟都不能解決問題，請聯繫 WooCommerce 支持以獲得進一步幫助。 他們將能夠幫助您更詳細地解決問題。

為什麼短代碼有用？

我們喜歡短代碼，以下是我們推薦它的一些原因：

• 節省時間：它們為您節省了添加自己的代碼來自定義商店頁面的時間和精力。 只需添加 [woocommerce_cart] 而不是編寫更改頁面佈局的代碼要容易得多。
• 易於使用：它非常適合初學者。 只需複制簡碼即可。 它幾乎比安裝你需要的插件更容易
• 無需編碼：無需編碼知識。 您所需要的只是了解處理函數的語法。
• 初學者的完全控制：您可以使用短代碼完全控制頁面設計。 您可以自定義所有關鍵電子商務頁面的各個方面，例如購物車、產品和結帳。

WooCommerce 短代碼的替代品

如果您還沒有找到適合您需要的簡碼，這裡有一些替代方案：

• WooCommerce 小部件：WooCommerce 有自己的使用塊編輯器的小部件。 要使用它，請轉到您的儀表板，單擊側欄中的外觀，然後單擊小部件。 您可以通過單擊左上角的 + 搜索所需的小部件，然後拖放所需的小部件。

• WooCommerce 塊： 這是一個可以免費安裝的插件。 它為特色產品和過濾產品提供了 20 多個新塊。

• 頁面構建器插件：我們最喜歡的是 Elementor，因為它擁有龐大的資源、模板和主題庫。 如果 Elementor 不是您的菜，還有 Gutenberg、Divi、WPBakery 和 Beaver Builder。

• 自定義代碼：如果您具備編碼知識，自定義代碼顯然是一種選擇。 您可以編寫自定義乾淨的代碼。 WordPress 社區一直在討論乾淨代碼是否比自定義代碼更好。 在我們看來，一個並不比另一個更好。 它們只是服務於不同的目的。 短代碼專為想要在沒有編碼知識的情況下自定義其網站的初學者而設計。 乾淨的代碼是開發人員確保他們的網站可擴展、可維護且易於協作的方式。

最後的想法

我們希望我們已經向您展示了 WooCommerce 短代碼對初學者來說有多麼棒。 它們是建立適合您品牌的電子商務商店的絕佳工具。 但是，就像您對 WooCommerce 商店所做的任何其他更改一樣，我們建議您首先測試您在暫存站點上所做的更改。 這樣您就可以在最終確定之前測試佈局和頁面設計。 BlogVault 有一個令人驚嘆的暫存站點功能，既適合初學者又可以快速設置。

常見問題

我如何使用 WooCommerce 簡碼？

要使用短代碼，編輯頁面或帖子，然後在正確的位置添加短代碼處理函數並單擊更新或發布。 例如，如果您想將 WooCommerce Cart 短代碼添加到頁面，請編輯頁面並編寫以下內容：[woocommerce_cart]。 然後單擊發布或更新。

我如何獲得 Woocommerce 簡碼？

WooCommerce 簡碼是具有預定義功能的代碼片段。 您只需要知道處理程序函數，然後將其添加到頁面即可。 將鼠標懸停在頁面或帖子上，單擊編輯，然後添加簡碼。 例如，您可以添加 [woocommerce_checkout] 以將結帳表單添加到頁面。 然後，單擊發布或更新。

什麼是 WooCommerce 簡碼？

WooCommerce 短代碼可幫助用戶對其 WooCommerce 商店進行功能更改。 它們是佔位符，在顯示頁面時會替換為動態內容。 它們可用於顯示產品、定價和其他信息，使它們成為 WooCommerce 網站所有者的有用工具。

如何使用簡碼來設計我的 WooCommerce 頁面？

要使用短代碼，請將所需的短代碼插入頁面編輯器。 查看頁面時，短代碼將自動生成所需的內容