WoodMart 電商主題網站 完整教學 架站馬拉松 一氣呵成

 

WoodMart 電商主題網站 完整教學 架站馬拉松 一氣呵成

這篇文章要教大家如何用WoodMart 佈景主題來架設電商網站,WoodMart佈景主題是

大叔最近用的一款主題,以前沒特別注意,直到今年有客戶指定用WoodMart佈景主題

深入了解一番,可以說是一款專攻電商網站的佈景主題,許多豐富的主題可以套用,

編輯器也採用Elementor編輯,真的超好上手。

這篇教學注重在如何架好一個電商網站,整個架站的流程也是依照大叔的習慣來編排,

接下來就跟著大叔一起手把手學習如何架站吧!

為何要用 WoodMart 主題?

WoodMart’ 是一款優質的 WordPress 主題,用於快速建構任何類型的電商網站。WoodMart 使用強大的 AJAX 技術提供非常快速和無縫的電商購物界面,超過 70 個可套用的佈景主題可供選擇,讓你在架設電商網站時可以快速上手。

架設前期的準備

如果你完全沒有任何wordpress操作經驗,可以先看以下幾篇文章來學習wordpress的

基本操作,有了基本認知之後,架設電商網站的速度也會加快。

有關購買網域跟網站空間的教學 : 

Godaddy 網域快速購買完整教學

Bluehost教學 購買 優惠折扣 安裝WordPress超完整詳細流程

Godaddy網域串接Bluehost主機完整教學

有關wordpress的基礎教學 :

WordPress 後台教學 詳細介紹 一氣呵成

Woocommerce 教學 : 功能全面解析完整版

在架站前也必需要先做像下面的圖片類似的網站規劃,這樣在架站時才會有一個方向

跟依據,另外把產品圖片跟LOGO圖片也要先準備好才可以在架站的過程中使用。

網站規劃示意圖

如何購買及安裝佈景主題

首先我們可以先到這個網站先加入會員後,購買WoodMart 佈景主題,費用大概是

台幣1,766元,購買好佈景主題之後下載到電腦裡。

WoodMart 佈景主題架設電商網站 一氣呵成 完整教學

接下來在會員下載頁面就可以把Woodmart佈景主題下載下來

下載好佈景主題到電腦之後,我們到wordpress控制台的工具列選擇外觀>>佈景主題

跳到佈景主題頁面後點選上方的安裝佈景主題按鈕。

WoodMart 佈景主題架設電商網站 一氣呵成 完整教學

然後跳到下個畫面,我們點選上傳佈景主題按鈕。

WoodMart 佈景主題架設電商網站 一氣呵成 完整教學

接著選擇下載好的WoodMart主題上傳到網站,之後點選立即安裝按鈕。

安裝完成後點選啟用按鈕。

啟用後會跳到WoodMart的追定頁面,會引導你設定佈景主題的功能,點選畫面的

LET’S START開始設定。

下一頁是佈景主題的執照啟動說明,輸入序號啟動或是點選跳過這個步驟。

下一頁我把頁面轉換成中文來說明,這一頁是問你要不要安裝佈景主題的子主題,

我們可以點選安裝,安裝好後點選下一步按鈕。

下一頁會有兩個編輯器給你選擇,一個是Elementor一個是WPBakery,我們選擇

Elementor安裝選好之後點選下頁按鈕。

下一頁要安裝並啟動佈景主題的相關外掛,所以直接點選安裝並啟動,啟動之後點選

下一步按鈕。

下一頁是可讓你選擇要套板的佈景主題,有很多可以選擇,我們安裝第一個版型

來做為本次的電商架站教學使用。

安裝完成後可以選擇預覽看一下安裝完成後的版型,也可以選下一步按鈕。

跳到完成頁面,到這裡版型安裝就完成了,我們接下去設定Woocommerce購物車。

設定Woocommerce購物車

首先設定公司地址相關訊息。

