在使用 WordPress 啟動 WooCommerce 商店時，Storefront 是最靈活和可擴充套件的主題之一。由於其乾淨的程式碼架構，它在使用者中非常受歡迎，目前超過 100,000 個線上商店使用 Storefront 作為他們的 WordPress 主題。
安裝 WooCommerce 店面主題
您可以透過兩種方式安裝 Storefront WordPress 主題，方法是從儀表板搜尋主題或手動上傳主題。
使用 WordPress 儀表板安裝
安裝 Storefront 的最快方法是透過 WordPress 儀表板。按照以下步驟透過 WordPress 儀表板安裝 Storefront 。
- 轉到外觀> 主題> 新增新的
- 在搜尋框中輸入 「Storefront 」，然後按 Enter 鍵。
- 將滑鼠懸停在 Storefront 螢幕截圖上。
- 選擇 「 安裝 」 按鈕。
- 單擊 「 啟用」
手動安裝 Storefront
- 從 wordpress.org 下載最新版本的 Storefront
- 轉到外觀> 主題> 新增新的
- 單擊 Upload Theme 並選擇以前下載的 zip 檔案。
- 單擊立即安裝
- 單擊 「 啟用」
購買中文版：
https://mall.weixiaoduo.com/item/storefront
設定主頁
Storefront 有一個經過深思熟慮的內建主頁模板。其乾淨的結構將幫助您的受眾輕鬆找到您銷售的產品。預設的 Storefront Homepage 模板中有 6 個部分。但您可以根據需要新增或刪除該部分。檢視此演示，以便清楚瞭解 Storefront 主頁。
預設主頁部分：
- 頁面內容
- 產品類別
- 最新產品
- 特色產品
- 熱門產品
- 銷售產品
- 最暢銷的產品
分配主頁模板
要設定主頁模板，請按照下列步驟操作：
- 轉到儀表板 – > 頁面並建立一個標題為 「 主頁 」 或任何您喜歡的頁面。
- 新增您喜歡的任何歡迎內容，這些內容將顯示在產品上方。
- 在右側，您會看到一個標題為 「 頁面屬性 」 的框
- 從 「 模板 」 下拉選單中選擇 「 主頁 」 。
- 單擊 「 釋出」或 「 更新」以儲存更改。
顯示主頁模板
釋出頁面後，現在您必須將此主頁顯示為您網站的首頁。因此，任何登陸您網站的人都會首先看到此頁面。要進行此設定，請按以下步驟操作：
- 轉到儀表板> 設定> 閱讀
- 在您的主頁顯示下選擇靜態頁面 （在下面選擇）
- 在 「 主頁」下拉選單中選擇以前的主頁模板分配頁面。
- 單擊 「 儲存更改」
重新排序店面主頁部分
您可以使用掛鉤或使用名為 Homepage Control 的外掛更改 Storefront Homepage 部分的順序。請按照以下步驟重新訂購您的主頁部分：
- 下載並安裝主頁控制
- 轉到外觀 – > 自定義 – > 主頁控制
- 根據需要拖動並重新排序部分。
- 單擊 「 儲存併發布」以儲存更改。
配置選單
在店面主題中，您可以在 3 個位置顯示選單。
- 主選單 – 顯示在站點徽標下方。
- 二級選單 – 在搜尋框附近的徽標旁邊。
- 手持選單 – 移動裝置選單。
設定選單
預設情況下，如果未設定特定的主選單，WordPress 會將您的所有頁面顯示為主選單。有時它會讓使用者感到困惑，並且很難弄清楚這些頁面是如何進入選單的。
建立新選單並向其新增頁面
- 轉到 「管理」 面板，然後選擇 「外觀」>「選單」
- 在頂部，您將找到 「選單名稱」 欄位。在這裡寫下您的選單名稱。
- 從左側單擊 Pages（假設您要將頁面新增到選單）
- 單擊 「檢視全部」 以獲取所有已釋出頁面的列表。
- 勾選要在選單上顯示的頁面。
- 選擇頁面後，單擊 「新增到選單」 按鈕。
- 拖放選單項以根據您的喜好重新排列它們。
- 單擊儲存選單
分配選單
建立選單後，將選單指定到要顯示的位置。導航到外觀> 選單> 選單設定，然後從顯示位置覈取方塊中選中位置。
新增類別選單
- 轉到 「管理」 面板，然後選擇 「 外觀」>「選單」
- 單擊左上角的 「 螢幕選項」，然後選中 「 產品類別」
- 現在，在左側窗格中將顯示 「產品類別」 選項卡。
- 單擊 「產品類別」 選項卡以展開，選擇類別
- 選擇後，單擊 「 新增到選單」按鈕。
- 拖放選單項以根據您的喜好重新排列它們。
- 單擊 「 儲存」選單
小工具設定
店面允許您在 3 個不同區域中顯示六個小工具區域。
- 側欄 – 主站點內容的左側或右側，
- 標題下方 – 位於網站標題下方和內容上方。
- 頁尾列 1 – 頁尾區域
- 頁尾列 2 – 頁尾區域
- 頁尾列 3 – 頁尾區域
- 頁尾列 4 – 頁尾區域
設定 WooCommerce
安裝 WooCommerce
- 轉到儀表板> 外掛> 新增新 > 搜尋外掛
- 搜尋 「WooCommerce」 。
- 單擊立即安裝。
- 單擊 「 啟用」。
配置 WooCommerce
啟用 WooCommerce 後，系統會提示您使用嚮導安裝 WooCommerce 。它將處理所有初始設定。它分為 6 個部分。
- 頁面設定 – 自動配置基本頁面 （商店，購物車，結賬，我的帳戶） 。
- 商店位置 – 配置商店位置，貨幣和銷售稅
- 裝運 – 配置重量單位和尺寸單位
- 付款 – 設定付款閘道器。
- 主題 – 安裝相容 WooCommerce 的主題。
- 就緒 –（可選） 允許 WooCommerce 收集使用資訊。
您可以隨時透過 WooCommerce 儀表板進行所有這些設定。
將產品新增到 WooCommerce
- 轉到 WordPress 儀表板
- 單擊 Products> Add New
- 在產品名稱欄位中寫下您的產品名稱或標題。
- 在下面的編輯器中寫下您的產品描述
- 現在，您必須將產品的特色影象和其他影象上傳到產品庫。
- 一個右邊你會找到標題為產品影象和產品庫的方框
- 將特色影象上傳到產品影象，將其他影象上傳到產品庫
- 單擊 「 釋出」。
設定產品價格和屬性
設定產品價格轉到儀表板> 產品並選擇任何產品。然後向下滾動到 「產品資料」 部分。以下是所有產品資料部分設定的簡短說明：
產品類別
- 簡單的產品：簡單的單品。
- 分組產品：作為系列一部分的產品。
- 外部/會員產品：商店中列出的產品，但實際產品在其他地方銷售。
- 可變產品：具有變化 （尺寸，顏色） 的產品
- 虛擬產品：不需要運輸的產品。
- 可下載產品：您必須提供可下載檔案的產品。
一般
- 常規價格：常規產品價格。
- 銷售價格：折扣產品價格。
庫存
- SKU：庫存單位 （SKU） 跟蹤產品
- 管理庫存：啟用庫存管理
- 庫存狀態：產品是否有庫存或缺貨。
- 單獨出售：可以單個訂單出售。
運輸
- 重量：產品重量。
- 尺寸：產品的長度，寬度和高度。
- 運輸類別：與某些運輸方式類似的產品類別。
關聯產品
- 加售：在產品詳細資訊頁面下方顯示相關產品。
- 交叉銷售：在購物車頁面顯示相關產品。
- 屬性：選擇產品全域性屬性。
高階
- 購買須知：完成購買後傳送給客戶的注意事項。
- 選單順序：此產品的定製訂購位置。
- 啟用評論：啟用或停用產品評論。
自定義店面
要自定義 Storefront 主題，我們將使用 Storefront Design Customizer 。
如何新增徽標
按照以下步驟為您的網站新增和顯示徽標：
1 。轉到 WordPress 管理員，然後選擇外觀> 自定義
2. 然後轉到站點標識> 徽標
3. 單擊選擇徽標以上載徽標影象。 （推薦影象尺寸：470px X 110px）
4 。單擊 「釋出」 。
在哪裡上傳網站 favicon
按照以下步驟新增和顯示網站的圖示：
1 。轉到 WordPress 管理員，然後選擇外觀> 自定義
2. 然後轉到網站標識> 網站圖示
3. 單擊選擇影象上傳您的徽標影象。 （建議影象大小：512px X 512px）
4 。單擊 「釋出」 。
如何新增頂欄
安裝 Storefront Design Customizer Pro 後，您可以選擇顯示 Topbar 。您可以在哪裡顯示您的電子郵件地址，電話號碼，社交帳戶，選單和提供文字。
按照以下步驟將頂部欄新增到 Storefront：
1. 轉到外觀> 自定義> 標題> 頂部欄
2. 填寫以下欄位：
電子郵件地址：
電話號碼：
Topbar 文字：
社交選單：
3. 單擊 「釋出」
如何更改帖子歸檔或部落格佈局
- 轉到外觀> 自定義> 部落格自定義程式> 釋出存檔
- 從 Post Archive Layout 中選擇佈局
- 單擊 「 釋出」
如何更改帖子歸檔或部落格列
- 轉到外觀> 自定義> 部落格自定義程式> 釋出存檔
- 從 Post Archive Column 中選擇列號 （Full Width，2 Column，3 Column＆4 Column）
- 單擊 「 釋出」
如何更改單個帖子或文章佈局
- 轉到外觀> 自定義> 部落格自定義程式> 單個帖子
- 從單個帖子佈局中選擇佈局
- 單擊 「 釋出」
如何更改字型
- 轉到外觀> 自定義> 常規樣式> 排版
- 從字型配對中選擇字型
- 單擊 「 釋出」
WooCommerce 定製
如何更改商店頁面佈局
- 轉到外觀> 自定義> WooCommerce> 商店頁面 – 產品列表
- 從產品存檔佈局中選擇佈局
- 單擊 「 釋出」
如何更改產品詳細資訊頁面佈局
- 轉到外觀> 自定義> WooCommerce> 商店頁面 – 產品列表
- 從產品存檔佈局中選擇佈局
- 單擊 「 釋出」
如何更改星級顏色
- 轉到外觀> 自定義> WooCommerce> 評級，銷售徽章及其他
- 單擊星形顏色以更改顏色。
- 單擊 「 釋出」
如何更改銷售徽章顏色
- 轉到外觀> 自定義> WooCommerce> 評級，銷售徽章及其他
- 單擊銷售徽章顏色和銷售徽章背景顏色以更改顏色。
- 單擊 「 釋出」
