WooCommerce 簡碼:2021 年終極指南

已發表: 2020-01-11

如果您有 WooCommerce 業務,您可能聽說過短代碼。 它們是小片段,可讓您添加和自定義在線商店的不同方面,而無需編寫長行代碼。 在本指南中,我們將了解 WooCommerce 短代碼是什麼,為什麼要使用它們,以及如何充分利用它們

WooCommerce 簡碼:所有你需要知道的

如果您使用 WordPress,您可能熟悉 WooCommerce。 目前,93.7% 的 WordPress 電子商務網站使用著名的 WooCommerce 插件。 這個由 WooThemes 開發的開源、完全可定制的平台一開始就像任何其他插件一樣,但很快就獲得了數百萬的下載量,這引起了 WordPress 董事會的注意。 迄今為止,它已經被下載了 7000 萬次,並已成為領先的電子商務插件,為 28% 的在線商店提供支持。

儘管享有盛譽和成功,WooCommerce 團隊仍在不斷努力使其變得更好。 在整個開發過程中,它向用戶提供了多種不同類型的簡碼來定制他們的網站。 有了這樣的短代碼,他們可以改造他們的商店並定制他們的界面、結賬、功能、產品上市流程等等。

因此,為了幫助您充分利用簡碼,在本指南中,我們將了解:

  • 簡碼的簡要說明
  • 為什麼它們對您的業務是必要的
  • WooCommerce 短代碼列表
  • 如何充分利用它們

什麼是 WooCommerce 簡碼?

讓我們從基礎開始。 WooCommerce 短代碼是小片段,可幫助您在電子商務網站上實現功能或顯示內容,而無需編寫大量代碼。 換句話說,它們是允許與您的站點內容進行動態交互的宏

您可以在商店的任何地方使用簡碼對其進行自定義、展示產品或只是號召性用語按鈕。 最好的部分是您不需要任何編碼知識即可開始使用它們。 您只需要對在線業務充滿熱情,並深刻了解您想要為您的商店提供什麼。 簡碼將乾淨利落地完成其餘的工作。

簡而言之,WooCommerce 短代碼在三個方面有益:

  • 它們有助於節省時間,因為您不必編寫長行代碼,從而為您提供更多時間來處理其他事情。
  • 由於他們不向帖子內容添加標記,因此店主稍後將能夠編輯頁面的樣式。
  • 更大的靈活性。 儘管這將取決於用戶設置的參數,但他們可以針對不同的情況應用相同的簡碼。

為什麼需要 WooCommerce 簡碼?

還是不服氣? 再想一想,WooCommerce 短代碼可以做的比你想像的要多得多。

首先,使用簡碼,您將獲得對網站的完全控制權。 這意味著您可以在商店的任何位置自由展示產品、添加號召性用語按鈕或任何類型的按鈕,而無需尋求任何開發人員的幫助。 這也意味著您也不必處理冗長而復雜的代碼段。

這對於那些想在他們的在線商店嘗試各種策略的人來說是完美的。 例如,您可能希望在您的熱門帖子之一上顯示添加到購物車按鈕以鼓勵轉化,而不是像任何其他商店那樣引導您的客戶完成標准銷售流程。 最好的部分是短代碼允許您在放置在您網站上的許多號召性用語按鈕中進行選擇。

此外,WooCommerce 短代碼允許您將產品添加到主頁,創建一個銷售商品網格以向客戶展示它們,並在您想要的任何地方展示您的熱門產品。 甚至可以創建訂單跟踪頁面! 這就是短代碼的魔力,它們為您提供了無限的選項來自定義您的商店

有哪些類型的 WooCommerce 簡碼?

由於很難說 WooCommerce 提供了多少短代碼,我們將根據它們的類別列出它們。 以下是我們將在本指南中介紹的 WooCommerce 短代碼的快速概述:

  • 頁面簡碼
  • 產品簡碼(這是最強大的類別)
  • 產品頁面簡碼
  • 相關產品簡碼
  • 添加到購物車按鈕或 URL 簡碼

