如何更改菜單顏色 WooCommerce 店面
已發表: 2020-10-02
設置您的 WooCommerce 商店需要花費大量時間，而找到正確的主題也是一個巨大的挑戰。 但是，WooCommerce 的創建者創建了免費提供的 Storefront 主題，並且可以非常靈活地進行定制。 創建一個用戶會喜歡的完美佈局設計需要花費很多時間。 您可能想要更改菜單顏色或其他一些困擾您的元素的顏色。
WooCommerce 店面更改菜單顏色
儘管如此，使用儀表板中“外觀”下的“自定義”選項很容易進行這些自定義。 本部分可讓您以主題作者允許的多種方式輕鬆更改主題。 但是，主題作者無法想到所有內容，更改菜單顏色可能屬於該類別。
自定義 CSS 根據主題單獨保存，訣竅只是弄清楚要使用的 CSS。 在這個簡短的教程中，我將引導您了解如何做到這一點。 此外，您將能夠更改 Storefront 主題中任何元素的顏色。
更改店面主題菜單顏色的步驟
以下是您需要遵循的簡單步驟：
1. 確定你需要改變的元素
說“改變菜單的顏色”很容易。 但是，實施它是另一回事。 每個主題都有不同的方式來引用其元素，因此建議使用正確的方式，以便 CSS 樣式可以正常工作。 這意味著在我們可以改變任何東西之前，我們必須掌握我們想要改變的東西。
只需在 Chrome 或 Firefox 等瀏覽器中右鍵單擊要更改的區域，然後單擊“檢查元素”，如下所示： 
單擊它後，將彈出控制台，其中包含左側頁面的各種元素以及右側這些元素的設置。 現在你需要找到負責改變顏色的元素。 
要選擇元素，請單擊元素選擇器，如屏幕截圖所示。 然後將光標指向菜單元素以檢查樣式。 搜索“背景”或“背景顏色”等詞。 當你找到它時，取消選中並檢查它們旁邊的“勾選”標記，看看它們是否會導致菜單顏色發生變化。 如果顏色沒有改變，那麼這不是你要找的那個。 
2.選擇你想要的顏色
現在您已經完成了艱苦的工作，下一步就是更改顏色。 這可以通過取消選中現有顏色選項並單擊右括號“}”附近來完成。 這將允許您輸入您的 CSS 規則。 您需要輸入“背景顏色”之類的內容，按 Tab 鍵，然後輸入您想要的顏色。 
在我的示例中，我將顏色更改為紅色，您可以看到控制台上方的菜單也變成了紅色。 但是，請務必注意，這不會對您的網站進行任何實際更改。 它只是在您的瀏覽器中可見的臨時更改。 它使您可以隨心所欲地進行實驗。 此外，您甚至可以決定將圖像作為背景。 現在您對所做的更改感到滿意，是時候將其永久化了。
3. 提取新規則
您需要通過右鍵單擊它（在 Firefox 上）並選擇“複製規則”來提取規則： 
但是，如果您使用的是 Chrome，您只需用鼠標選擇整個規則並複製文本即可。 將其粘貼到編輯器中並刪除所有現有規則，除了您剛剛添加的新規則（如果有的話）。
4. 添加規則
剩下的部分是複制/粘貼到您的 Storefront 主題自定義界面的“附加 CSS ”部分。 去做這個：
- 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
- 從儀表板菜單中，單擊外觀菜單 > 自定義。
- 在出現的左側邊欄中向下導航到 Additional CSS。
- 添加 CSS 規則，如下所示：
- 一旦您對更改感到滿意，請單擊發布。
結論
在本教程中，我向您展示了一種非常簡單的方法，只需四個簡單的步驟即可更改 Storefront 主題的菜單顏色。 此外，您可以使用上述過程來修改站點上任何元素的外觀，而不僅僅是菜單。 困難的部分只是找到正確的元素和正確的規則來改變。
識別元素後，您需要選擇首選顏色。 控制台區域允許您輸入 CSS 規則，但這不會對您的站點進行任何實際更改。 它允許您試驗您的規則並在您的網站上實施它們之前查看它們的實際效果。
對更改感到滿意後，您需要提取新規則並將其粘貼到 Storefront 它們自定義界面的 Additional CSS 部分。 如果您對更改印象深刻，可以單擊發布。 到目前為止，我相信您可以更改您網站上任何元素的顏色！
類似文章
- 如何在 WooCommerce 中更改結帳按鈕文本 [下訂單]
- 樣式化特定的 HTML 表格、行、列和單元格
- 如何添加基於 URL 的活動導航類
- 如何更改 WooCommerce 的“已添加到購物車”通知
- 如何在 WooCommerce 商店頁面中更改添加到購物車按鈕文本
- 如何計算添加到購物車 WooCommerce 購物車計數代碼的項目
- 如何在 WooCommerce 中隱藏購物車小計或刪除小計行
- 如何創建單獨的 WordPress 帖子頁面或博客頁面
- 單獨設置 WordPress 菜單項的樣式 WordPress 菜單 CSS 類
- 如何在 CSS 中選擇除最後一個子元素之外的所有元素 » CSS 不是最後一個子元素示例
- 定制店面 WooCommerce 主題的 80 多種技巧：終極店面主題定制指南
- 如何在 WooCommerce 店面主題中更改購物車圖標的大小
- 如何更改移動菜單按鈕店面主題的大小
- 如何在沒有插件的情況下重定向 WordPress 頁面？
- 如何在 Woocommerce 的“我的帳戶”頁面菜單中添加新菜單
- 如何刪除“使用 WooCommerce 構建”的電子郵件頁腳文本
- 如何使 Divi 移動菜單可滾動快速修復解決方案
- 更改如何在 WooCommerce 中結帳文本
- 如何調整頁眉的 WooCommerce 店面高度