客製化購物網站模板

前面的課程中,我們利用了 Thrive Theme Builder 挑選了購物網站主要頁面的模板 (商店主頁、產品呈現頁面、購物車頁面和結帳頁面),接下來我們可以依照自己對網站呈現的想法,自行客製化的編輯。


在 WordPress 後台,進入 Thrive Theme Builder。

  1. 1
    點擊左手邊 " Templates" 標籤。
  2. 2
    點擊下拉式清單。
  3. 3
    找到 "WooCommerce" 選項,並點擊它。
客製化模板- Thrive Theme Builder

接下來,會看到我們先前選擇的模板,主要分成兩個主要的模板區塊。

Single Content Templates:包含了單一產品呈現頁面購物車頁面結帳頁面帳號頁面

List Templates商店主頁

這些頁面的編輯方式都是大同小異的,因此這裡以編輯商店主頁為範例,你可以用相同的方法來編輯單一產品呈現頁面購物車頁面結帳頁面帳號頁面。

客製化模板- Thrive Theme Builder_Default

頁面上方若有紫色標籤 (Default WooCommerce...),則代表該頁面為目前預設的模板(我們先前選擇的),若想更改模板的話可以再回到 "Wizard" 進行更換。

編輯商店主頁

將滑鼠移到頁面上方,此時會出現 "Edit" 按鈕,點擊後進入編輯頁面。

編輯 Header

可以在此修改主選單內容和購物車呈現方式。

方法一:(左邊編輯區塊)

1. 點擊 "Header" (右邊的眼睛符號,可以點擊它來選擇關閉或呈現 Header)。

2. 點擊 "Edit" 進入編輯頁面

方法二:(右邊編輯頁面)

點擊上方頁首 (Header) 部分,會出現 "This is a Linked section" 區塊,點擊 "Edit" 進入編輯頁面。

購物網站主頁編輯_header-min

更細節的編輯示範請參考下個課程 (建立會員註冊功能),將指引你如何編輯 Header 內的主要元素:主選單、購物車..等。

Header 編輯完成後,其他模板頁面的 Header 部分也會連動的一起編輯完成!

若只想編輯此頁面的 Header 就好,可以點擊 "Unlink" 取消連動編輯!


Unlink:點擊此按鈕後,代表當你完成 Header 編輯之後,其他頁面的 Header 將不受影響。

Choose a ready-made design:點擊此按鈕可以重新選擇模板。

編輯 Footer

編輯 FOOTER

方法一:(左邊編輯區塊)

1. 點擊 "Footer" (右邊的眼睛符號,可以點擊它來選擇關閉或呈現 Footer)。

2. 點擊 "Edit" 進入編輯頁面

方法二:(右邊編輯頁面)

滑鼠往頁面最下方移動,點擊頁尾 (Footer) 部分,會出現 "This is a Linked section" 區塊,接著點擊 "Edit" 進入編輯頁面。

Footer 編輯完成後,其他模板頁面的 Footer 部分也會連動的一起編輯完成!

若只想編輯此頁面的 Footer 就好,可以點擊 "Unlink" 取消連動編輯!


Unlink:點擊此按鈕後,代表當你完成 Footer 編輯之後,其他頁面的 Footer 將不受影響。

Choose a ready-made design:點擊此按鈕可以重新選擇模板。


編輯 Top Section

編輯 TOP Section

左邊編輯區塊

1. 點擊 "Top" (右邊的眼睛符號,可以點擊它來選擇關閉或呈現 Footer),右邊編輯頁面會自動跑到 "Top 區塊" 供你編輯。

2. 如果你想要更換其它模板的話,可以點擊 "Choose a ready-made design" 選取其它模板。

編輯 TOP Section-other design

右邊編輯頁面

3. 點擊頁面文字、按鈕可以更改文字內容、顏色、大小...等功能 (更詳細的編輯功能介紹,請參照 Thrive Architect 課程)。

編輯 TOP Section -文字編輯
編輯 TOP Section -按鈕編輯

編輯 Content (主要內容)

左邊編輯區塊

1. 點擊 "Content" ,右邊編輯頁面會自動跑到 "Content 區塊" 供你編輯。

2. 如果你想要更換其它模板的話,可以點擊 "Choose a design" 選取其它模板。

編輯 Content Area

右邊編輯頁面

1. 點擊頁面 Shop 區塊。

2. 如果你想要更換其它模板的話,可以點擊此處選取其它模板。

3. 你可以自行決定 Shop 頁面商品呈現的數量 (Products per page)、行數 (Columns)、排序方式 (Order by)、排序時間 (Order)-最新或最舊上市的商品優先排序。

編輯 Content Area-shop

編輯 Sidebar (側邊欄)

左邊編輯區塊

1. 點擊 "Sidebar" ,右邊編輯頁面會自動跑到 "Sidebar 區塊" 供你編輯 (下方的眼睛符號,可以點擊它來選擇關閉或呈現 Sidebar 欄位)。

2. 如果你想要更換其它模板的話,可以點擊 "Choose a design" 選取其它模板。

3. 你可以選擇 Sidebar 的放置位子是要在頁面的左邊欄位還是右邊欄位。

編輯 Sidebar Section

右邊編輯頁面

回到 Sidebar 編輯頁面,可以看到立面有需多小工具 (Widget) 欄位,點擊每個小工具 (Widget) 欄位進行編輯或刪除不想呈現的小工具 (Widget)。

編輯 Sidebar Section 2

如果你想要添加其它小工具 (Widget) 的話,可以點擊頁面右上方 "",就可以看到許多小工具 (Widget)  列表供你選擇。

編輯 Sidebar Section 3

編輯 Bottom

左邊編輯區塊

1. 點擊 "Bottom" ,右邊編輯頁面會自動跑到 "Bottom 區塊" 供你編輯 (右方的眼睛符號,可以點擊它來選擇關閉或呈現 Bottom 欄位)。

2. 如果你想要更換其它模板的話,可以點擊 "Choose a ready-made design" 選取其它模板。

編輯 bottom Section

右邊編輯頁面

回到 Bottom 編輯頁面,可以直接點擊來修改文字、圖標等..。

編輯 bottom Section 2

恭喜!我們已經了解商店主頁的編輯流程了,你可以依照此範例所提供的方法,繼續編輯其它模板頁面 (單一產品呈現頁面購物車頁面結帳頁面帳號頁面)。

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>