如何充分利用WooCommerce 短代碼

現在,讓我們看看每種類型的短代碼可以做什麼以及如何充分利用它們:

1.頁面簡碼

通常,WordPress 帶有 4 個默認頁面,其中包含短代碼,因此您無需手動添加它們。 但是,如果由於某種原因並非如此,您可以使用簡碼重新創建頁面並在設置中闡明它們。

在頁面短代碼中,您會發現:

大車

[ woocommerce_cart ]

它用於購物車頁面,一旦您的客戶將產品添加到他們的購物車,它有助於顯示購物車內容。 此外,它還顯示優惠券代碼、購物車零碎以及標准購物車頁面的其他元素的界面。 這是一個簡單的簡碼,因此您無需向其中添加任何條件或參數。

查看

[ woocommerce_checkout ]

一旦您的客戶收集了他們想要的所有產品/服務,他們將單擊結帳,這就是結帳短代碼起作用的時候。 它將顯示購物者在結帳前需要查看的所有必要信息,例如付款方式、帳單信息、運輸信息等。這也是一個簡單的短代碼,不接受任何附加參數。

我的帳戶

[ woocommerce_my_account ]

客戶應該能夠查看和修改他們的個人資料詳細信息,例如姓名、電子郵件地址、密碼,以及他們的訂單詳細信息,例如送貨和賬單地址。 使用此簡碼,用戶將能夠查看、編輯和更新這些詳細信息。 此外,它包含一個參數,將顯示有關當前購物者的信息。

訂單跟踪表

[ woocommerce_order_tracking ]

與前三頁短代碼不同,默認情況下不會自動生成此短代碼,但您可以添加它,以便您的客戶可以查看和跟踪他們正在進行的訂單的狀態。 如果他們想檢查訂單的狀態,購物者必須在訂單跟踪表中輸入他們的訂單詳細信息。

您可以將此 WooCommerce 簡碼用於單個頁面,或將其與其他簡碼結合使用以顯示跟踪表單。 例如,您可以在“我的帳戶”頁面上使用此短代碼讓您的客戶訪問跟踪表格。

2.產品簡碼

請記住,要使用產品簡碼,您需要 WooCommerce 3.2 及更高版本。 這些版本讓您可以使用產品簡碼進行各種產品展示。 如果您有以前的版本,請查看此文檔,因為您需要為每種類型的產品分組使用不同的簡碼。

 [ products ]

2.1 產品簡碼屬性

使用產品簡碼時,您需要根據不同的條件指定要顯示的產品,這將允許您按帖子 ID、SKU、類別、屬性等過濾產品。 它們還支持分頁、隨機排序和產品標籤。

讓我們來看看一些產品簡碼:

限制產品數量

使用 limit 屬性,您可以限制顯示的產品數量。 例如,您可以使用以下內容將要顯示的產品數量限制為 8 個項目:

 [ products limit="12" ]

. 請注意,默認情況下,限制為“-1”,這意味著將顯示所有產品。

改變產品佈局

使用 WooCommerce 短代碼,您還可以更改佈局以使產品展示多樣化。 只需根據客戶的偏好在以下屬性中進行選擇: columns、paginate 或 orderby。

一個。

如果要設置一定數量的列,則必須添加“列”屬性並明確所需的數量。 因此,如果您想要 6 列中的每列都有不同的產品,您可以使用簡碼:

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

灣。 分頁

另一個例子是 paginate 屬性,它將您的產品分成不同的頁面。 使用此簡碼,您可以指定每頁顯示的項目數。

要使用它,請設置 paginate = “true”,然後輸入以下簡碼:

 [ products limit="12" columns="4" paginate="true" ]

C。 使用“orderby”對產品進行排序

