線上程式教學課程: 程式客製WooCommerce，WordPress購物系統全解析

不了解 WooCommerce 的運作邏輯對購物網站接案一直沒信心嗎？會寫 WordPress 程式但在 WooCommerce 程式客製化上一直卡關嗎？這堂課將完整的對佈景主題與外掛程式實作解析，帶你一步步克服這些障礙！

最後更新時間： 2022/01

特價 NT$: 5000

原價 NT$: 8400

優惠至：2024/04/28

課程包含:

終生於平台觀看詳情

7個章節，102堂影片

23小時以上的課程時間

本課程未在其他平台上架。

信用卡、超商、ATM、Paypal皆可付款

3、6期信用卡付款零利率查看支援銀行

(信用卡不留卡號，Paypal需非台灣)

課程敘述

課程新增內容！！

【WordPress 與 WooCommerce 製作一頁式商店】相關議題將會持續更新於

[Theme] WooCommerce 結帳流程程式調整章節，有興趣的請不要錯過。

(預計 2月底完成)

--- 以下課程介紹 ---

WooCommerce 可能對於沒碰過 WordPress 網路架站的同學有些陌生，但是這是目前 WordPress 最熱門的電商外掛軟體，幾乎可以說是用 WordPress 架設線上網路商店最佳的選擇。本課程不適合完全沒碰過 WordPress 與 WooCommerce 的同學。

WooCommerce 由 Automattic 公司製作並且為免費開源軟題, 在 WordPress 官方外掛區可以直接下載，超過 500 萬以上的下載安裝量。同 WordPress 主程式一樣符合 GPL 授權，故可免費商用與改作。因為非常熱門所以相關資源豐富。WooCommerce 官方也有相對應商城，可以免費或付費下載佈景主題或是外掛，讓我們架設的電商網站功能更齊全。像是知名的第三方支付 Paypal 與Stripe 都有官方的外掛支援，基本上只要安裝即可使用。

(Automattic 公司為 WordPress 創始人之一 Matt Mullenweg 所開立，為WordPress主要維護公司之一)

當然，以一般的WooCommerce 玩法，找到合適的佈景主題(Theme)與外掛(Plugin)增加功能是主流的玩法。但是各個佈景主題與外掛的作者本身通常沒有考慮到彼此的程式的相依性，或是為了增加價值而在單一外掛加入過多的功能，導致很多站長為了取得外掛中的一個小功能卻引入了過多對自己無用的程式碼讓網站變慢，甚至因為功能重疊而發生相依性問題網站開不起來。其實只要懂的 WooCommerce 程式客製化，很多功能只需要小幅度的修改程式碼即可。可以有效地避免程式過於肥大的問題，也比較不會因為外掛或佈景主題改版升級而導致意外的災難。

不過 WooCommerce 由於功能強大，所以其程式也是龐大且複雜的，再加上WooCommerce 是作為 WordPress 的外掛發行，所以在程式上是相依 WordPress 的開發邏輯與背景知識。因此雖然 WooCommerce 有完整線上的開發說明文件，但是實際上還是需要花費不少的時間去閱讀練習。對於新加入 WordPress 社群的開發者並不是一件容易的事情。

本課程就是為了節省同學在摸索開發 WooCommerce 的時間而設計的，並且適合接案公司新人教育。對於接案工作者來說，學會 WooCommerce 的佈景主題與外掛開發也可以有效的提高接案的技術強度，進而提高接案工作的價值，或是做最小的更動即可完成目標，避免未來大量的維護問題或是客戶自己搞砸的風險，也可以製作其他外掛所沒有的獨家功能。
(部分功能因為高度依賴商業邏輯，所以不太容易出現在「通用型」外掛上，通常都需要自行開發)。

課程將會從建立一個包含完整流程的佈景主題開始，並且也同時會依照功能面去切分講解，讓想基於現有佈景主題去調整的同學也能找到切入點去加入功能，並且不影響佈景主題的穩定度。此外也包含撰寫獨立功能的外掛製作，讓加入功能「模組化」可以同時給多個專案使用。

注意：課程無法實現每個同學的應用需求，大部分的商業應用需要消化課程後「自行」規劃完成，畢竟課程時數有限，工作必須要自己做，課程只是給你釣竿而已。課程將以盡可能包含所有面向的 WooCommerce 函式與開發邏輯為主，同時也可避免版本更新的問題。

課程難度

深入，此課程是為特定程式領域所設計。

請參閱課程需求

課程需求

這門課會是關於WooCommerce 的【進階 WordPress 客製化】課程，

