WordPress購物車:熟悉購物網站的第1核心功能

WordPress購物車是建立購物網站的核心功能,它會顯示目前打算要購買的商品資訊,本文介紹WooCommerce外掛所提供的相關工具,從實際操作中開始熟悉架構及設計流程。

一、線上購物結帳

Wordpress網站安裝WooCommerce外掛可以啟用電子商務功能,其中的關鍵點在於購物車的功能。例如目前網頁上方選單中就有一項是「購物車」,進入此頁面內會有已經加入的商品,並且可以看到價格資訊,有打算購買的話就點選右方的「前往結帳」按鈕。

一、線上購物結帳

二、網站外觀編輯器

從上個步驟的簡單操作再搭配一定的相關知識,會知道所謂的購物車就是一個WordPress頁面,那麼會想如何用一般操作的方法去瞭解這個頁面,可以在控制台「外觀」中點選「編輯器」。

二、網站外觀編輯器

三、設計範本外觀

在外觀「設計」工具列點選其中的「範本」。

附帶一提,從這裡的選項大概可以得知,所謂的外觀設計是針對整個網站的外觀佈局和呈現樣式進行統一的基本設定,而這裡範本的意思是網站如果有很多特定類型的內容,可以在事先進行基本模板的設計,其作用類似Elementor版型庫一樣,作為相似頁面的參考範本。

三、設計範本外觀

四、WooCommerce購物車

範本中有很多不同類型的內容,其中有個大項是屬於WooCommerce的部分,由此可知電子商務平台就是由很多不同類型功能的頁面所組成,在此選擇其中的「頁面:購物車」。

WooCommerce購物車頁面:電商網站的1個核心功能

五、區塊編輯器頁面

實際進入購物車頁面,它是一個WP區塊編輯器的操作介面,左側有簡單完整的功能說明,此頁面會顯示所購買商品的相關資訊,可以進一步前往結帳,然後也有一般網頁會有的頁首頁尾的部分。

五、區塊編輯器頁面

六、大綱檢視內容

接下來跟一般在WordPress新增頁面的時候相同,點選左上角工具列的三個橫線小圖標,會出現「清單檢視」跟「大綱檢視」兩個索引標籤。從預設的「清單檢視」切換到「大綱檢視」之後,就可以看到所謂的WooCommerce購物車頁面是由很多的網頁區塊所組成。雖然說最後看起來的頁面似乎簡單直覺,可是實際上卻是有蠻複雜的設計元素在裡面。

每個區塊元素都好像一個基本形狀的積木,似乎不是很複雜,不過正像是組合起來的樂高模型一樣,每塊小積木都是有講究的,不能夠隨意變動,符合電商平台系統每個功能緊密相關的特性,所以在此不做任何的變更,只是單純瞭解其性質,最後點選左上角的WordPress小圖標。

六、大綱檢視內容

七、離開網頁編輯

上個步驟點選WP小圖標之後會出現提醒視窗,因為似乎所做的變更尚未儲存,系統要確認是否離開。

在此文章範例其實並沒有做任何實質上的更改,也許是有進行大綱檢視的操作,WordPress控制台認定可能有變動,因此貼心做個提醒,在此直接點選「離開」按鈕即可。

七、離開網頁編輯

電商網站的基本觀念

本文其實沒有針對購物車頁面進行任何修改,只是單純瞭解它在WP控制台外觀設計中的位置,如何前往相關的編輯頁面而已。雖然僅僅如此,可是對於在網站上使用電子商務功能這方面,不管是單純操作或者進一步自訂調整,這篇WordPress教學文章所介紹的應該是非常基本必須掌握的觀念。


歡迎加入Line社群,口袋裡的Excel小教室!

贊贊小屋服務:5,000元Google Kinsta主機,8,000元Excel ERP系統

網頁設計與品牌行銷:1站式電商網站完整服務(3,000元)

網頁設計及品牌行銷:1站式電商網站完整服務

最新文章: