WooCommerce 系列教學 (1/3):安裝與使用

WooCommerce 系列教學,預計分為三篇,請參考以下目錄:

很久以前寫過一篇 WooCommerce 的商品上架流程,但因為圖片都失效了,所以一直把「重寫」這件事情放在心上,但因為有段時間沒碰 WooCommerce 了,怕誤導大家所以遲遲未下筆。

後來,因為我現在有經營手帳寫真市集,是用 WooCommerce + AllPay 串接,所以可以有比較新、也比較完整的經驗分享啦!也歡迎大家購買市集的商品,給我一點支持喔 😳


事前準備:挑選佈景主題與安裝外掛

我不會寫適用 WooCommerce 的佈景主題,所以我都是從網路上找免費的 WooCommerce 佈景自己玩。

開發 WooCommece 的 WooThemes 也有提供免費與付費的主題,有興趣的朋友也可以從 WooThemes 下載。此外 WordPress.org 裡,也有人會上傳適用 WooCommerce 的 Themes,不過就要自己稍微找一下囉。

我選用的範例主題是從 WordPress.org 下載的 Klasik,如果你們想要自己練習,可以跟我下載一樣的佈景主題。

佈景主題裝好後,就可以安裝 WooCommerce 外掛了,直接從後台搜尋 WooCommerce 即可。

▼ WooCommerce 相關外掛有很多,我們首先要安裝的是由 WooThemes 開發的 WooCommerce – excelling eCommerce 主程式

啟用外掛後的第一步,就是安裝翻譯檔啦!WooCommerce 有提供繁體中文的版本,所以大家不用緊張,放手去安裝吧 🙂

▼ 請點選「Install Translation」

▼ 安裝成功後,畫面會變成繁體中文,然後就一直點選紫色按鈕進行你的商品設定即可。

這些設定之後都可以從後台更改,現在不想設定也沒關係 😊

事前準備到此告一段落,一來 WooCommerce 有中文化,二來很多設定都是要靠大家實際的販售情況調整。設定也不難,如果真的有問題再留言給我吧!


WooCommerce 的架構

安裝完左側會多了兩個選單,分別是:

  • WooCommeerce:WooCommerce 外掛相關設定,例如付款格式、付款方式、發送郵件… 等等。
  • 商品:上架或分類商品設定,有點類似「文章」選單的感覺,有獨立的分類與標籤,每一個商品都是一個單獨的文章格式。

那麼,我們該如何在前台顯示 WooCommerce 的相關頁面資料呢?所有 WooCommerce 的資料,我們可以在「頁面」透過 shortcode 進行設定。

▼ 安裝 WooCommerce 之後,他也會自動新增一些頁面在「頁面」選單裡,像是商店、忘記密碼、我的帳號… 等。

這邊提醒大家,因為我們選的是繁體中文語系,所以 WooCommerce 預設會把網址代碼也設為中文,我建議大家到「頁面」選單後」,把所有頁面的代碼都改回英文,不然一些頁面可能會連不上喔!

固定網址也要記得改。固定網址的設定,可以選擇「商品起點」,總之就是確保你的固定網址都是/shop/而不是/商店/

接下來你可以試著連到商店頁面啦,網址通常是http://你的部落格網址/shop,如果你有試著新增商品,可以在這一頁看到所有的商品清單。

顯示特定的分類

一間店會有很多不同分類的商品,這是無庸置疑的,所以你一定會有一個需求,就是在顯示單一分類的所有商品。

假使我們以衣服 👔 為例子,頁面只會顯示分類為衣服的商品,就我所知的有兩種方法,一併分享給大家。 記得要先新增商品分類,這邊就不再敘述怎麼新增了。

直接把連結抓出來

第一種方法,是直接找到「商品分類」的真正網址。

這個方法很簡單,到後台的「商品分類」選單中,找到你想要連結的商品分類,然後選擇「查看」就可以啦 😊

搭配 shortcode

另外,記得我們前面有提到,WooCommerce 幫我們建了一些頁面以顯示資料嗎。

我們先從後台點選「頁面」→「我的帳號」,你會看到文章內有一段程式碼為:[woocommerce_my_account],這段程式碼,就是我們常用的 WordPress Shortcode。

因此,我們可以用同樣的方式,新增一個叫做「衣服」的頁面,然後插入一段 shortcode,告訴 WordPress 顯示所有分類為衣服的商品:[product_category category="clothing" ]

category 後面接的clothing,就是看你的商品分類的代碼怎麼寫,這邊就跟著寫一樣的字。

( 更多的 WooCommerce Shortcut 資料,請參考 Shortcodes included with WooCommerce )

乍看之下,感覺第一種方法比較簡單,但如果你還有一些特殊的需求,例如顯示指定的 SKU 商品、指定的單一商品 … 等等,都可以透過 Shortcode 幫你達成喔!記得使用方法,都是在「頁面」把對應的 Shortcode 插入即可。


WooCommerce 系列教學的第一篇就到此告一段落了,其實安裝並不難,設定也很簡單。所以我只是把大家初步使用,可能會碰到的問題先整理好放出來,希望對大家有所幫助!

如果有照著安裝的朋友們,可以試著先建立幾個商品,接下來我會分享進階的的商品設定,所以如果你有新增商品的經驗,會更快上手 😊,閱讀或實作有任何問題,都歡迎留言告訴我。

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
15 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Oliviapiggy Chen
Oliviapiggy Chen
5 years ago

請問第三篇的金流可以順便介紹一下allpay的超商取貨如何串接嗎?

muki
4 years ago

因為超商取貨的手續費太高,所以我自己沒有使用。但我會稍微看一下怎麼用,如果可以講我就會講 ^^

Jason Wang
Jason Wang
5 years ago

你好,
請問我透過woocommerce的設定精靈進行設定,
進行到頁面設定時,說會自動幫我新增幾個頁面,
但是點下一步卻直接跳出,轉到了我的網站首頁,
試了幾個主題都是一樣的結果,
無法完成設定精靈的連續幾個動作。
請問有可能是什麼原因嗎?
感謝~

muki
4 years ago
Reply to  Jason Wang

他有顯示什麼錯誤訊息嗎?

我想這跟主題應該沒關係,有可能跟 WordPress 的權限設定有關,導致 WooCommerce 無法幫你新增頁面 (但我也不太確定)

不過這並不會影響你後續的使用,因為你還是可以參考我文章提到的 Shortcode: http://docs.woothemes.com/document/woocommerce-shortcodes/ ,將需要的資料自行補上唷

mijo
mijo
4 years ago

你好,
想請教您
您的http://shop.handbook.tw/nform/
裡面的表單是如何嵌上去的
是用PHPMAIL嵌上去的嗎

我該如何用才能像您這樣

Mars Huang
Mars Huang
4 years ago
Reply to  mijo

他應該是用Contact Form 7

Eddy Chen
Eddy Chen
4 years ago

您好 想請教一下 我使用的主題 安裝woocommerce 我點選商品分類 進去後 版型跑掉 也找不到商品分類的頁面更改排版

想請教該怎麼解決這問呢??

Eddy Chen
Eddy Chen
4 years ago

您好 想請教一下 我使用的主題 安裝woocommerce 我點選商品分類 進去後 版型跑掉 也找不到商品分類的頁面更改排版

想請教該怎麼解決這問呢??

阿飛大叔
4 years ago

最近也想試看看woocommerce怎麼用,有機會再請教你啊

muki
3 years ago
Reply to  阿飛大叔

是阿飛大叔!!((尖叫~~
沒問題沒問題 >w<

阿飛大叔
3 years ago
Reply to  muki

謝謝啊,那能不能留個聯絡方式方便請教(厚臉皮)

muki
3 years ago
Reply to  阿飛大叔

可以呀!可以直接 FB 私訊我,或是 mail: mukispace@gmail.com

姍卓
姍卓
3 years ago

在後台外掛選項找不到woocommerce會是什麼原因呢

徐聲欽
徐聲欽
3 years ago

哈囉~
我想請問為什麼我的商品頁面一頁只顯示一個?使用上非常不方便,如何更改設定呢?

粉絲團