相關商品、加入購物車及通知 Shortcodes

本頁列出用於新增相關商品區塊、含價格的加入購物車按鈕及在非 WooCommerce 頁面顯示商店訊息/通知的 shortcodes。以下為各 shortcode 及其屬性。

若要在單一商品頁面顯示相關商品（具有相似標籤或分類的商品）以促進交叉銷售/向上銷售，可使用 [related_products] shortcode。以下為此 shortcode 及可用於格式化的 屬性：

可使用以下屬性格式化此 shortcode：

Limit ：限制使用此 shortcode 時顯示的相關商品數量。例如，[related_products limit ='12"] 將限制顯示 12 個商品。

Columns: 決定顯示相關商品的欄位數量。例如，[related_products columns="4″] 將商品排成 4 欄（每列每欄 1 個商品）。若與 limit 12 結合，將產生 3 列，每列 4 個商品。

Orderby：決定相關商品區塊中的商品順序。可依價格或標題排序。

以下為如何使用此 shortcode 並設定部分 屬性 的範例，shortcode 放置於單一商品的「商品描述」區塊：

[related_products limit="4" columns ="3" orderby="price"]

*設定 limit、columns 及 orderby 屬性後 [related_products] shortcode 的顯示樣式*

注意：'limit' shortcode 參數決定頁面顯示的商品數量。不會為 shortcode 新增分頁功能。

可使用 shortcodes 在任何頁面顯示「加入購物車」按鈕。若想在商店頁面以外的地方強調某個商品，此功能較有幫助。以下為此 shortcode 及其可用 屬性，以及如何在文章中使用的範例。

以下為可用屬性：

id：商品 ID。可在商品 > 所有商品下將滑鼠停留在商品上方以找到商品 ID。將商品 ID 加入 Add-to-Cart shortcode 將顯示特定商品的價格及加入購物車按鈕。
style：加入購物車按鈕的一般樣式；可設定邊框、邊框類型/顏色及內距。
sku：商品 SKU。若未設定商品 ID，shortcode 將使用 SKU 顯示正確的加入購物車按鈕。
show_price：標記為 "TRUE" 或 "FALSE" 以在加入購物車按鈕旁顯示價格。
class：新增額外 CSS。
quantity：決定加入購物車的數量。（注意：此屬性僅在透過佈景主題範本新增 shortcode 時有效）。

[add_to_cart id="99"]

以下為將程式碼 [add_to_cart id="xx" style="border:none; padding 10px"] 加入文章的範例（請注意：[add_to_cart] 僅新增按鈕及商品定價，不新增任何圖片或額外商品資訊）：

*非 WooCommerce 頁面上含價格的加入購物車按鈕*。*商品圖片為另外新增，不會隨 shortcode 顯示。*

注意：將「xx」替換為要顯示加入購物車按鈕的商品 ID。

依 ID 顯示單一商品加入購物車按鈕的 URL。

此 shortcode 有兩個可用屬性：id 或 sku。與前一範例中 [add_to_cart] shortcode 使用的屬性相同。

[add_to_cart_url id="99"]

使用 [shop_messages] 在非 WooCommerce 頁面顯示 WooCommerce 通知（例如「商品已加入購物車」）。與其他 shortcodes（如 [add_to_cart] 或 [product_page]）搭配使用時較有幫助，可讓使用者獲得操作反饋。以下為與 [add_to_cart id="xx"] shortcode 搭配使用的範例：

注意：若用於顯示 [add_to_cart] 訊息，需在 WooCommerce > 設定 > 商品一般設定中停用 在封存頁啟用 AJAX 加入購物車按鈕 才能顯示訊息：