在使用 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> 評級，銷售徽章及其他
- 單擊銷售徽章顏色和銷售徽章背景顏色以更改顏色。
- 單擊 「 發佈」
