WooCommerce 設計師指南

已發表: 2020-01-20

如果您正在設計 Shopify 之類的 WooCommerce 商店或開發現有的 WooCommerce 主題，這篇文章 WooCommerce 設計師指南適合您。 此組合提供了有關樣式、更改設計以及涵蓋相關 WooCommerce 頁面的其他信息的更多信息。

這個插件是一個用戶友好的工具，非常靈活； 但是，並非所有網站都受支持。 通過使用 WooCommerce 支持的功能和方法，您可以加快設計和開發過程。

它允許用戶自定義修改，但需要額外付費。 查看有哪些功能的最快方法是訪問 WooCommerce 中的 Storefront 演示。 如果您需要一些方法來學習如何使用 Woocommerce，請查看圓頂指南以幫助您入門。 WooCommerce 創建以下新頁面。 您需要為某些類型的頁面進行設計。

第一個是產品頁面。 這些頁面有兩種，即：產品存檔頁面和產品單頁。

產品存檔頁面顯示可用產品類別的縮略圖。 當您單擊類別縮略圖時，它們會顯示另一個產品存檔頁面。 然後，當您單擊產品縮略圖時，它會顯示單個產品。

另一種是產品單頁。 在這裡，這些顯示單個產品並結合產品圖像、產品標題信息、產品詳細信息以及相關產品、交叉銷售和追加銷售。

它還有特殊頁面，包括購物車和結帳。 購物車通常以精簡的形式顯示為側邊欄小部件，有時在購物車頁面上以擴展的形式與交付信息一起顯示。 另一方面，結帳是客戶結帳時，它需要地址信息。

不同類型的產品

這個工具有不同類型的產品；

首先是分為五個部分的產品標題。 這些是：

  1. 產品名稱 - 這些顯示在摘要/存檔頁面和單個頁面上
  2. 產品功能 - 您將在摘要/存檔頁面和單曲頁面上看到
  3. 圖片 - 特色圖片顯示在摘要上，附加圖片顯示在單個產品頁面上
  4. 詳細描述 – 這顯示在單個產品頁面底部的產品描述區域
  5. 簡短描述 – 這顯示在單個產品頁面的頂部

該工具還將允許用戶使用該產品。

每個類別都需要提供的類別圖像和描述，它還可以有子類別。 例如，Shoe 是一個品類，而鞋子的品牌是一個子品類。 產品類別檔案會自動生成以下部分：標題或類別名稱、類別描述、當前類別的每個子類別的一個類別縮略圖，可選的產品縮略圖包括標題、價格和添加到購物車中的每個產品當前類別。 單擊一個類別可打開一個新類別，單擊產品縮略圖可打開該產品。

此外，在產品頁面下，這些頁面會自動生成以下內容：

產品圖片——這些是產品的特色圖片和補充圖片。 產品標題、產品價格、產品簡短描述、添加到購物車的數量（帶有 + 和控件）、添加到購物車按鈕、產品 SKU（庫存​​單位）類別和標籤。

產品選項卡包括產品詳細描述，包括可選的圖片庫、附加信息（如顯示在產品頁面上的產品屬性票證）以及可選的產品評論。 單擊一個類別可打開一個新類別，單擊產品縮略圖可打開該產品。

追加銷售 - 這些是“你可能也喜歡”的東西，然後是追加銷售的拇指/標題。

交叉銷售——這些是相關產品，後面是縮略圖。

產品展示，選項有標準展示和可選展示。 該標准在產品頁面的頂部顯示特色圖像，下方的補充圖像縮略圖以 3 列縮略圖顯示。 相比之下，可選演示文稿顯示的特色圖像下方沒有縮略圖，並在“描述”選項卡中顯示所有圖像。

該工具的另一部分是產品搜索小部件，可放置在側邊欄小部件或頁腳小部件中。 如果您想搜索任何網站，它具有站點範圍搜索選項。 在其下方是產品搜索框，可讓您搜索產品名稱、簡短描述和詳細描述。 寬搜索選項的另一個部分稱為類別向下鑽取。 它是一個下拉字段，允許選擇任何類別或子類別。 Proud tag cloud kit 有一個下拉菜單，可以讓您選擇價格標籤。

產品類別搜索選項搜索小部件僅在顯示自動生成的產品類別檔案時才會出現。 首先是分層導航。 這允許用戶根據屬性優化產品，並有效地幫助用戶找到他們正在尋找的東西。 產品價格過濾器——這顯示了一個允許將產品過濾到價格範圍的滑動比例。 暢銷產品——顯示自動選擇的暢銷產品列表的標題/拇指/價格。 特色產品顯示標記為特色產品的產品的標題/拇指/價格。 特價：顯示除價格外還輸入了銷售價格的產品。

如果用戶想要為他們的 WooCommerce 設計樣式，我們可以使用產品拇指等選項。 當產品顯示為產品縮略圖時，會顯示 4 個元素，包括縮略圖、標題、價格、添加到購物車。 可用於產品背景、產品邊框、填充和邊距的 CSS 樣式。 接下來是縮略圖。 這些包括邊框、填充和邊距。 標題包括字體、粗細、顏色和大小，與價格相同。 在添加到購物車下包括按鈕顏色、標籤顏色、邊框和半徑。

該工具上還顯示了銷售貼紙，“sale”一詞出現在銷售的產品拇指上——可以使用 CSS 樣式：背景顏色、字體顏色、邊框顏色。 邊框寬度，實線/虛線邊框，邊框半徑。

產品變體允許客戶設置具有不同顏色或不同設計的服裝產品。 使用產品變體時，產品存檔頁面將顯示“選擇選項”按鈕，而不是“添加到購物車”按鈕。

總之，我們已經列出了您在設計 WooCommerce 商店時需要考慮的主要元素。 我們已經解釋了不同類型的頁面、產品信息以及搜索和样式選項。 玩得開心建立您的 WooCommerce 商店。

在此處閱讀有關 Woocommerce WordPress 主題的更多信息。