orderby屬性提供了廣泛的選項,因為它允許您根據多個條件對產品進行排序,以通過添加條件來按您的意願顯示它們。 這些包括:

    • id:按產品id顯示產品。
    • 流行度:使用此屬性,購買最多的產品將首先顯示。
    • 標題:按標題對產品進行排序。 這是 orderby 的默認順序。
    • rating :另一種對產品進行排序的有趣方法是基於它們的平均評分值。
    • date :根據項目的發布日期對項目進行排序。 默認情況下,最舊的產品首先顯示。 但是,您可以使用 date 屬性更改此設置。
    • rand :使用此屬性,您可以在重新加載頁面時更改產品的順序。 儘管如此,對於啟用了緩存並且產品以固定順序保存的站點,此屬性可能不起作用。
    • menu_order :這僅在您設置菜單訂單時才有效,它將根據該訂單顯示產品。 最小的數字將首先顯示。

如果您想要更多的自定義,您可以更進一步,只需在它們之間添加一個空格即可組合這些選項。 例如,您可以嘗試混合短代碼以根據產品受歡迎程度按順序顯示六列產品,如下所示:

 [ products limit="12" columns="4" orderby="popularity" ]

更多產品屬性

WooCommerce 中還有更多產品屬性,您可以將它們與“產品”短代碼結合使用。 一些主要的有:

    • SKU:您可以根據 SKU(庫存​​單位)展示您的產品。 如果要添加多個 SKU,只需用逗號分隔即可。
    • on_sale :顧名思義,此屬性將顯示您商店的所有在售產品。
    • category :按類別顯示產品也是一個好主意。 您可以有多個類別,用逗號分隔 slug。
    • best_sales :如果您想首先展示您最受歡迎和最暢銷的產品,這是一個不錯的選擇。
    • top_rated :按照相同的邏輯,您還可以顯示您的評價最高的項目。
    • class :此屬性通過添加 HTML 包裝類來幫助您使用自定義 CSS 更改順序。

例如,如果你想展示你最暢銷的產品,每行四個,最多十二個項目,你可以使用這個短代碼:

 [ products limit="12" columns="4" best_selling="true" ]

能見度

此屬性允許您根據可見性設置顯示產品。 一些選項是:

      • 目錄:它檢索僅在商店頁面上可見的產品
      • 搜索:它顯示僅在搜索頁面上可見的產品
      • 可見:它是前兩者的組合,因為它檢索在商店頁面和搜索結果上可見的產品。
      • hidden:顯示只能通過直接 URL 訪問的產品。
      • 特色:它只會檢索標記為特色的產品

例如,如果你想展示你的特色產品,每行四個,最多十二個項目,你可以使用這個短代碼:

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

內容產品屬性

在產品簡碼中,您可以使用內容產品屬性來檢索特定頁面或帖子上的產品。 更具體地說,可以根據可用的屬性或屬性項(這是該屬性的變體)檢索內容。 您可以通過包含 slug、指定術語並將它們與屬性組合來做到這一點。 這可能有點令人困惑,所以讓我們仔細看看它們中的每一個:

    • 屬性:它通過封閉 slug 來幫助展示產品
    • 術語:它提到了用逗號分隔的屬性術語
    • terms_operator:它使您可以更好地控制如何顯示屬性。 共有三種運算符:
      • AND :它將顯示您選擇的所有屬性的產品。
      • IN :它顯示具有該選定屬性的產品。
      • NOT IN :它將顯示不具有所選屬性的產品。

類別

遵循與內容產品屬性相同的邏輯,您還可以根據其類別顯示項目:

      • 類別:選擇要顯示的類別
      • cat_operator:您可以應用條件來顯示您想要的項目:
        • AND:顯示的產品需要屬於所有選擇的類別
        • IN:顯示的產品需要至少屬於所選類別之一
        • 不在顯示的產品不需要在任何選擇的類別中
      • 您還可以根據逗號分隔的 Post ID 列表或 SKU 列表顯示產品。
      • 還有幾個屬於產品簡碼的簡碼/屬性:特殊屬性、產品類別和產品類別。 邏輯與您在上面閱讀的內容非常相似,但如果您想看一看,可以檢查一下。
      • 如果您想了解有關短代碼的更多信息,可以訪問此頁面並查看 8 個場景。