輸入完地址之後點選繼續按鈕會跳出一個小視窗,內容是要追踪使用情況,大家可以

自行選擇要或不要。

跳到下一頁是選擇商店的產業類別,選擇一個合適的就可以了,選好後點選繼續。

 

 

下一頁是選擇商店銷售的商品類別,選擇一個合適的就可以了,選好後點選繼續。

WoodMart 主題架設電商網站 一氣呵成 完整教學

下頁是選擇你要銷售的商品有多少樣以及是否有在其它平台銷售

下一頁會看到”將建議的商用版功能新增至我的網站”這一個選項,點開來會有幾個

軟體,在這裡我們取消勾選,先不安裝這些軟體,以後有需要再安裝就好。

下一頁是選擇佈景主題,這裡我們選擇繼續使用目前使用中的佈景主題這一項。

畫面轉跳到下一頁之後,我們點選工具列的woocommerce>>設定 ,繼續設定

woocommerce購物車。

一般設定

進到一般設定頁面,輸入商店的一些基本資料,設定方式如下圖 ,設定完成後點選

頁面最的的儲存設定按鈕。

商品設定

接著點選上方的商品頁籤,跳到商品頁,在商店頁面這一頁大部份都不用更動,只有

重量跟尺寸單位這裡要看一下是否符合你銷售商品的特性,可以依照商品的特性來選擇

重量跟尺寸的單位。

再來看商品評價這裡不用打勾,最後儲存頁面。

接下來看庫存選項

在保留庫存 (分)這項可以讓你設定顧客放在購物車裡的商品要保留,多少時間,預設

是60分鐘,這個時間大叔是覺得差不多,一個小時沒結帳就取消購物車的商品。

下一個低庫存通知及無庫存通知都要打勾。

通知收件人欄位輸入網站負責人的email。

下一個低庫存臨界值讓你設定庫存低於多少會發出通知給網站負責人。

無庫存臨界值保持0。

無庫存可見度這裡打勾,沒有庫存的產品不會在前台出現。

庫存顯示格式有三種格式給你選擇,選擇一個合適的就可以了,設定好後儲存設定。

WoodMart 主題架設電商網站 一氣呵成 完整教學

運送方式

接下來看運送方式,直接點選畫面中的新增運送區域按鈕。

WoodMart 主題架設電商網站 一氣呵成 完整教學

接著在區域名稱裡輸入台灣然後區域中的地區也選擇台灣。

下一步點選新增運送區域。

WoodMart 主題架設電商網站 一氣呵成 完整教學

接著會跳出一個小視窗有三個選項,分別是單一費率、免費運送以及自行取貨。

我們先選第一個單一費率來設定,選好後按新增運送方式按鈕。

新增好之後我們點選單一費率編輯進入編輯頁面。

WoodMart 主題架設電商網站 一氣呵成 完整教學

進到設定頁面第一個方案標題可以輸入宅配或郵局包裹。

稅金狀態選擇無。

費用欄位輸入一個固定的運費費用。

WoodMart 主題架設電商網站 一氣呵成 完整教學

接著我們繼續新增下一個運送方式,點選新增運送方式,然後在選擇免費運送,點選

新增運送方式在點一下免費運送的編輯進到編輯頁面。

WoodMart 主題架設電商網站 一氣呵成 完整教學 WoodMart 主題架設電商網站 一氣呵成 完整教學 WoodMart 主題架設電商網站 一氣呵成 完整教學

免費運送這一頁看到”如果要免運費的話需要..”

這一項是設定免運條件,有四種可以選擇 :

  • 第一個免運折扣碼 : 輸入折扣碼就可以免運
  • 第二個最小訂購金額 : 大部份的網購平台都用這種方式,購買一定金額才可以免運
  • 第三個是使用最小訂購金額或著是使用折扣碼這二個符合其中一個條件就可免運
  • 第四個是要達到最小的訂購金額並且還要同時使用折扣碼

