內容簡介
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 – customize the WooCommerce cart and checkout via 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.
Backend Speed Optimization
Is your dashboard slow? We optimize admin performance by improving queries and reducing plugin load.
Read Backend Speed Optimization Service for more information.
