為 WooCommerce 購物車添加自訂欄位

沒想過自己有一天會需要寫 PHP。其實以前有多次學 PHP 的念頭,但總是沒有足夠的動機和壓力讓我認真看待這件事。結果第一次寫 PHP,就直接和 WordPress 以及  WooCommerce 一起攪和。這篇,真的是超級新手筆記(WordPress 和 WooCommerce 老手莫入)。

需求與它們的產地

(本節純屬閒聊。與技術相關的部分在下一節。)

有位好朋友急需架設一個線上購物網站,她找了一位 freelancer 幫忙,對方使用 WordPress 和 WooCommerce,很快地完成了網站的基礎設施,已經開始進行內部測試。

過幾天,朋友告訴我,目前碰到一個問題:需要從外部(例如掃描 QR code)的網址連結直接開啟產品頁,並且由外部連結夾帶一個「轉介商 ID」的參數,以便日後計算轉介商的分潤,以及產生相關報表。她問我是否能協助處理。

由於我從未使用過 WordPress 和 WooCommerce,也從未寫過 PHP,所以無法立即給出答案,只能說研究看看。不過,等到我確定技術上沒問題、正進入實作階段時,才得知那位 freelancer 已經找到了現成的外掛(plugin),看起來已經能夠解決她的問題。

雖然用不著我了,我還是繼續試,看看自己要花多少時間才能解決。這期間,我找到一篇文章,裡面詳細說明了如何替 WooCommerce 的產品頁面和購物車添加自訂欄位。此外,我也找到一些似乎可用的 WordPress 外掛。不過,我還是傾向自己寫程式解決(雖然我沒寫過 PHP 😅),以便大致了解背後的運作機制;萬一四處碰壁,最後才求助於外掛。

以下便是我第一次使用 WordPress 和 WooCommerce(以及 PHP)的概略過程。

選擇虛擬主機

Google 關鍵字「free WooCommerce Hosting」,出現很多選擇,例如 SiteGround、BlueHost、Cloudways……等等。我沒有仔細比較各家平台的功能與價格,畢竟我只需要一個能讓我學習和實驗的平台。Cloudways 自稱「Best WooCommerce Hosting」,而且有三天免費試用期,就選它了。事後來看,Cloudways 平台設計得挺好,不需要看一堆文件或影片,自己稍微摸索一下就能上手。
註:由於只需要短期的實驗環境,我不需要特別去買個網域名稱。

建立虛擬主機的過程中,需要決定雲端主機廠商。我選擇價格比較便宜的 DigitalOcean ,而機房所在位置則挑選離台灣比較近的新加坡。



設定完成後,大約等待幾分鐘,新的虛擬主機就建立完成了,而且主機上面已經為我安裝好 WordPress 和 WooCommerce,真是方便迅速。如下圖:



頁面右邊的「www」旁邊顯示數字 "1",代表這台虛擬主機上面有一個運行中的 web application。從這裡點進去,可以開啟 web app 的相關資料,如下圖:



打開後台管理頁面(圖中的 ADMIN PANEL 區塊所顯示的網址),開始進入 WordPress 的世界:


透過這個後台管理頁面,我大致做了以下幾件事:
  • 設定顯示語言為繁體中文。
  • 安裝外掛:Jetpack、Code Snippets(程式碼片段)
  • 建立一個商品,以便用來測試購物車。建立商品的過程就不贅述了。
  • 其他一些有的沒的設定(忘了)。

建立好商品以後,接著就要寫程式來替商品頁面加入自訂欄位了。

為 WooCommerce 購物車添加自訂欄位

我是參考這篇文章的作法:〈How to add WooCommerce custom cart item data〉。該文詳細說明了兩種方法:自己寫程式,以及使用現成的外掛(付費軟體)。

我一步一步按照文中的範例,把那些 PHP 程式片段加入我的網站,共有三個片段:



圖中顯示的,就是先前提過的外掛「Code Snippets」的管理頁面。這三個程式碼片段所套用的範圍都是「Only run on site front-end」,亦即只運行於網站前台(打開此 Youtube 影片連結即可觀看加入程式碼的方法)。程式碼如下:


我無法比那篇文章的作者解釋得更清楚,所以就不在這裡班門弄斧了。有興趣的朋友請參考那篇文章的說明。

只有一個地方要特別說一下:那篇文章的範例程式,是在產品頁面上增加一個文字輸入欄位,由使用者自行輸入。我只是稍微修改一下,讓自訂欄位的值也能夠從產品頁面的 URL 參數帶進來。如前面提過的,客戶需求是要能夠從產品頁面的 URL 帶入「轉介商 ID」,所以我把 URL 的參數命名為「referer」,把網頁的表單欄位命名為「referer-field」,而在存入資料庫時,則以「referer_id」作為欄位名稱。

底下是產品頁面的執行結果:



你可以看到「轉介 ID」欄位的內容是由網址的 referer 參數帶進來的。帶入之後,這個自訂欄位也會存入購物車,但不會顯示在購物車和結帳頁面。直到結帳完成,才會顯示在訂單詳細資料中。如下圖:


這個新添加的自訂欄位,是保存在資料庫的 wp_woocommerce_order_itemmeta 資料表中。透過 MySQL 資料庫管理工具查看,的確有存入資料庫:



如此便大功告成。

結語

由於我是第一次使用 WordPress 和 WooCommerce,也是第一次寫 PHP,故即使有現成的範例程式碼,我在修改程式的過程中還是撞了幾次牆。臨陣磨槍,幸虧實驗結果看起來可行、堪用。

最重要的,還是在這摸索的過程裡,對 WordPress 和 WooCommerce 有了初步的認識。至於 PHP 程式的語法,當然不敢說「會寫了」,頂多只算是完成了我的  PHP 版本的「Hello World」練習而已。而已。

感想:WordPress 和 WooCommerce 用於架設電子商務網站,真是方便、迅速!除了 WordPress 本身設計得相當彈性、容易上手,加上有許多現成的網頁風格與外掛,難怪許多個人工作室和小型公司都愛用。
註:Cloudways 的免費試用期是三天,而我在接近試用期結束時,升級至付費方案,以便繼續我的實驗。再過了兩三天,直到到這篇筆記初稿寫完,才停止付費方案,全部的費用是 $9.26 美金。那麼,如何讓 Cloudways 不再從我的信用卡扣錢呢?只要把先前建立的虛擬主機(server)整個刪除就行了。

參考資料

技術提供:Blogger.