如何全新安裝和配置 WooCommerce 及 Storefront 店面主題?

如何全新安裝和配置 WooCommerce 及 Storefront 店面主題?

在使用 WordPress 啟動 WooCommerce 商店時,Storefront 是最靈活和可擴展的主題之一。由於其乾淨的代碼架構,它在用戶中非常受歡迎,目前超過 100,000 個在線商店使用 Storefront 作為他們的 WordPress 主題。

安裝 WooCommerce 店面主題

您可以通過兩種方式安裝 Storefront WordPress 主題,方法是從儀錶板搜索主題或手動上傳主題。


使用 WordPress 儀錶板安裝

安裝 Storefront 的最快方法是通過 WordPress 儀錶板。按照以下步驟通過 WordPress 儀錶板安裝 Storefront。

  1. 轉到外觀> 主題> 添加新的
  2. 在搜索框中輸入 “Storefront ”,然後按 Enter 鍵。
  3. 將鼠標懸停在 Storefront 屏幕截圖上。
  4. 選擇 “ 安裝 ” 按鈕。
  5. 單擊 “ 激活”

手動安裝 Storefront

  1. 從 wordpress.org 下載最新版本的 Storefront
  2. 轉到外觀> 主題> 添加新的
  3. 單擊 Upload Theme 並選擇以前下載的 zip 文件。
  4. 單擊立即安裝
  5. 單擊 “ 激活”

購買中文版:

https://mall.weixiaoduo.com/item/storefront


設置主頁

Storefront 有一個經過深思熟慮的內置主頁模板。其乾淨的結構將幫助您的受眾輕鬆找到您銷售的產品。默認的 Storefront Homepage 模板中有 6 個部分。但您可以根據需要添加或刪除該部分。查看此演示,以便清楚了解 Storefront 主頁。
默認主頁部分:

  • 頁面內容
  • 產品類別
  • 最新產品
  • 特色產品
  • 熱門產品
  • 銷售產品
  • 最暢銷的產品

分配主頁模板

要設置主頁模板,請按照下列步驟操作:

  1. 轉到儀錶板 – > 頁面並創建一個標題為 “ 主頁 ” 或任何您喜歡的頁面。
  2. 添加您喜歡的任何歡迎內容,這些內容將顯示在產品上方。
  3. 在右側,您會看到一個標題為 “ 頁面屬性 ” 的框
  4. 從 “ 模板 ” 下拉列表中選擇 “ 主頁 ” 。
  5. 單擊 “ 發布”或 “ 更新”以保存更改。

顯示主頁模板

發布頁面後,現在您必須將此主頁顯示為您網站的首頁。因此,任何登陸您網站的人都會首先看到此頁面。要進行此設置,請按以下步驟操作:

  1. 轉到儀錶板> 設置> 閱讀
  2. 在您的主頁顯示下選擇靜態頁面(在下面選擇)
  3. 在 “ 主頁”下拉列表中選擇以前的主頁模板分配頁面。
  4. 單擊 “ 保存更改”

重新排序店面主頁部分

您可以使用掛鈎或使用名為 Homepage Control 的插件更改 Storefront Homepage 部分的順序。請按照以下步驟重新訂購您的主頁部分:

  1. 下載並安裝主頁控制
  2. 轉到外觀 – > 自定義 – > 主頁控制
  3. 根據需要拖動並重新排序部分。
  4. 單擊 “ 保存並發布”以保存更改。

配置菜單

在店面主題中,您可以在 3 個位置顯示菜單。

  1. 主菜單 – 顯示在站點徽標下方。
  2. 二級菜單 – 在搜索框附近的徽標旁邊。
  3. 手持菜單 – 移動設備菜單。

設置菜單

默認情況下,如果未設置特定的主菜單,WordPress 會將您的所有頁面顯示為主菜單。有時它會讓用戶感到困惑,並且很難弄清楚這些頁面是如何進入菜單的。


創建新菜單並向其添加頁面

  1. 轉到 “管理” 面板,然後選擇 “外觀”>“菜單”
  2. 在頂部,您將找到 “菜單名稱” 字段。在這裡寫下您的菜單名稱。
  3. 從左側單擊 Pages(假設您要將頁面添加到菜單)
  4. 單擊 “查看全部” 以獲取所有已發布頁面的列表。
  5. 勾選要在菜單上顯示的頁面。
  6. 選擇頁面後,單擊 “添加到菜單” 按鈕。
  7. 拖放菜單項以根據您的喜好重新排列它們。
  8. 單擊保存菜單

分配菜單

創建菜單後,將菜單指定到要顯示的位置。導航到外觀> 菜單> 菜單設置,然後從顯示位置複選框中選中位置


