前言介紹
- 這款 WordPress 外掛「CSS Classes For WooCommerce – customize the WooCommerce cart and checkout via CSS」是 2023-08-16 上架。
- 目前有 20 個安裝啟用數。
- 上一次更新是 2025-04-18，距離現在已有 14 天。
- 外掛最低要求 WordPress 4.6 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.2 以上。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
giuse |
外掛標籤
body | cart | style | checkout | customization |
內容簡介
CSS Classes For WooCommerce 外掛可以根據購物車和顧客的情況，將 CSS 類別新增至頁面的 body 元素中。
使用者可以利用這些類別以自訂的 CSS 自訂結帳和購物車頁面。
以下是會新增至 body 的 CSS 類別：
- 購物車是否為空或非空
- 是否至少有一項產品的價格大於零（需要付款方式）
- 是否顯示運送方式或不需要運送方式
- 若需填寫運送地址或購物車僅有數位產品
- 價格是否顯示，是否包含稅金
- 所有產品是否只能個別售賣
- 是否購物車中含有特定產品
- 特定產品的數量為特定數字
- 顧客的帳單地址為特定國家
- 顧客在網站上擁有特定身份
- 顧客是否曾經購買過任何產品
- 顧客曾經購買的次數是否為特定次數
例如，若購物車中只有可以個別售賣的產品，你可以利用此外掛新增的 CSS 類別來隱藏「數量」欄位。
在這種情況下，你可以撰寫以下的 CSS：
.ccfw-cart-all-sold-individually-true .shop_table .product-quantity {
display: none;
}
如何透過 CSS 自訂 WooCommerce 的購物車和結帳頁面：
- 外掛並未提供任何選項，也不會看到任何設定頁面。只需啟用即可。
- 在前端頁面上按右鍵並點擊「檢查」。
- 讀取 body 元素的 class 屬性值。
- 使用新增至 body 的 CSS 類別進行自訂 CSS。
需求：
- 只有具備基本 CSS 技能並能夠新增自訂 CSS 的人才能充分利用這個外掛。
- 否則你可能不知道如何使用這個外掛。
原文外掛簡介
CSS Classes For WooCommerce adds CSS classes to the body depending on the cart and the customer.
You can then use those classes to customize the checkout and cart pages with your custom CSS.
CSS classes added to the body if:
The cart is empty or not empty
There is at least a product with a price greater than zero (payment methood needed)
The shipping methods are shown or not needed
If the shipping address is needed or there are only digital products in the cart
The prices are shown including or excluding taxes
All products are sold individually
There are specific products in the cart
The quantity of specific products is a specific number
The billing address of the customer has a specific country
The customer has a specific role on the website
The customer has already bought something
The customer has bought a specific number of time
If for example in the cart there are only products that can be sold individually, you can take advantage of the CSS class added by this plugin to hide the column “Qty” .
In this case you will write the CSS
.ccfw-cart-all-sold-individually-true .shop_table .product-quantity {
display: none;
}
How customize the WooCommerce cart and checkout via CSS
The plugin doesn’t provide any option, and you will not see any settings page. Just activate it.
Right-click and click on Inspect on the frontend.
Read the value of the class attribute of the body element.
Use the CSS classes added to the body for your custom CSS
Requirements
You can take advantage of this plugin only if you have at least basic skills with CSS and are able to add your custom CSS.
In other cases, you will not know what to do with this plugin.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「CSS Classes For WooCommerce – customize the WooCommerce cart and checkout via CSS」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Brazilian Market on WooCommerce 》此外掛增加了用於自然人或法人的新項目：出生日期、性別、號碼、鄰居和手機號碼等欄位。該掛件在某些字段上使用格式掩碼，並通知用戶錯誤的電子郵件位址。, ...。
Amazon Pay for WooCommerce 》什麼是Amazon Pay？這是一個端到端的支付解決方案，為數以百萬計活躍的Amazon客戶[1]提供一個熟悉、快速和安全的方式來完成他們通過您的在線商店的購買。購物...。
reCAPTCHA for WooCommerce 》輕鬆將 Google reCAPTCHA 加入到 WooCommerce 結帳和表單中，以幫助防止垃圾郵件。, 支援的表單, 您目前可以在以下表單啟用 reCAPTCHA：, WooCommerce, , 結...。
Fluid Checkout for WooCommerce – Lite 》Fluid Checkout 是一款外掛程式，可以使 WooCommerce 網站的結帳體驗更加簡單、提高新客戶和老客戶的滿意度，並支援 Shopify 一樣的線性結帳流程，消除結帳頁...。
PayTR Sanal POS WooCommerce – iFrame API 》PayTR Sanal POS and Payment Solutions is a service that allows website owners to receive secure online payments from their websites in the fastest ...。
Klarna Checkout for WooCommerce 》Checkout 是一個嵌入式的結帳解決方案，內含多種熱門支付方式（現在支付、稍後支付、分期、分期付款）。有了 Checkout，Klarna 就是你的唯一付款服務提供商。...。
Force Authentification Before Checkout for WooCommerce 》強制顧客在結帳前登入或註冊以提高您的轉換率。, 貢獻, , 如有錯誤、建議或貢獻，請在我們的Github存儲庫中開啟一個問題或在WordPress外掛論壇中創建一個主題...。
MkRapel Regiones y Ciudades de Chile para WC 》這個 WordPress 外掛已經更新到 2020 年最新的智利地區與城市數據，讓你可以使用城市來設置配送區域，並允許你自定義 WooCommerce 中用於運送和帳單的付款表...。
Checkout Files Upload for WooCommerce 》Checkout Files Upload for WooCommerce 外掛允許您的顧客在 WooCommerce 結帳頁面上 (或結帳完成後) 上傳檔案。, 功能, 設定欄位在 WooCommerce 結帳頁面上...。
Payment Button for PayPal 》Payment Button for PayPal外掛（也叫做 WP PayPal）讓你可以輕鬆建立PayPal的立即購買、加入購物車、捐款、或訂閱等按鈕。它會透過短碼產生動態按鈕，在你的...。
Order Delivery Date for WP e-Commerce 》點擊「購買」後客戶體驗（通常稱為購後體驗）與產品獲取過程同樣重要。因此，我們開發了 Order Delivery Date Plugin，以協助您通過在指定日期交付訂單，提高...。
Change Quantity on Checkout for WooCommerce 》這個外掛可以讓顧客在 WooCommerce 結帳頁面使用標準數量欄位更改數量，並刪除商品。, Change Quantity on Checkout Pro for WooCommerce, Change Quantity o...。
Timologia for WooCommerce 》在結帳頁面上添加發票功能，並根據希臘標準在用戶配置文件和訂單頁面上添加可編輯字段。, 特點, , 在結帳頁面中添加需要的發票字段（增值稅、稅務機關和職業...。
Payoneer Checkout 》Payoneer Checkout 是下一代支付處理平台，為世界各地的商家提供他們在今天競爭激烈的全球市場中所需的解決方案和方向。, 我们提供开箱即用的付款页面、支持...。
One page checkout and layouts for woocommerce 》One Page Checkout and Layouts 簡化了結帳流程。它將購物車和結帳功能合併在單一頁面上。最重要的是，使用者可以在同一頁面使用 AJAX 更改數量和刪除產品。,...。