WooCommerce 教學 – 如何正確客製化 WooCommerce

常常看到有網友詢問,要怎麼修改 WooCommerce 的某個頁面,例如結帳頁面(Checkout Page),我的帳戶頁面(My Account Page),所以特地將個人的經驗整理出來,希望大家能夠學到正確的修改方式,下次遇到別的問題時,同樣可以依循著相同的方式來修改。這些方式不只是適用在WooCommerce, 同樣的概念其實也可以套用在修改主題或是其他的插件。透過本篇文章,你將會了解到:

1.如何正確客製化 WooCommerce (Best Practice)
2.如何複寫 WooCommerce 樣板 (Templates)
3.如何透過 Action/Filter 來修改內容顯示
4.如何避免因為更新而遺失修改內容

大原則:不要直接修改 WooCommerce 的核心

所謂核心指的是 plugins/woocommerce 目錄底下所有的檔案,這點其實是是適用於所有的 WordPress 主題和插件,因為 WordPress 的主題和插件的更新是很頻繁的,如果直接修改插件本身的檔案,當你更新了新的版本時,原本的修改就會被覆蓋掉了,除非你先備份原本的版本,同時在你的修改加上註記,或是透過版本管理軟體(git/subversion)來記錄你的修改,即使如此,日後的更新絕對是你的另一個夢魘。

如果不能修改插件本身,那要如何客製化 WooCommerce 呢?

別擔心,你有的困擾,別人一定也有。

你可以透過以下兩種方式,來客製化  WooCommerce。

1.覆寫 templates

WooCommerce 的頁面都是透過樣板(templates)來呈現的,你可以在 plugins/woocommerce/templates 找到這些檔案。基本上你要修改的頁面,都可以在這邊找到。但是還記得上面說過的原則嗎?不要直接修改插件。WooCommerce 設計了一套機制,讓你可以複寫這些樣板,複寫的方式就是把templates的檔案,複製到你的主題(或子主題)目錄下,切記,複製的時候只複製你需要的檔案即可,如此可降低日後更新和維護的成本。WooCommerce 會先找主題(或子主題)下的樣板,如果不存在,就使用 WooCommerce 插件本身的樣板。

目前大多數進階的主題,為了讓 WooCommerce 的更符合主題本身的設計,都會針對 WooCommerce 進行客製化,因此你可以在主題的目錄下找到客製化的 WooCommerce 樣板,或是你可以在後台 WooCommerce->System Status 的頁面中檢視主題覆寫的樣板
override_woo

那麼多的檔案,我要改哪一個?

如果你不熟悉 WooCommerce 樣板結構,你可以透過插件來協助(像是 Display Template Name, Show Current Template 或是 WooCommerce Template Hints)
Woocommerce Template Hints 會比較直覺地顯示網頁上的內容是來自於哪個樣板,前面兩個就只會顯示這頁包含了哪些樣板,但實際上網頁內容來自哪個樣板還是要自己去找。

如果我的主題包含了舊的樣板該怎麼辦?

有時候 WooCommerce 的更新會伴隨著樣板的變動,你一樣可以在後台的 WooCommerce->System Status 中的  Templates 看到提示:

outdated_templates

若你使用的主題有提供新版,你可以直接將新版主題內的 WooCommerce 樣板複製至你的主題或子主題中(要注意別覆蓋掉之前的修改),或是主題仍沒有提供新版的樣板,你可以使用 WooCommerce 2.1 版後內建的 Template Debug Mode 來檢視你的主題與新版本的 WooCommerce 樣板的相容性。當你啟用了這個功能後,若你是以管理者身份登入,覆寫的樣板將會失效,也就是會以 WooCommerce 內建的樣板來顯示。

template_debug_tool

發表迴響