自訂 WooCommerce：最佳實務
WordPress 與 WooCommerce 的最大優勢是程式碼與內容可依需求調整，完全修改與自訂您的網站。
彈性是使用 WooCommerce 線上銷售的最大優點之一。外掛、擴充功能與佈景主題可滿足需求，進而調整與編碼以自訂網站外觀與功能。
執行網站調整時，需遵循某些最佳實務，而正確做法並非總是顯而易見。
為何需要最佳實務？
許多使用者會從預設外觀自訂佈景主題，變更連結顏色以及版面配置與風格。多數人會直接修改程式碼，這是最簡單的做法。但這會造成未來更新的問題，因為檔案被新版本覆蓋時，所有修改都會遺失。
本教學要展示的是自訂佈景主題的最佳方法，讓更新過程盡可能順利，並由您掌控自訂內容。
自訂方式有兩種：
- 外掛 — 小幅修改
- 子佈景主題 — 大幅變更
使用外掛
若僅計劃對樣式表或 CSS 進行小幅修改，最佳選項是使用允許新增自訂樣式的外掛。
使用 Jetpack 進行 CSS 或 Sass 變更
建議使用 Jetpack 進行 CSS 或 Sass 相關變更。
安裝 Jetpack。完成後，前往您的網站 > 控制台 > Jetpack > 設定，並啟用 Custom CSS。
接著，前往 外觀 > Edit CSS。您可在此新增所有自訂 CSS 樣式。
範例
以下是簡單範例，使用 Chrome Dev Tools 尋找 Storefront 佈景主題的導覽連結顏色。檢查元素方式如下：在元素上按右鍵 > 檢查，即可顯示導覽元素的樣式名稱。
上方截圖顯示導覽中連結顏色的樣式：
.main-navigation ul li a {
color: #ffffff;
}
.main-navigation ul li a:hover {
color: #e6e6e6;
}
將此內容貼到 custom.css 中，將顏色改為紅色，滑鼠移過時的顏色改為白色。移除其他不會變更的樣式，最終如下：
.main-navigation ul li a {
color: red;
}
.main-navigation ul li a:hover {
color: white;
}
儲存 custom.css 並重新整理頁面後，導覽連結顏色會變成紅色，滑鼠移過時會變成白色。
Changes after applying custom CSS
您也可以在樣式表中新增新樣式，補充佈景主題現有樣式。佈景主題更新時，Jetpack 會保留您的樣式。更新至新版本前，建議備份佈景主題，並查看我們的升級教學瞭解執行方式。
使用 Code Snippets 處理 PHP
Code Snippets 外掛可讓您將程式碼片段新增至網站，而非貼到 functions.php 檔案中，撰寫簡短說明以瞭解功能，並視需求啟用或停用這些片段。
使用子佈景主題
若希望修改熱門佈景主題的樣式表或 CSS，最佳選項是使用子佈景主題，以在未來更新時保留自訂內容。
使用付費子佈景主題
許多熱門佈景主題提供可安裝與啟用的子佈景主題，無需編碼或樣式調整即可修改父佈景主題外觀。購買的子佈景主題不應用於自訂程式碼，而是透過他人設計改變佈景主題外觀的方式。例如，針對我們的 Storefront 佈景主題，有相當。
此類子佈景主題不適合新增自訂程式碼，原因與避免在父佈景主題中新增自訂程式碼相同；子佈景主題更新時，所有自訂程式碼也會被覆蓋。
使用自訂子佈景主題
您也可自行建立子佈景主題。這相當於在父佈景主題上新增一層，唯一目的是讓自訂程式碼具有優先權，避免父佈景主題下次更新時捨棄您的程式碼。
您可使用我們的教學建立自己的子佈景主題；設定與使用子佈景主題。WordPress.org 上的子佈景主題也有更多關於子佈景主題運作方式的資訊。