以上這四種大叔推薦使用最小訂購金額這一項比較單純也是最多人使用的方式。

選好最小訂購金額後我們在下一欄最低訂購金額欄位裡輸入最小的購買金額。

比如可以設定在1000還1500元之間,這也是比較多人設定的金額設定好後儲存設定。

WoodMart 主題架設電商網站 一氣呵成 完整教學

最後我們新增自行取貨這個選項

自行取貨稅金狀態一樣選擇無,費用輸入0然後儲存就可以了。

WoodMart 主題架設電商網站 一氣呵成 完整教學

WoodMart 主題架設電商網站 一氣呵成 完整教學

付款設定

woocommerce內建的付款方式有銀行轉帳、支票付款、貨到付款三種。

但是這三種都不是台灣電商目前主要的線上付款方式,台灣電商線上付款第一種是透過

銀行的線上金流串接程式,串接到woocommerce購物車,這種方式需要有一定的程式

設計能力才行,新手小白一定是沒辦用。

另外一種是透過第三方金流串接方式,也是自架電商網站金流的主要方式。

所以我們接下來要透過綠界科技的第三方金流串接來完成線上金流的設定。

如何安裝綠界金流?

目前要安裝綠界科技金流有兩種外掛可以達成。

一個是綠界技專門為woocommerce購物車寫的金流外掛。

一個是”RY先生“所寫的外掛。

先來說明綠界金流出品的外掛,到wordpress的後台點選工具列的外掛>>安裝外掛。

WoodMart 主題架設電商網站 一氣呵成 完整教學

接著在安裝外掛頁面的搜尋欄位輸入”ECPAY”就會出現綠界科技的金流外掛,我們點選

立即安裝按鈕,安裝完成後點選啓用。

Woocommerce購物車整合綠界金流 完整指南

下一步會跳到外掛頁面,在這裡會看到剛安裝好的綠界金流外掛。

Woocommerce購物車整合綠界金流 完整指南

接著我們點選工具列的Woocommerce>>設定。

Woocommerce購物車整合綠界金流 完整指南

跳到設定頁面之後點選畫面上方的付款選項。

接在就會看到付款設定頁面,點選畫面中綠界科技右邊的啟動按鈕。

啟動之後再點選左邊綠界科技字樣進到設定頁面。

Woocommerce購物車整合綠界金流 完整指南

進到設定頁面看到”特店編號(Merchant ID)”、”金鑰(Hash Key)”、”向量(Hash IV)”。

這三項如果有申請好綠界科技會員,可以到綠界科技後台去取得,如果還沒申請也沒

關係,可以用欄位裡己經輸入好的測試資料來進行測試。

到綠界科技官網,選畫面右上管理後台接著輸入帳號密碼,就會進到後台系統頁面了。

Woocommerce購物車整合綠界金流 完整指南

Woocommerce購物車整合綠界金流 完整指南

進到管理介面後點選左邊工具列的系統開發管理按鈕,會展開來一些選項,點選系統

介接設定這個選項。

Woocommerce購物車整合綠界金流 完整指南

Woocommerce購物車整合綠界金流 完整指南

在畫面右邊就會看到woocommerce綠界金流需要的三組密碼,分別是商店代號

介接HashKey以及HashIV這三組密碼。

Woocommerce購物車整合綠界金流 完整指南

回到woocommerce把三組密碼依序填入綠界金流的欄位,然後把下方的付款方式

依照自己的需求勾選,最後儲存就可以了。

Woocommerce購物車整合綠界金流 完整指南

接著可以測試一下在網站買個東西,然後到結帳頁面就會看到綠界金流的付款介面了。

Woocommerce購物車整合綠界金流 完整指南 綠界金流

綠界金流外掛安裝方法二

接下來我們來看如何安裝RY先生所寫的RY WooCommerce Tools

綠界金流外掛程式。

