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

by

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

by

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

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

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

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

Divi Builder 頁面編輯器

在安裝完Divi到你的Wordpress網站後,點選左邊功能列的Divi,選擇Theme Builder,在這裡你可以製作Global類型的頁首、頁面、以及頁尾,並且能夠指定要顯示的網頁。

Global類型的內容,都將可以重複使用於多個網頁,未來只需要作一次修改,內容就會直接套用到其他頁面,非常方便。

現在,由於我們要設定的是woocommerce的頁面,所以在點選+號後,就會出現下圖紅色線條框選的選單,它們各自代表的選項為:

  1. Shop:商店頁面
  2. Cart:購物車頁面
  3. Checkout:結帳頁面
  4. My Account:會員帳號頁面
  5. All 商品:設定全部商品頁面的版型
  6. 商品Archive Page:商品列表頁面
  7. 商品in Specific Categories:在指定分類中的商品頁面
  8. 商品with Specific Tags:有指定標籤的商品
  9. Specific 商品:指定商品頁面

接下來,我會講解幾個Woocommerce主要的頁面,該如何設定,並且說明如何用Divi提供的Woocommerce Module來製作你的商店、商品頁面。

Divi theme builder

商店列表頁面 Shop Page

在Shop page,我主要會使用Divi的Shop module來展示商品的列表,搭配其他Module設計整個頁面。

Divi shop page

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

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

Divi Shop Module Settings

設計商品頁面 Product Page

商品頁面所使用到的Woocommerce module有非常多種,Divi讓整個商品頁面的靈活度變得非常高,若你想要製作非常獨特的商品頁面,Divi絕對有機會讓你製作出獨樹一格的商品頁面。

以下是Divi官網提供的一些範本,充分展現Divi Module的強大:


Divi Woo Modules

Divi所提供的Woocommerce Module,目前一共有16種Module,專門用來製作商品頁面,他們各自有著不同的區塊功能,你可以依照網站風格作取捨,不一定要全部都使用。

在加入Module時,於上方搜尋列輸入Woo,可以更快篩選出專門讓Woocommerce使用的Module。

Divi - Insert Module
  1. Woo Add To Cart: 加入購物車
  2. Woo Breadcrumb: 頁面路徑
  3. Woo Description: 商品描述
  4. Woo Images: 商品圖片
  5. Woo Price: 商品價格
  6. Woo Related Product: 相關商品
  7. Woo Stock: 商品庫存
  8. Woo Title: 商品標題
  9. Woo Additional Info: 額外資訊(尺寸、顏色款式等)
  10. Woo Cart Notice: 已加入購物車通知
  11. Woo Gallery: 商品相簿(滑動圖片)
  12. Woo Meta: 商品貨號
  13. Woo Rating: 商品評分
  14. Woo Reviews: 商品評價
  15. Woo Tabs: 商品資訊(將描述、額外資訊、評價結合在一起)
  16. Woo Upsell: 你可能也喜歡的商品

我相信單靠上面純文字的敘述,你可能還是會對這些Module有很多疑問,我用Divi的編輯器製作了一個簡易的商品頁面,為了畫面美觀,我沒有使用所有的Module,但你仍然可以參考下方圖片,比較快地暸解到大部分的Module基本是什麼樣的形式與內容。

Sample Product Page

購物車 Cart / 結帳 Checkout / 會員 My Account

至於購物車、結帳、會員頁面,我會直接複製Woocommerce提供的短代碼,選擇用Text Module(或者是Code Module),貼上短代碼後(如下圖),Woocommerce最基本的頁面內容就會出現了。

Woocommerce短代碼

  • 購物車:[woocommerce_cart]
  • 結帳頁面:[woocommerce_checkout]
  • 會員頁面:[woocommerce_my_account]
Text Module

字型、顏色等設計,都可以透過Design區塊的內容來調整,按鈕的部分則是要去外觀→自訂設定。如果想要改變Woocommerce本身的預設樣式,則要透過安裝不同的外掛,Divi目前還沒有強大到可以自訂這些短代碼的頁面。

Use woocommerce shortcode

搭配外掛

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是以設計的角度而使用的外掛,它可以在滑鼠移動到商品圖片上時,顯示商品的其他圖片,為網站增添更多互動感,無需複雜的設計。


5.通知信件設計 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使用者討論平台,有任何問題都可以在上面向我發問:)

👩🏻‍💻

線上教學

0 Comments

Submit a Comment

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