添加類別菜單

  1. 轉到 “管理” 面板,然後選擇 “ 外觀”>“菜單”
  2. 單擊左上角的 “ 屏幕選項”,然後選中 “ 產品類別”
  3. 現在,在左側窗格中將顯示 “產品類別” 選項卡。
  4. 單擊 “產品類別” 選項卡以展開,選擇類別
  5. 選擇後,單擊 “ 添加到菜單”按鈕。
  6. 拖放菜單項以根據您的喜好重新排列它們。
  7. 單擊 “ 保存”菜單

小工具設置

店面允許您在 3 個不同區域中顯示六個小工具區域。

  1. 側欄 – 主站點內容的左側或右側,
  2. 標題下方 – 位於網站標題下方和內容上方。
  3. 頁腳列 1 – 頁腳區域
  4. 頁腳列 2 – 頁腳區域
  5. 頁腳列 3 – 頁腳區域
  6. 頁腳列 4 – 頁腳區域

設置 WooCommerce

安裝 WooCommerce

  1. 轉到儀錶板> 插件> 添加新 > 搜索插件
  2. 搜索 “WooCommerce”。
  3. 單擊立即安裝
  4. 單擊 “ 激活”

配置 WooCommerce

激活 WooCommerce 後,系統會提示您使用嚮導安裝 WooCommerce。它將處理所有初始設置。它分為 6 個部分。

  • 頁面設置 – 自動配置基本頁面(商店,購物車,結賬,我的帳戶)。
  • 商店位置 – 配置商店位置,貨幣和銷售稅
  • 裝運 – 配置重量單位和尺寸單位
  • 付款 – 設置付款網關。
  • 主題 – 安裝兼容 WooCommerce 的主題。
  • 就緒 –(可選)允許 WooCommerce 收集使用信息。

您可以隨時通過 WooCommerce 儀錶板進行所有這些設置。


將產品添加到 WooCommerce

  1. 轉到 WordPress 儀錶板
  2. 單擊 Products> Add New
  3. 產品名稱字段中寫下您的產品名稱或標題。
  4. 在下面的編輯器中寫下您的產品描述
  5. 現在,您必須將產品的特色圖像和其他圖像上傳到產品庫。
  6. 一個右邊你會找到標題為產品圖像和產品庫的方框
  7. 將特色圖像上傳到產品圖像,將其他圖像上傳到產品庫
  8. 單擊 “ 發布”

設置產品價格和屬性

設置產品價格轉到儀錶板> 產品並選擇任何產品。然後向下滾動到 “產品數據” 部分。以下是所有產品數據部分設置的簡短說明:

產品類別

  • 簡單的產品:簡單的單品。
  • 分組產品:作為系列一部分的產品。
  • 外部/會員產品:商店中列出的產品,但實際產品在其他地方銷售。
  • 可變產品:具有變化(尺寸,顏色)的產品
  • 虛擬產品:不需要運輸的產品。
  • 可下載產品:您必須提供可下載文件的產品。

一般

  • 常規價格:常規產品價格。
  • 銷售價格:折扣產品價格。

庫存

  • 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. 單擊 “發布”


如何更改帖子歸檔或博客布局

  1. 轉到外觀> 自定義> 博客自定義程序> 發布存檔
  2. Post Archive Layout 中選擇布局
  3. 單擊 “ 發布”

如何更改帖子歸檔或博客列

  1. 轉到外觀> 自定義> 博客自定義程序> 發布存檔
  2. Post Archive Column 中選擇列號(Full Width,2 Column,3 Column&4 Column)
  3. 單擊 “ 發布”

如何更改單個帖子或文章布局

  1. 轉到外觀> 自定義> 博客自定義程序> 單個帖子
  2. 單個帖子布局中選擇布局
  3. 單擊 “ 發布”

如何更改字體

  1. 轉到外觀> 自定義> 常規樣式> 排版
  2. 字體配對中選擇字體
  3. 單擊 “ 發布”

WooCommerce 定製

如何更改商店頁面布局

  1. 轉到外觀> 自定義> WooCommerce> 商店頁面 – 產品列表
  2. 產品存檔布局中選擇布局
  3. 單擊 “ 發布”

如何更改產品詳細信息頁面布局

  1. 轉到外觀> 自定義> WooCommerce> 商店頁面 – 產品列表
  2. 產品存檔布局中選擇布局
  3. 單擊 “ 發布”

如何更改星級顏色

  1. 轉到外觀> 自定義> WooCommerce> 評級,銷售徽章及其他
  2. 單擊星形顏色以更改顏色。
  3. 單擊 “ 發布”

如何更改銷售徽章顏色

  1. 轉到外觀> 自定義> WooCommerce> 評級,銷售徽章及其他
  2. 單擊銷售徽章顏色和銷售徽章背景顏色以更改顏色。
  3. 單擊 “ 發布”
文章沒看懂?代碼不會用?需要幫助您可以去論壇提問自助服務台

作者小新

大象、大象 ,你的鼻子怎麼那麼長 ,媽媽說鼻子長才是漂亮 ......