這個外掛有以下的幾項功能

  • 配合台灣本地習慣的修改
  • 提供 綠界金流 支援
  • 提供 綠界物流 支援,支援項目為 超商取貨(C2C) 與 宅配 模式
  • 提供 藍新金流 支援
  • 提供 藍新物流 支援,支援項目為 超商取貨 模式
  • 提供 速買配金流 支援
  • 提供 速買配物流 支援,支援項目為 超商取貨 模式

另外外掛還有付費版的,增加一些功能,有需要的朋友可以去

RY WooCommerce Tools Pro這個連結看看。

以下示範如何安裝外掛,一樣在wordpress的後台工具列點選外掛>>安裝外掛

在安裝外掛頁面右邊的搜尋欄位輸入RY WooCommerce Tools

綠界金流

啟動後會跳到外掛頁面,看到RY WooCommerce Tools出現了之後點選設定。

綠界金流

在設定頁面點選啟用綠界金流模組,然後滑到最下方把先顯示姓氏輸入欄位這一項

也打勾,然後儲存設定。

綠界金流

儲存之後上方最出現綠界金流設定的選項,點選進去

Woocommerce購物車整合綠界金流 完整指南 綠界金流

在設定頁面把啟用 綠界金流 模組這一項打勾,然後下方的綠界金流測試模試的打勾

給取消,再往下輸入綠界金流系統串接的密碼,最後儲存。

綠界金流

下一步我們選擇付款這頁,在這一頁會看到綠界金流的功能選項,

依照自己的需求開啟功能點選好之後儲存。

綠界金流

回到前台的結帳頁面就可以看到綠界金流己經設定好了

綠界金流

帳號及隱私權

第一項訪客結帳允許客戶免帳號下訂單這一個選項,如果你的網站允許顧客可以不用

登入帳號下單的話就打勾不然就取消勾選。

允許顧客在結帳過程中登入現有的帳號這一項打勾。

建立帳號這一項,允許客戶在結帳過程中建立帳號,還有允許客戶在「我的帳號」

頁面上建立帳號這兩個打勾,其它選項取消打勾。

下面剩下的內容保持預設就可以了最後點選儲存設定。

電子郵件

電子郵件這一頁可以設定當訂單有變化時應該要將通知寄給誰,這部份保持預設就好

不用做更動。

電子郵件發送選項這裡輸入寄件人的名稱跟email。

電子郵件樣板這一項可以設定我們寄給顧客時的email版型。

點選頁面中的”按這裡預覽你的電子郵件樣板”就會開啟版型視窗”。

頁尾文字的地方只要修改我反白起來的文字部份就好,其它的文字不要變動。

基本顏色、背景色彩、內容背景顏色、內容文字顏色這幾項,可以讓你修改版型的配色

全部設定好之後點選儲存設定。

到這裡Woocommerce購物車的主要設定就完成了。

商品分類設定

接下來我們設定商品分類,先為商品做好分類,這樣商品才可以依照不同的分類上架。

回到工具列選擇 商品>>分類

進到分類設定頁面,在左邊欄位依序輸入商品分類的資料。

這裡要說明的是顯示類型的選擇,如果是沒有上層分類就選商品這項。

如果是有上層分類的就選子分類,兩者是代表在主分類跟子分類都會顯示,一般都

用不到兩者這一項。

Woocommerce 購物車 : 商品上架教學 完整功能解析

Woocommerce 購物車 : 商品上架教學 完整功能解析

在設定好商品分類之後點選增加新分類,就會在右邊的分類表裡出現新分類了,之後

只要繼續新增分類就可以了。

Woocommerce 購物車 : 商品上架教學 完整功能解析

商品標籤

什麼是商品標籤?

標籤的目的是為了增加跟商品的關聯性,將具體的商品、內容或話題,可以關聯在一起

,以便增加SEO關鍵字搜尋。

所以標籤設定頁面可以預先設定好常用的標籤,設定方式跟分類的操作方式差不多。

