【Divi教學】如何用Divi設計WooCommerce線上購物網站

by

【Divi教學】如何用Divi設計WooCommerce線上購物網站

by

*更新:Divi正式推出購物車及結帳頁面的Module啦~

線上購物是目前科技社會不可缺少的銷售管道之一,如果想要不受任何平台限制地製作一個自己的線上購物網站,利用Wordpress建站 + 安裝Woocommerce線上購物功能 + Divi設計商品頁面,這個方式不需要付任何手續費給Wordpress,還能讓你擁有網站的所有權,會是我目前最推薦的架站方式之一。

而這篇文章主要要教你的是,如何使用Divi編輯器設計你的線上購物網站,Divi的使用者可以利用Divi編輯器,來設計Woocommerce的各個頁面,例如:商品列表頁面Shop Page、商品頁面Product Page、購物車頁面Cart Page、結帳頁面Checkout Page等等。

並且,我會向你介紹,最實用的四個搭配Woocommerce及Divi的外掛,讓你的購物網站比別人的功能更完整,視覺上更漂亮!

在文章開始前,如果你對Divi主題還不熟悉,歡迎你先閱讀【Divi新手必看】網站設計完整步驟教學,看這篇就夠!了解Divi的基礎設定,如果你還沒購買Divi主題,可以透過這個連結,享有10%OFF的優惠購買Divi,那麼,我們就開始正式進入主題囉!

商品模板

Divi有提供WooCommerce的商品模板 Template 功能,只要你設計好商品模板,就不需要再逐一個別設計每個產品頁面,一但新增產品,系統就會自動套用這個商品模板,來展示你的商品頁面

那麼,要如何設定商品模板呢?在安裝完Divi到你的Wordpress網站後,點選左邊功能列的Divi > Theme Builder > 右邊的+號,並在選單中(如下圖),選擇All Products (All 商品),並且使用下一段提到的Woo Modules進行設計。

Divi theme builder

Divi Woo Modules (WooCommerce Modules)

Divi所提供的Woo Modules,目前一共有25種Module,可以用來製作商品列表、商品頁面、購物車頁面、以及結帳頁面,他們各自有著不同的區塊功能,你可以依照網站風格作取捨,不一定要全部都使用。

Divi - Insert Module

下列Woo Modules中,1 是商品列表,可以用於商店頁面,2-17 可以用於設計商品頁面,而18-20可用於設計購物車頁面,最後21-25則是用於設計結帳頁面。

  1. 商店頁面 – Woo Shop:商品列表
  2. 商品頁面 – Woo Add To Cart:加入購物車
  3. 商品頁面 – Woo Breadcrumb:頁面路徑
  4. 商品頁面 – Woo Description:描述
  5. 商品頁面 – Woo Images:圖片
  6. 商品頁面 – Woo Price:價格
  7. 商品頁面 – Woo Related Product:相關商品
  8. 商品頁面 – Woo Stock:庫存數量
  9. 商品頁面 – Woo Title:標題
  10. 商品頁面 – Woo Additional Info:額外資訊(尺寸、顏色款式等)
  11. 商品頁面 – Woo Cart Notice:已加入購物車通知
  12. 商品頁面 – Woo Gallery:相簿(滑動圖片)
  13. 商品頁面 – Woo Meta:貨號
  14. 商品頁面 – Woo Rating:評分
  15. 商品頁面 – Woo Reviews:評價留言
  16. 商品頁面 – Woo Tabs:商品資訊(將描述、額外資訊、評價結合在一起)
  17. 商品頁面 – Woo Upsell:你可能也喜歡的商品
  18. 購物車頁面 – Woo Cart Products:目前在購物車的商品列表
  19. 購物車頁面 – Woo Cart Totals:目前購物車的運費、總金額
  20. 購物車頁面 – Woo Cart Cross Sells:顯示已被放入購物車內的商品的其他相關商品
  21. 結帳頁面 – Woo Checkout Billing:帳戶資料
  22. 結帳頁面 – Woo Checkout Shipping:運送資料
  23. 結帳頁面 – Woo Checkout Information:額外資訊
  24. 結帳頁面 – Woo Checkout Details:訂購細節及金額
  25. 結帳頁面 – Woo Checkout Payment:付款方式選擇

1.如何製作商品列表Shop Page

通常我會使用Divi的Shop module來展示商品的列表,並且搭配其他不同的Module設計整個商店頁面。

Divi shop page

Shop Module可以讓你調整這個列表顯示的商品類型、單頁商品數量、一列顯示多少個商品、排列順序等等,另外你可以在Element中開啟或者關閉列表下方的頁數選項。