不適合新手與不懂程式的同學，需要對程式與WordPress有一定程度的瞭解

建議完全沒經驗的同學可以先從以下兩項之一開始：

1. 從練習 HTML / CSS / JavaScript / jQuery 開始 (點我看課程)

2. 從架設一個基本的WordPress 網站與練習 PHP 開始 (點我看課程)

不過畢竟是線上課程，教學速度不會飛快，

可以邊看邊學，碰到不會的再自行補強。

其他符合如下：

1. 使用過 HTML、CSS 與 Javascript

2. 使用過 PHP 程式客製化WordPress 佈景主題(Theme)與外掛(Plugins)，或是對 PHP 有一定程度了解。
(沒嘗試過？不會PHP? 可以加入課程：WordPress - 從頭教起的網站架設，或是套裝組合【WordPress + WooCommerce】與【基礎前端 + WordPress + WooCommerce】)

3. 稍微了解 MySQL 運作邏輯
(怕對 MySQL 不夠了解？可以加入從零開始的SQL語法與資料庫設計 - 以MySQL來攻略 )

4. PC 與 Mac 系統都可以開發，沒有限制

課程學習上有問題都可以在「課程播放頁面」詢問喔！老師都會很快速的回答。

課程目標

擁有用「程式」客製化 WooCommerce 佈景主題外觀的能力

擁有用「程式」調整 WooCommerce 結帳流程的能力

擁有用「程式」撰寫 WooCommerce 金流外掛的能力

擁有用「程式」撰寫 WooCommerce 一般外掛的的能力

擁有用「程式」撰寫 WooCommerce 後台管理的能力

擁有用「程式」撰寫 WooCommerce 會員相關功能的能力

課程特點

課程將以程式的方式對 WooCommerce 佈景主題與外掛進行製作與調整。會從零開始只做一個基本的 WooCommerce 佈景主題，接著搭配現有主題進行調整。最後以外掛的方式加上額外的客製化功能，影響範圍有「前端首頁」、「商品頁面」、「結帳流程」、「金流」、「會員功能」。

課程將會以固定版本的 WordPress 與 WooCommerce 進行課程，一般而言雖然操作介面有可能因為版本變動而有所調整，但是官方函式API 接口除非必要不然並不會進行變動，因為「底層」變動會導致「所有」的外掛與佈景主題發生相容性錯誤，等於是自毀生態圈會造成商業上的災難。

第一章 (總長2.2小時)

WooCommerce 基本使用與課程介紹

01. WooCommerce 課程介紹與為何要程式客製化
09:26
02. 安裝使用WordPress的必要環境, 為什麼需要先建立本地端開發環境
11:59
03. [Windows] 安裝MAMP來開發PHP
21:03
04. [Mac] 安裝MAMP來開發PHP
12:42
05. [Windows] 在本地端安裝WordPress(使用 MAMP)
19:07
06. [Mac] 安裝WordPress與建立MySQL使用者
17:54
07. [補充課程] PHPMyAdmin 使用者權限設定
11:34
08. [補充][Windows] 安裝XAMPP (MAMP無法安裝的替代方案)
08:15
09. [補充] 改變XAMPP Apache與MySQL port號
05:34
10. [補充] 改變XAMPP網站資料夾讀取位置
05:10
11. [補充] 用XAMPP開發WordPress與建立資料庫和使用者權限
11:44

第二章 (總長6.4小時)

[Theme] 從頭建立 WooCommerce 簡易樣式