Woocommerce 購物車 : 商品上架教學 完整功能解析

商品屬性

什麼是商品屬性?

屬性是指商品額外的可選擇資料,例如最常見的就的商品的顏色、尺寸、重量等等,

這些都是在屬性頁面設定,比如預先建立好顏色的屬性,那麼在商品上架時就可以為

商品增加屬性。

Woocommerce 購物車 : 商品上架教學 完整功能解析

新增好屬性之後在右邊欄位會出現新增好的屬性,比如圖片中的顏色這個屬性。

接著點選規劃項目會進到設定頁面,在設定頁面就可輸入需要的顏色。

Woocommerce 購物車 : 商品上架教學 完整功能解析

到這裡基本要事先設定好的都己經完成了,接下來要進入商品上架了。

商品上架

woocommerce購物車 商品上架細分為簡單商品、組合商品、外部商品、加盟商品、

可變商品、虛擬商品、可下載商品這幾個項目。

常設計到的購物網站大部份都是簡單商品、組合商品、可變商品。

我們先從基本的簡單商品上架來說明,學會基本的商品上架規則,這樣之後其它類型

的商品上架就會比較快理解。

安裝文字編輯加強外掛 Advanced Editor Tools

進入商品上架教學之前,我們先要安裝 Advanced Editor Tool 這款文字編輯加強外掛

原本的Wordpress文字編輯的介面相當的陽春,可以選擇的功能很少,但是透過安裝

Advanced Editor Tool 這款外掛,可以讓文字編輯功能加強許多。

我們在安裝外掛頁面的搜尋框裡輸入 Advanced Editor Tool ,在出現外掛之後點選

安裝並且啟用。

啟動完成之後,在外掛頁面的 Advanced Editor Tool 點選設定,然後進入設定頁面

會看區塊編輯器跟傳統編輯器兩種可以選擇,我們選擇傳統編輯器。

設定所需的功能後,拉到頁面的最下方點選儲存就可以了,接下來我們開始上架商品。

簡單商品上架

簡單商品是指單一類別只有一種顏色一種尺寸一種款示這類的商品。

比如小米藍牙耳機 2 SE這個產品頁面可以看到商品只有一種顏色的規格,沒有其它的

選項可以選擇,這就是簡單商品的類型。

Woocommerce 購物車 : 商品上架教學 完整功能解析

我們點選新增商品後會進到商品設定頁面,我們看到第一個欄位這裡輸入商品的名稱,

如果有安裝elementor編輯器外掛,就會在畫面中看到使用elementor編輯的按鈕。

點選會跳到elementor編輯頁面,大叔這裡是不用elementor編輯的方式。

接著往下看會有兩個按鈕分別是新增媒體按鈕以及Add Form加入表格按鈕,再往下

就是排版文字工具列,類似word的工具列。

再來下方的大片空白欄位,就是輸入商品的詳細說明以及圖片。

Woocommerce 購物車 : 商品上架教學 完整功能解析

要插入商品圖片就點選上方的新增媒體按鈕就會跳到媒體庫頁面

Woocommerce 購物車 : 商品上架教學 完整功能解析

在媒體庫頁面點選上傳檔案會跳到檔案上傳的頁面

Woocommerce 購物車 : 商品上架教學 完整功能解析

接著點選畫面中的選取檔案,會開啟選取圖片的頁面

Woocommerce 購物車 : 商品上架教學 完整功能解析

然後選擇好事先準備好的商品圖片,再點選右下角的開啟按鈕就會開始上傳圖片。

上傳好商品圖在媒體庫頁面的右邊欄位下方有幾個選項可以設定

在附件顯示設定這裡可以預先設定好要插入圖片的方式,設定好之後點選插入至商品

按鈕就完成了。

如果有很多圖片,也可以一次把圖片全部選擇上傳,然後一次插入到商品中。

Woocommerce 購物車 : 商品上架教學 完整功能解析

