如何使用 CSS 在 WooCommerce 中對缺貨產品的圖片進行灰階化

WooCommerce 是一款強大且靈活的 WordPress 電子商務插件，可讓您輕鬆建立和管理線上商店。使用 CSS 對您的產品（尤其是那些缺貨的產品）進行視覺更改只是個人化 WooCommerce 商店的眾多方法之一。這篇文章將解釋如何將簡單的 CSS 程式碼片段應用於缺貨的灰階產品照片，以便客戶可以注意到這些商品缺貨。

為什麼灰階缺貨產品圖片？

對缺貨產品進行灰度化照片是一種簡單而有效的方法，可以通知購物者某些商品現在缺貨。這種視覺訊號有助於管理消費者的期望，而無需額外的文字或通知。它還透過清楚指示哪些產品有庫存、哪些沒有庫存來改善客戶體驗，減少挫折感並改善整個購物體驗。

CSS 程式碼

將 WooCommerce 中缺貨產品的圖片進行灰階化所需的 CSS 程式碼簡單明了：

.outofstock img {
    filter: grayscale(1);
}

這段程式碼是如何運作的

讓我們分解這段程式碼的工作原理以及為何它與 WooCommerce 無縫整合：

WooCommerce 的缺貨產品內建類別： WooCommerce 自動將類別 outofstock 分配給缺貨產品。此類別可以透過 CSS 進行定位，以僅將特定樣式應用於缺貨商品。

定位產品圖片： .outofstock 中的 img 選擇器確保只有缺貨產品的圖片受此 CSS 影響規則。這意味著其餘的產品詳細信息，例如標題和價格，將保持不變。

應用灰階濾鏡： CSS 中的 filter 屬性用於將視覺效果套用至元素。在本例中，grayscale(1) 將影像轉換為黑白，其中 1 表示全灰階效果（與 0 不同，0 會使影像保持全彩）。這使得產品影像顯得柔和，清楚地表明該商品不可用。

在您的 WooCommerce 商店中實施程式碼

要將此 CSS 程式碼應用到您的 WooCommerce 線上商店，您只需將其添加到主題的樣式表中或使用 WordPress 定制器中的內建附加 CSS 選項即可：

使用主題的樣式表：

1. 前往您的 WordPress 儀表板。
2. 導覽至「外觀」>主題編輯器。
3. 找到活動主題的 style.css 檔案。
4. 在文件底部加入 CSS 程式碼並儲存變更。

使用 WordPress 自訂器：

1. 前往您的 WordPress 儀表板。
2. 導航至「外觀」>客製化。
3. 點選「其他 CSS」。
4. 將 CSS 程式碼貼到文字區域並發布您的變更。

結論

自訂您的 WooCommerce 商店以顯示灰階缺貨產品照片是改善使用者體驗的簡單而有效的方法。使用 WooCommerce 的內建類別和 CSS 過濾功能，您可以直觀地區分不可用的產品，讓客戶更有效地探索您的商店。這個小小的改變可以對人們對您商店的看法產生重大影響，從而帶來更愉快的購物體驗。

隨意使用此 CSS 程式碼並將其與其他樣式結合，以進一步自訂您的 WooCommerce 商店！

快樂編碼：D

以上是如何使用 CSS 在 WooCommerce 中對缺貨產品的圖片進行灰階化的詳細內容。更多資訊請關注PHP中文網其他相關文章！