01. 手動加入特定版本 WooCommerce (外掛 Plugin)
08:03
02. 完整解析PHP設定值, 解決PHP上傳上限問題(php.ini, .htaccess, php_value, ini_set)
24:24
03. 安裝 WooCommerce 與設定步驟背後意義探討
22:14
04. 簡單介紹 WooCommerce 產生頁面與簡單的反推導技巧
14:49
05. 利用乾淨的樣式來探討WordPress 與 WooCommerce 基本運作邏輯與頁面
27:43
06. 商品頁面的邏輯, 支援WooCommerce 與不支援 WooCommerce 的佈景主題的差異(wc_get_page_id, the_content, add_filter)
19:40
07. 獨立商品頁與商品類別頁面(is_product, is_product_category)
09:34
08. 為何 WooCommerce 相關功能不支援一般檔案 template 邏輯(register_taxonomy, register_post_type )
14:46
09. [補充] 簡述 WooCommerce 版本升級可能包含的內容
05:31
10. 修改 WooCommerce 預設元件 CSS 的方式
24:33
11. 增加數量選擇 UI 於商店首頁加入購物車按鈕 (修改 JavaScript, WordPress filter)
12:44
12. [Child theme] 使用子樣式來客製化商店展示頁面, 解析子樣式讀取順序與路徑所造成的問題(get_template_directory_uri, get_stylesheet_directory_uri)
26:58
13. 改變 Single Product 頁面, 如何不讓 CSS 過度影響, 增加自訂元件顯示位置 (woocommerce_after_single_product_summary)
21:09
14. WooCommerce 購物車畫面更新原理, cart item 存放位置
11:18
15. 客製化購物車畫面加入額外內容(無商品)
14:40
16. 客製化購物車畫面加入額外內容(有商品)
12:55
17. 結帳頁面邏輯與相關資料表介紹
22:18
18. 介紹結帳頁面原始碼顯示邏輯
21:33
19. 修改結帳頁面與增加欄位, 小心JavaScript的影響
22:45
20. 修改訂單頁面(一), 增減訂單詳細資料
19:14
21. 修改訂單頁面(二), 修改訂單頁面訂單商品
18:18
22. 修改訂單管理頁面, 加入自訂欄位顯示與修改
07:38

第三章 (總長3.0小時)

[Plugin] 利用自製金流外掛了解結帳細節

01. 自製金流外掛章節介紹
04:19
02. 建立空外掛與加入子選單於 WooCommerce 後台
14:09
03. 金流與外掛之間的關係
06:04
04. 新增自訂訂單狀態(order_status)
11:52
05. 利用自訂 Rest api endpoint 來了解完成訂單(order payment_complete)
18:35
06. WC_Payment_Gateway 金流功能製作(一), 加入金流與文字設定
19:32
07. WC_Payment_Gateway 金流功能製作(二), 成功process payment 與加入 webhook
13:58
08. WC_Payment_Gateway 金流功能製作(三), 加入 payment_fields 與 JavaScripts製作信用卡輸入欄位
17:01
09. WC_Payment_Gateway 金流功能製作(四), 介紹 form_fields type 與自製 type 元件
17:13
10. [綠界 ECpay] 介紹綠界串接邏輯與文件導讀
14:00
11. [綠界 ECpay] 產生測試用綠界付款頁面
14:07
12. [綠界 ECpay] 進度條綠界外掛1.0.1操作與介紹
08:35
13. [綠界] 進度條綠界外掛1.0.1程式詳細解說
22:35

第四章 (總長5.1小時)

[Theme] WooCommerce 首頁與商品頁程式製作

01. 支援 WooCommerce 佈景主題章節介紹
04:16
02. 建立乾淨支援 WooCommerce 的佈景主題
10:24
03. WooCommerce templates 複寫邏輯與官方文件介紹
14:21
04. 讓 WooCommerce 各功能頁面運作
09:43
05. 簡單的加入Bootstrap 4與空白的Nav
06:23
06. Walker 介紹以及為何我不推薦使用 Walker.
04:24
07. Walker_Nav_Menu 的邏輯與客製化(一)
19:15
08. Walker_Nav_Menu 的邏輯與客製化(二)
11:49
09. 修正Nav menu 註冊與頁面寬度
06:26
10. 在Nav menu 上加入迷你購物車功能(mini cart, fragments)
17:05
11. 複習商品類型, 使用可變商品
11:43
12. 修改 Single product 產品頁面(一), 移除圖片與麵包屑
14:52
13. 修改 Single product 產品頁面(二), 解構 woocommerce_single_product_summary action
15:10
14. 修改 Single product 產品頁面(三), 解構tabs, 重新排列商品描述, 額外資訊, 商品評價
10:44
15. 修改 Single product 產品頁面(四), 利用 Product category 加入多個商品樣板 template
09:01
16. 修改 Single product 產品頁面(五), 改變 Submit 元件, 從 select 改成列表形式
24:09
17. 修改 Single product 產品頁面(六), 修改WooCommerce 核心邏輯, 一次加入多種商品
11:24
18. 修改 Single product 產品頁面(七), 加入商品圖庫 Carousel
12:27
19. 修改 Shop 頁面(一), 分別獨立出 shop, index, archive 樣板
13:52
20. 修改 Shop 頁面(二), 修改商品列表卡片元件(content-product.php)
18:24
21. 修改 Shop 頁面(三), 加入自訂商品排序, 利用 postmeta 隨意控制
19:52
22. 修改 Shop 頁面(四), 利用客製化活動開始時間排序商品
11:49
23. 建立首頁, 使用WP_Query 完成複雜邏輯
26:44