下一項商品資料設定,點選商品資料欄位會出現下拉選單,先從簡單商品開始教學,

在欄位裡選擇簡單商品這一項。

Woocommerce 購物車 : 商品上架教學 完整功能解析

選好之後看一下旁邊有兩個選項可以勾選,分別是虛擬跟可下載兩個。

虛擬就是虛擬商品,例如電子書、虛擬貨幣、遊戲道具等。

可下載就是這個產品是不是下載類型的商品,例如電子書。

如果商品符合這兩個規範就勾選。

一般項目

設定商品的價格,在原價的欄位輸入價格,如果有活動打折的話,就在折扣價欄位輸入

價格,在折扣價欄位的後面有個時間表可以點選,之後會有折扣時間的欄位可以讓你

設定折扣時間的區間。

庫存項目

把欄位裡的資料都依序輸入就可以了。

運送方式

這裡可以輸入商品的重量跟尺寸資料,讓顧客在購買時可以了解。

什麼是追加銷售跟交叉銷售?

連結商品,這裡有追加銷售跟交叉銷售兩種設定

追加銷售是鼓勵消費者買更多,例如加價購,除了原本想購買的商品之外,還可以

追加購買相關配件。

交叉銷售是讓消費者選購更多商品,在原本的消費之外,同時購買其它相關的產品,

例如熱賣商品或是猜你喜歡都是交叉銷售的一種,這兩種模式是滿重要的行銷功能,

好好利用可以幫助增加銷售。

屬性

就是對應我們之前預先設定好的屬性,比如我先設定好了顏色的屬性,那麼我們現在

自訂商品屬性這裡就會看到顏色的選項,點選顏色選項,按新增就會在下方新增一個

顏色的項目可以設定。

進階

第一個欄位是可以輸入一些購買的備註給下單的顧客看,例如退換貨需知或是收到貨

記得開箱錄影這類的備註。

第二個選單順序保持預設就好不用更動。

到這裡簡單商品的設定就完成了,接下來說明可變商品的設定。

可變商品上架

回到商品資料選擇欄位並點選欄位裡的可變商品,接下來,示範可變商品的上架流程。

什麼是可變商品?

可變商品就是指商品有多重的選項可以選擇,比如一個女生的包包有五種尺寸款式,

每種款式又都各有五種顏色,這種的商品就要透過可變商品來設定。

Astra Theme 教學 免費電商網站 一氣呵成 完整指南

在可變商品的部份包含庫存、運送方式、連結商品這三項的設定都跟簡單商品的設定

一樣,所以我們直接跳到屬性設定這個部份。

可變商品的屬性設定跟簡單商品差不多,不同的是多了一個用於變化類型這一個勾選框

,這個框要勾選起來,變化類型的商品才能使用。

接下來我們來設定變化類型這一項,在新增變化類型這裡直接按旁邊的送出按鈕,接著

下方會產生一個設定選項。

這個選項可以依你商品的特性來選擇,例如顏色跟尺寸選擇好商品特性之後點選畫面

最右邊的小箭頭標誌。

在展開來的商品詳細設定頁面依下圖填寫內就可以了。

內容輸入完畢之後儲存,接著只要重覆上面的步驟加入商品就可以了。

接著我們來設定網站的選單。

製作網站選單列

假設電商網站有電腦螢幕監視器HDMI 線材直播設備生活百貨這5種類別商品

在販售,那網站主選單列就會有這5種商品。

我們在工具列選擇外觀>>選單。

在選單設定頁面選擇建立選單

建立好後,在左邊的項目列拉到最下面會看到商品分類,點開來就會看到之前我們設定

好的商品分類,把這些分類勾選起來,然後點選新增至選單。

然後右邊的主選單項目就會新增分類,這些分類項目可以用滑鼠拖移來更改排序。

設定好之後點選最右邊的儲存選單。

下一步我們來設定網站首頁的版面。

設定網站首頁版面

我們在控制台的工具列選擇>>WoodMart>>Header builder,進到頁首設定。

設定網站上方選單列

進到設定頁面,點選畫面右上角的 Add new header 按鈕來新增一個網站的頁首。

進到設定頁面會有版型讓你挑選,你可以挑選自己喜歡的頁首版型,也可以創建一個

全新的版型,這裡大叔要用自訂版型來做教學,我們選擇最上方的Empty header。

進到設定頁,第一個欄位輸入”頁首版型”,然後下面主要有三個區塊可以設定。

點選第二區第一個區塊的加號,在跳出來的視窗裡點選logo,然後把準備好的Logo

上傳到網站。

點選”Upload 上傳檔案”。

 

選擇電腦裡的logo圖檔上傳。

接下來點選中間區塊的加號,在跳出來的視窗點選”Main Menu”新增選單列,然後

在新視窗的第一項”Choose menu”下拉選單點選之前設定好的選單列。

接下來選擇第三個區塊的加號,然後添加”Wishlist”工具。

接著我們繼續添加 “Cart”並且選擇一個喜歡的樣式,最後儲存。

最後我們在新增一個”Account”

三個區塊都設定好了之後點選最下方的儲存,很重要,這個動作沒做剛才的設定

就不會完成。

到這裡我們可以先來首頁,看一下剛才的設計版型。

經過剛才一連串的操作,就會出現如上圖一樣的版型配置。

接下來我們來設計首頁的廣告宣傳大圖。

首頁廣宣大圖設計

點選控制台工具列的 “Slides”幻燈片項目。

進到Slides 幻燈片 設定頁面,己經有三個設定好的幻燈片了,我們直接利用這三個

幻燈片來進行修改,點選第一個”Accessories slide 1 “。

進到編輯頁面,我們點選畫面右下的精選圖片項目來更換廣宣圖片

接著上傳事先畫好的廣宣圖片,圖片的尺寸是1920X700 大家可以依照這個尺寸來設計廣宣圖

上傳完精選圖片之後,點選右上方的更新按鈕完成精選單片更新

下一步點選畫面中央的 “使用ELEMENTOR編輯”

在編輯頁,我們首先修改Title的文字內容,點選導覽器下方的”Section title” 然後左邊

title工作區域看到一行英文字,我們可以把這一行英文字修改成我們需要的文字內容

輸入好需要的內容之後,選擇上方的樣式項目,接著修改字型樣式

修改好Title之後,我們接著修改下方的內容文字

接下來我們把下方的TO SHOP這個按鈕刪除,然後修改READ MORE的文字內容

 

全部設定好之後我們點選左側工具列最下方的更新按鈕來儲存設定

更新完就可以離開編輯頁面了,點選工具列最上方的三條符號,展開的選項裡選擇

最下方的離開選項

回到wordpress編輯頁面,我們把名稱改掉然後點選更新

到這裡首頁的幻燈片設定就完成了,接下來重覆設定第二張跟第三張幻燈片就可以了

設計好廣宣大圖之後我們繼續往下做版型設計

首頁版型設計

我們來到網站的首頁,點選最上方的”使用Elementor編輯”字樣,進入編輯模式

假設我們把首頁的版型分為最新商品、明星商品、熱銷商品、超值推薦這四個區塊

下來把原先的版型格式都刪除,刪除版型把滑鼠移到藍色方框上,然後點選刪除符號就可以了

全部刪除完之後,我們首先來增加一個空白的間隔,讓上方的廣宣大圖跟下面的項目有一些距離,

不會大近,我們點選畫面中的加號來新增一個欄位放空白間隔

新增好空白欄位之後,從左側工具列把空白欄位元素拖到剛才新增的欄位裡

拖到欄位裡之後,左側的工具列可以調整欄位的高度

接著我們新增第二個欄位,這個欄位把它定義為”新品到貨”,一樣點選畫面中的”加號”,然後新增