例如,如果您想顯示特定類別的產品,每行四個,最多十二個項目,您可以使用此短代碼:

 [ products limit="12" columns="4" category="hoodies, tshirts" ]

3.產品頁面簡碼

使用這種類型的 WooCommerce 短代碼,您可以使用兩個屬性顯示不同的產品頁面:產品 ID 和 SKU。 代碼是 .

請務必注意,您甚至可以使用以下兩個短代碼:

 [ product_page ]

或者

[ product_page sku="hoodie" ]

4. 相關產品簡碼

如果您使用過亞馬遜或阿里巴巴等電子商務商店,您可能已經註意到,當您查看產品時,它們會向您展示其他相關商品。 例如,如果您正在尋找帳篷,他們會向您展示其他類似的帳篷和睡袋。 那是因為如果你需要一個帳篷,你也可能對睡袋感興趣。

因此,向您的購物者展示相關產品是提高銷售額的好主意。 在 WooCommerce 中,這可以通過相關產品簡碼實現。 您可以準確指出您希望用戶看到多少產品。 例如,如果你想展示 4 個產品,短代碼應該是:

 [ related_products limit="4" ]

5.加入購物按鈕

添加到購物車按鈕是改善商店客戶體驗和提高轉化率的另一種絕佳方式。 最好的部分是它非常簡單。

假設您想在帖子或頁面上顯示產品的價格和“添加到購物車”按鈕,您需要使用的簡碼是

[ add_to_cart sku="hoodie" ]

WooCommerce 短代碼還允許您將購物者重定向到另一個 URL,而不是將商品添加到購物車。 為此,您需要編寫

[ add_to_cart_url ]

對於 id 為 219 的產品。

WooCommerce有用的簡碼列表

最後,這是您可以在您的網站上使用的最有用的 WooCommerce 短代碼列表。

  • 購物車頁面簡碼。
 [ woocommerce_cart ]
  • 簽出頁面
[ woocommerce_checkout ]
  • 用戶帳號。
 [ woocommerce_my_account ]
  • 訂單跟踪表。
 [ woocommerce_order_tracking ]
  • 產品簡碼。
 [ products ]
  • 特色產品。
 [ featured_products ]
  • 銷售產品。
 [ sale_products ]
  • 暢銷產品。
 [ best_selling_products ]
  • 最近的產品。
 [ recent_products ]
  • 產品屬性。
 [ product_attribute ]
  • 頂級產品。
 [ top_rated_products ]
  • 產品類別:展示特定類別的產品。
 [ product_category ]
  • 產品類別:顯示您的所有產品類別。
 [ product_categories ]
  • 店鋪消息:顯示消息。
 [ shop_messages ]
  • 產品過濾器:顯示產品搜索過濾器。
 [ woocommerce_product_filter ]
  • 過濾器屬性。
 [ woocommerce_product_filter_attribute ]
  • 產品過濾器類別。
 [ woocommerce_product_filter_category ]
  • 過濾器價格。
 [ woocommerce_product_filter_price ]
  • 產品過濾標籤。
 [ woocommerce_product_filter_tag ]
  • 過濾器評級。
 [ woocommerce_product_filter_rating ]
  • 產品過濾器銷售:顯示銷售產品的實時過濾器。
 [ woocommerce_product_filter_sale ]
  • 產品過濾器重置:顯示一個按鈕以清除所有實時過濾器。
 [ woocommerce_product_filter_reset ]

WooCommerce 簡碼:結論

總而言之,WooCommerce 短代碼將幫助您自定義您的商店,而無需編寫長行代碼。 通過這種方式,您可以測試不同的佈局和替代方案,以找到適合您商店的佈局。 儘管它們起初看起來很複雜,但事實是,通過一些練習,它們會讓您的生活更輕鬆,並幫助您將業務提升到一個新的水平。

有關自定義在線商店的更多選擇,您可以查看我們的指南:

  • 在 WooCommerce 中以編程方式添加到購物車功能
  • WooCommerce Ajax 添加到購物車

您如何看待 WooCommerce 短代碼? 請在下面的評論中告訴我們您的想法。