第五章 (總長2.4小時)

[Theme] WooCommerce 結帳流程程式調整

01. 結帳流程修改章節介紹
01:45
02. WooCommerce shortcode 短代碼邏輯介紹, 修改 cart-empty 畫面
10:48
03. Cart 頁面修正(一), 修改Cross sells交叉銷售顯示邏輯
22:01
04. Cart 頁面修正(二), 修改 quantity input 的 UI元件, 了解 cart.js 原始碼邏輯
23:18
05. Cart 頁面修正(三), Mini cart 顯示修正, 結帳前登入帳號畫面調整
20:29
06. Checkout 頁面修正(一), 結帳畫面區塊先後順序調整
15:42
07. Checkout 頁面修正(二), 修改折價卷輸入框位置
07:13
08. Checkout 頁面修正(三), 修正超商物流寄送 UI 動作
29:01
09. 更新至 WooCommerce 6.0.0 與 WordPress 5.8.1, 修正template 版本問題
04:17
10. 利用 WordPress 與 WooCommerce 製作一頁式商店示範
10:00
章節尚未完全完結，我們會持續更新!!

第六章 (總長2.2小時)

[Plugin] 自製後台訂單管理頁面與顯示調整外掛

01. 製作修改控制台外掛章節介紹
03:30
02. 修改 product, order, coupon 的 admin list table 欄位顯示(一)
13:44
03. 修改 product, order, coupon 的 admin list table 欄位顯示(二), 加入自訂欄位與自訂排序
15:54
04. 隱藏 WooCommerce 後台 menu 與 submenu, 避免操作人員不小心改變設定
09:18
05. 隱藏 WooCommerce 後台 menu 與 submenu (二), 簡單的列出所有列表與解決特殊字元 bug問題
10:27
06. 隱藏 WooCommerce 後台 menu 與 submenu (三), 建立密碼機制額外限制管理員功能
16:34
07. 隱藏 WooCommerce 後台 menu 與 submenu (四), 兩種後台menu 加入介紹與使用 feature_config 的限制
12:14
08. 設定頁面修正 (一), 新增與移除分頁(Tab)
13:04
09. 設定頁面修正 (二), 修正 wc-settings 預設首頁為自製頁面
12:23
10. 設定頁面修正 (三), 修正新增分頁, 詳細敘述 WC_Settings_Page 運作邏輯與調整方式
14:59
11. 設定頁面修正 (四), wc-admin-addons, wc-admin-status, wc-admin-report 程式導覽與修改建議
09:30

第七章 (總長2.4小時)

[Plugin] 製作會員額外功能外掛

01. 限定帳號閱覽權限頁面, 學生上傳作業功能與報價單功能解說
08:03
02. 建立權限頁面post type, 只讓特定使用者與管理員觀看
18:26
03. 在 admin 加入控制項, 更改文章與使用者配對
08:24
04. 在前台權限限制頁面上傳檔案, 與修正後台顯示
17:02
05. 裡用 action 與 Filter 整理程式碼, 加入redirection 解決重複提交問題
08:46
06. 顯示上傳檔案列表, 增加刪除檔案與增加 attachment 個別頁面驗證
09:54
07. 增加 admin post type管理頁面, 不同使用者看到不同內容
16:27
08. 切換至 WooCommerce 與 Storefront, 修正直到目前的錯誤(redirect, image subsizes)
11:06
09. 在我的帳號(my-account)加入新分頁, 移植管理上傳檔案頁面
16:01
10. 建立簡易課程頁面, 改用user meta來做驗證
11:48
11. 在 user update 與 profile 頁面編輯課程權限和usermeta
09:56
12. 購買後賦予權限
08:13

課程講師

縱裕

iOS 工程師 / Ruby On Rails 網站工程師

現職為iOS 工程師，但同時也在鑽研網站技術並且建立多個網站。
曾協助多個新創公司，範圍包含網站前端到桌面應用程式倉存管理與電子機關互動。
從網站架設，手機APP到系統底層都有豐富的經驗。
擅長不同系統架構的整合與創新想法的實現。

經歷：
進度條技術顧問
Digilog.tw 網站與倉庫後台程式架構設計與建置
Zooe 線上教學平台網站架構設計與建置
HelloStudy 楓禾留遊學網設計與建置
Funlock 放樂工作室真實密室逃脫遊戲 - 魔鏡迷城電子機關設計與製作
iOS App - Rock Click 節拍器
Nexcom ARM韌體與軟體工程師
Insyde BIOS工程師