一個欄位,從左側工具列把標題元素拖到欄位裡,接著在左側工具列設定詳細資料

 

到這裡我們暫時要離開編輯介面,去安裝一個免費的woocommerce產品外掛,因為接下來的產品

規劃會要用到這一款好用的外掛,我們先按左側工具列最下方的更新按鈕來儲存頁面

接著離開Elementor編輯介面回到wordpress的控制台介面

新增ShopLentor 外掛

我們在外掛安裝頁面利用搜尋關鍵字ShopLentor就可以找到這款外掛,直接安裝然後啟動

然後我們就可以回到剛才的首頁編輯介面,繼續編輯首頁

加入商品元素

回到首頁Elementor編輯模式,左側工具列往下拉就會看到剛才新增的Shoplentor外掛

這裡會顯示為WOOLENTOR ADDONS 這是Shoplentor以前的舊名稱,

“WL:Product type “這個元素直接拖到欄位裡

接下來在左邊的工具列有一些選可以設定,大叔把內容轉成中文這樣比較好說明

第一個產品風格,是選擇在滑鼠滑在產品上時會出現加入購物車的樣式

第二個過濾,有六種商品模式可以讓你選擇,這裡我們選擇最近產品,這樣就會把最

新上架的產品排列出來

然後下一個”行列”選擇4列,”行”選擇1行,產品數量選擇8,產品類別欄位可以讓

你選擇要呈現的產品類別

接下來我們往下新增一個空白間隔,讓區塊與區塊不要靠太近

新增好空白間隔後我們新增“熱銷產品”區塊,在過濾的地方選擇暢銷產品這一項

最後我們在新增一個“好評推薦”的區塊,在過濾的地方選擇最受好評的產品

到這裡我們首頁的版型規劃就完成了

設定側邊產品 Menu 欄位

接下來我們要設定產品頁面的側邊 Menu 欄位,方便顧客可以做產品類別的選擇

要設定側邊欄位,會用到小工具這一個項目

但是大叔會安裝舊版的小工具外掛,因為舊版的小工具比較直觀,新版小工具不好用,

所以先到外掛頁面安舊版小工具外掛

安裝啓動舊版小工具後我們到 外觀>>小工具頁面,在這裡可以設定我們的側邊欄位

點選小工具頁面右邊的 Shop page Widget Area 展開內容

然後除了依價格篩選這一項以外的項目都刪除,刪除的方式是點開項目然後拉到項目的

最下方就會看到刪除選項

全部刪除完之後,點選依價格篩選這一項,然後把欄位裡的英文字修改成依價格篩選

.

下一步我們把左邊的商品分類這個項目,拖到依價格篩選項目的下方

然後把商品搜尋拖到依價格篩選項目的上方,總之左邊的功能,可以拖到右邊各種項目

的欄位裡使用

到這裡商店的基本側邊欄位就設定好了,接下來設定單一產品頁的側邊欄

單一產品頁側邊欄設定

原本的產品頁是沒有側邊欄位的,如下面這張圖片

這時我們就要替產品說明頁面增加側邊欄位,方便顧客可以選擇產品

我們在左邊工具列選擇Theme settings>>Single product,然後Single product sidebar

這一項有三個樣式可以選擇,第一個是全寬頁面,第二個是欄位在產品的左側,第三個

是欄位在產品的右側,我們選擇側邊欄在產品左側這個樣式,也是比較常見的樣式

選好左側邊欄位之後記得要點選頁面最下方的儲存按鈕。

接下來在左側工具列選外觀>>小工具,然後選擇Single product page Widget Area

把左邊的商品分類跟商品搜尋都拉到Single product page Widget Area

接著點選左側工具列的Theme settings,在Theme settings頁面點選上的的Layouts

進到Layouts頁面,看到最下方的Single product layout Accessories 這一項,在這一項

的右邊有一個起動開關,我們把它關掉,如果這個沒關掉,剛才的側邊欄會沒有效果