而在Design選項中,你可以調整各種顏色、文字大小、滑鼠移到圖片上時要顯示哪一種icon等等,按照你的網站風格設計即可。

Divi Shop Module Settings

2.如何製作商品頁面 Product Page

下圖是我用Divi的編輯器製作了一個簡易的商品頁面,為了畫面美觀,我沒有使用所有的Module,但你仍然可以參考下方圖片,比較快地暸解到製作商品頁面時,基本常用的幾個Woo Module有哪些。

Sample Product Page

3.如何製作購物車 Cart / 結帳 Checkout 頁面

購物車頁面相對比較單純,只有三個Modules,個別展示目前購物車的內容、總金額、運送方式及運費,另外還能再加上相關產品列表,吸引顧客購買其他相關產品,而消費者確認訂單內容無誤後,就能點選按鈕前往結帳頁面。

結帳頁面的Module呢,則是將原本WooCommerce預設的內容,分成五種不同的Module,讓你可以自由地更改順序及顏色設計,下圖的結帳部分,因為我使用的是平常拿來測試的網站,所以就沒有連接任何金流系統,也就無法正常顯示付費選項了,請大家忽略~


4.如何製作會員 My Account 頁面

至於會員頁面,Divi還沒有相對應的Woo Module可以使用,之後如果陸續推出的話,我會繼續更新在這篇文章中。

所以目前我直接採用WooCommerce所提供的短代碼,加入Text Module(或者是Code Module),並貼上短代碼後,Woocommerce預設的會員頁面內容就會出現了。

會員頁面短代碼:[woocommerce_my_account]

Text Module

推薦搭配外掛

Divi在設計Woocommerce的頁面時,是以現有的Woocommerce系統型態去加以設計,並不能增加額外的功能,但是通常一個購物網站,會需要為了購買形式、商品類型而添加輔助的功能在網站上,以下我將介紹幾個我在用Divi時,會搭配著使用的功能型免費外掛。

1.商品篩選 Themify – WooCommerce Product Filter

Themify - WooCommerce Product Filter

第一個是可以篩選商品的Themify – WooCommerce Product Filter,通常在商品數量眾多的購物網站,都會在商品列表旁加入一些分類,讓顧客可以更快找到適合自己的商品。

而這個外掛雖然是免費的,但是功能非常齊全,非常推薦使用。


2.搜尋列 Ivory Search

Ivory Search

第二個推薦使用的外掛是Ivory Search搜尋列,其實Divi本身已經有提供簡易型的搜尋Module,但如果希望將搜尋顯示的內容限定在商品,而不要顯示網站其他頁面,那就會需要使用到Ivory Search。

Ivory Search有分免費版跟付費版,免費版的功能對一般購物網站來說,其實已經綽綽有餘,是款相當好用的免費外掛。


3.商品第二圖示 WC Secondary Product Thumbnail

WC Secondary Product Thumbnail

第三個外掛WC Secondary Product Thumbnail是以設計的角度而使用的外掛,它可以在滑鼠移動到商品圖片上時,顯示商品的其他圖片,為網站增添更多互動感,無需複雜的設計。


4.通知信件設計 Decorator – WooCommerce Email Customizer

Decorator - WooCommerce Email Customizer

第四款外掛是Decorator,原本Woocommerce提供的信件內容,是以他們的紫色作為主要用色,如果你不滿意Woocommerce的配色,想要改成符合自己網站風格的色彩,可以考慮安裝Decorator外掛。

Decorator可以讓你改變字型、顏色、大小、加入網站Logo,甚至還能改變訂單內容所顯示的外觀,記得在你設定完成後,測試一次購物流程,確保信件的圖檔都有順利顯示。


如果你對於這篇文章有任何疑問或者建議,都歡迎你在底下留言給我喔:)

本文作者 – LiLing

90後的台灣女生,目前正於紐西蘭擔任多媒體設計師,擅於利用Wordpress建立網站,分享各種不必使用程式語法,也可以架設網站的101種方法。

相關文章

👋

Hi, I’m LiLing

在紐西蘭任職多媒體設計師,擅於利用Wordpress建立網站,搭配Divi主題,分享各種不必使用程式語法,也可以設計網站的101種方法。

🙌

社團交流

歡迎你加入Divi使用者討論平台,有任何問題都歡迎在上面向我提問:)

👩🏻‍💻

免費領取Divi入門手冊

領取Divi新手設計入門手冊

2 Comments

  1. 熱咖啡

    請問會上購物網站教學影片嗎?謝謝

    Reply
    • LiLing

      之後會有WooCommerce相關頁面製作的教學哦

      Reply

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *