WooCommerce 是一支可以讓 WordPress 成為網路商店的強力外掛, 它提供了一般網路商店所該有的基本功能, 而且它最吸引人的地方, 就是能使用鮮明設計感的商業主題, 再搭配不同的增強外掛, 依照個人需求與喜好, 自訂與展現獨一無二的網路商店。
但是 WooCommerce 卻不是那種只要安裝之後, 人人就都能馬上賣東西的傻瓜外掛, 想要使用它來開自己的網路商店之前, 還是必需花些時間來研究它的操作邏輯, 但不可避免的, 自己本身也要有些 CSS 和 PHP 的基礎, 這樣才能順利地將 WooCommerce 改造成完全符合自己理想的網路商店.
因為接案的關系, 所以我經常會幫客戶規劃使用 WooCommerce 來製作網路商店. 關於一些設定的部分, 例如金流外掛一定是不能缺少的, 其它還有中文化、運費算法的設定、更改通知郵件的版型和一些應該注意的小地方, 這些我都會在本篇文章裡作些簡短的介紹, 若你有其它不懂的地方, 請多多用 Google 搜尋答案吧.
安裝 WooCommerce
進入安裝外掛頁面中, 搜尋 woocommerce 之後安裝並啟用.
安裝 WooCommerce 頁面
系統會自動安裝展示商品的商店 (Shop) 頁面, 可以依照需求添加不同的元素及商品顯示方式, 稍後也還能在 WooCommerce 後台改變對應的頁面.
安裝翻譯檔
安裝完 WooCommerce 之後, 系統就會自動偵測當前網站用的是什麼語言, 然後提示下載相同的翻譯. 在中譯這部分上, 就能幫商店增添獨特性, 並且與他人做出區隔的的地方. 如果有從事過服務業, 或者常在網路上購物的人, 大概都很清礎 WooCommerce 的中文翻譯, 大多是英文直翻成中文的, 唸起來的感覺和現實生活還是有點距離, 所以在商店正式上架前, 務必要全部檢視一次, 把生硬的翻譯用詞, 轉為較柔和的服務用語.
關於自訂翻譯, 我個人常用的工具是 Codestyling Localization 和 Poedit, 前者是 WordPress 的外掛, 後者是一般的 App, 翻譯檔在伺服器裡的存放路徑如下:
更新: 2016/08/30
/wp-content/languages/woocommerce/woocommerce-zh_TW.po /wp-content/languages/woocommerce/woocommerce-zh_TW.mo
特別提醒各位, 目前繁中的翻譯檔有幾個已知的問題, 例如在個人帳號底下的登出鈕錯誤、無法自訂收件欄位等, 所以比較建議不熟 WooCommerce 的使用者, 先在別的地方安裝全英文版來對照中文版使用, 比較能夠容易抓出翻譯導致錯誤的問題點.
設定 > 一般選項
商店所在位置選擇台灣當地, 要不要改變銷售地點則因人而異, 如果在購物說明中已有註明出貨方式, 就算消費者看得懂中文, 我想應該也不會有人在國外還下單購買商品.
更改貨幣的部分不僅會改變商品售價的貨幣符號, 若有使用 PayPal 收款時, 還會影響到收款的幣別. 另外若想自訂貨幣符號, 則可以使用下方的語法來把 NT$ 改為 $.
add_filter( 'woocommerce_currencies', 'add_my_currency' );
function add_my_currency( $currencies ) {
$currencies['NTD'] = __( 'NTD', 'woocommerce' );
return $currencies;
}
add_filter('woocommerce_currency_symbol', 'add_my_currency_symbol', 10, 2);
function add_my_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case 'NTD': $currency_symbol = '$'; break;
}
return $currency_symbol;
}
加入語法之後, 選單中就會如下圖中出現自訂的貨幣符號.
設定 > 商品選項 > 商品圖片大小
商品圖片尺寸的設定是比較常出現問題的地方, 因為當改變了圖片的尺寸之後, 在之前已匯入的媒體庫中的圖片並不會馬上隨即套用, 必須要在使用 Regenerate Thumbnails 這類的縮圖外掛來重新設定圖片的大小.
設定 > 商品 > 庫存選項
設定保留庫存時間, 可以防止商品被遲遲未付款的訂單綁住, 導致影響了新的銷售機會. 這個部分可以設為保留訂單三天, 也就是 4320 分鐘, 超過時間後訂單就會自動失效.
設定 > 稅金選項
稅金設定這部分一般不太會啟用, 因為一般台灣的商品售價都以內含稅額, 除非有其它目地性才必須啟用.
設定 > 結帳選項
結帳設定是網路商店最重要的部分之一, 在 WooCommerce 預設收款方式中, 銀行轉帳、貨到付款和 PayPal 都能用在台灣當地收款, 但是若想讓消費者利用網路刷卡、虛擬 ATM 轉帳、超商條碼等其它方式結帳時, 則另需要再安裝串接金流外掛, 而現有的金流外掛可參考 WooCommerce 金流串接介紹及 Allpay 歐付寶的官方金流串接外掛 這兩篇介紹.
另外補充說明一下, 什麼是強制使用安全連線結帳, 也就是所謂的 SSL (安全加密連線), 這個機制是用來確保消費者在結帳的時候, 他們所提供給商店的結帳資料是經過加密的. 一般像是 PChome 或 Yahoo 等大型網路購物平台也都一定會具備. 而且 SSL 是需要向核發機構申請購買, 待憑證核發後, 在安裝到伺服器上, 網站才能使用合格的 HTTPS 安全連線.
設定 > 運送選項 > 一般費率
當商店有提供不同的的運送方式時, 運費也有可能不同, 所以在一般費運的設定中, 有提供設定變化型的運送選項.
假設如上圖所示, 每筆訂單收取的郵寄運費為 60 元, 還有其它的出貨方式及價差的話, 就可在額外的費率欄位中設定.
設定好運費資料後, 當消費者在結帳時, 在購物車結算中頁面中, 就能看到上圖的選項, 選擇他想要的出貨方式, 運費方面同時也會自動計算.
在額外的費率設定格式如下, 運費也可以設成負數 (例如:-20) 來遞減運費.
黑貓宅配 | 20 | order 7-11門市取貨 | 40 | order
設定 > 電子郵件傳送選項
訂單通知也是商店很重要的部分, WooCommerce 的寄件方式和 WordPress 一樣, 都是使用 PHP Mail 來發信, 相信有大部分的使用者和我初期一樣, 會把發信功能轉到 Gmail 上, 但若對應用在 WooCommere 的情況時, 發出的信件極有可能會被 Gmail 判定為垃圾信的, 而且 Gmail 寄信上限也不高, 說真的不推薦把 Gmail 或者是 Google App 用在電子商務.
要解決寄信的最好辦法, 是使用類似 Mandrill 的寄件服務, 詳情參考這篇 WordPress 的寄信外掛 Mandrill & Mailgun, 而且自從採用 Mandrill 至今, 使用已超過一年多都還沒出現過問題.
設定 > 電子郵件範本
到目前為止, WooCommerce 裡的 Email 版型還是需要手動更改, 方法不難, 自訂步驟如下:
- 首先預覽電子郵件範本
- 接著開啟瀏覽器的檢測元素功能
- 在瀏覽器中修改並記下自訂的 CSS
- 最後再將 CSS 寫入 email-header.php 即可, 這樣信件就能一次全改為自訂的版型.
- (3/12) v2.3版的更新增加了 email-styles.php, 現在以它為修改外觀的主檔案,
email-header.php 和 email-footer.php 則分別是通知信的頁首和頁尾的部分.
email-header.php 存放路徑如下:
/woocommerce/templates/emails/email-header.php #WooCommerce 中 /your_theme/woocommerce/emails/email-header.php #主題中
系統狀態 > 記憶體限制
單純運行 WordPress 的網站, 若沒意外的話, 記憶體大概設 32MB 就足夠了, 但 WooCommerce 的需求比較高一些, 如果外掛又裝很多的話, 建議設在 64MB 以上.
更新: 可直接編輯 wp-config.php, 並加入下列語法設定記憶體限制值:
define('WP_MEMORY_LIMIT', '64M');
防止自訂的翻譯檔因為更新被覆蓋
有時候改了些自訂的中文翻譯, 但又擔心怕更新時被還原成官方的翻譯檔, 要解決這個問題時, 只要把自訂翻譯存放於下列路徑中, 就能防止更新時被覆蓋.
wp-content/languages/woocommerce/
其它補充
2016-02-01 更新: 官方翻譯已從 Transifex 轉移至 WordPress 官方翻譯系統。
2015-02-01 更新: WooCommerce Taiwan 社團已在 Facebook 成立, 歡迎各位加入討論及交流。
請問一下，
這個有辦法做到讓客戶在完成訂購之後，自己取消訂單通知賣家退款嗎? 謝謝
你好，預設是沒這個功能，你可以先試用了解一下。
你好
我想請問 最近用woocommerce做了一個賣東西的網站
但是商品頁面雖然商品過多下面會出現第幾頁可以點選
但是點了沒有用耶 一直都在第一頁 不知道是什麼原因
我的woocommerce也是裝完直接用他們翻譯
謝謝
Hi，能提供網址讓我看看嗎?
http://iselftw.com/?post_type=product
WordPress 3.9.6 + woocommerce 2.2.8 套http://themeforest.net/item/oxygen-woocommerce-wordpress-theme/7851484 模板
謝謝
調整一下 “商品固定網址起點” 試試。
你好 我依照圖片上修改 商店的網址沒有不同
分頁功能也還是無法使用…
是否能提供email 將帳號密碼提供給你在後台觀看我是不是哪裡有弄錯呢
謝謝
你好
我發現問題是在網址
換到第二頁應該是 product&paged=2
但是我跑的結果 把&變成了#038;
這不知道要如何改成正確的
謝謝
吔? 你解決問題了，但網址內怎麼多了一個 ‘&’ ?
後來我去修改woocommrece的pagination檔案 就解決了 為什麼多一個我也不清楚
您好，最近接手修改一個使用woocommerce外掛的網站，要調整首頁的配置，可是怎樣都找不到在哪裡能修改。
許多頁面都是預覽時東西很多，要修改時編輯欄位出現的內容都只有一行。
想請問資料都應該去哪裡修改，謝謝。
Hi Hubuki,
這要看情況，每一款主題所帶的首頁模版都不一定，有些是使用自帶的頁面編輯器或是用另加外掛 (例如: Visual Composer ) 來設定頁面。
你好，想請教，”註冊/登入”內的文字是否能修改?
如果可以，是否有非手動的方式?
謝謝
(圖片是我的網頁目前自動翻譯的結果，想把這些文字都修改)
Hi, 翻譯檔的路徑:
/wp-content/languages/woocommerce-zh_TW.po謝謝你 我試試看，如有問題再跟您請教
你好 我嘗試到您提供的路徑但沒有找到woocomemerce-zh_TW.po
我還可以做些甚麼?
/wp-content/languages/plugins路徑下呢?很棒的教學!
謝謝 🙂
您好,我想請問一下關於運送方式的部分,為何我頁面上沒有顯示一般費率 而是單一費率,且沒有額外費率的項目呢? 這樣實在不知道該怎麼新增其他運費項目 謝謝!!
說實在的，你是用訪客留言，我若有回覆你也收不到通知，但如果你有看到這則訊息並回覆我，我再協助你怎麼解決這個問題。
您好，不好意思，我想請教一下我該如何去修正我前台英文換成中文的方式，我安裝翻譯黨進到我的目錄了，可是我只有後台有中文，前台沒有，想問問看如何解決
Hi, 從提供的圖片看來，有些部份像是”前往結帳”和”運送方式”都有載入翻譯，其它未翻譯的地方應該是主題自帶的字串還未被翻譯，你可以找找主題中的
.po或.pot檔，或是用 Loco Translate 來試著翻譯主題 Template 裡的文字。您好,我想請問的問題跟前面的問題一樣。關於運送方式的部分，為何頁面上沒有顯示一般費率 而是單一費率,且沒有額外費率的項目。我該如何解決這個問題?
因為 WooCommerce v2.4 調整了運送與介面的設定，所以把額外運費隱藏起來，如果在 v2.4 之前曾在那個欄位中做過設定的話，更新後也不會被隱藏，v2.4 之後可以用下列的語法來開啟它。
add_filter( 'woocommerce_enable_deprecated_additional_flat_rates', '__return_true' );感謝，解決了。
請問Nel Tseng大，add_filter()要在哪裡加？我是直接使用WordPress.com設站
你好~我想詢問一下~我該怎麼更改電子郵件的內容
文字可以直接更改翻譯檔。
請問從哪裡更改呢?我怎麼找都找不到!!!!
在這篇文章中的 “安裝翻譯檔” 部份有說明翻譯檔的位置，請問還找不到什麼?
我還是初學者..我不太懂怎麼安裝翻譯檔，我不知道該怎麼進入後台資料夾!!
用 FTP 連線登入你的伺服器 ; 每個人都曾是初學者，多查多問很好，買本書來看會學的更快，Facebook 有台灣 WordPress 社團，建議你可以加入。
https://www.facebook.com/groups/wordpresstw/
補充:
可以安裝翻譯外掛直接翻譯~
https://tw.wordpress.org/plugins/loco-translate/
你好，最近使用woocommerce架設購物網站，但在新增商品設定時，明明就已設定了商品屬性，不過登出測試的時候，卻沒有顯示商品的屬性可選擇，不知道是哪裡出了問題? 謝謝
你好，因為我還不了解你的網站的整個架構環境，所以我會用幾個方式來排除並找嘗試著找出原因:
1. 確定可變商品的設定正確，參考官方文件:
https://docs.woocommerce.com/document/variable-product/
2. 商品屬性更新後不需要登出，前台就會有對應的更新，若有快取的話要先清除。
3. 安裝並切換至 Storefront 主題，查看是否為主題的問題，因為 Storefront 是 Woo 官方所製作的主題，所以 100% 和 WooCommerce 相容，Storefront 也是我們開發客製功能時的首要測式主題。
https://woocommerce.com/storefront/
希望以上幾點建議能幫助到你。
謝謝你!問題已解決