Title: CSS Classes For WooCommerce – customize the WooCommerce cart and checkout via CSS
Author: Jose Mortellaro
Published: <strong>2023年8月17日</strong>
Last modified: 2026年5月21日

---

プラグインを検索

![](https://ps.w.org/css-classes-for-woocommerce/assets/banner-772x250.png?rev=2955116)

![](https://ps.w.org/css-classes-for-woocommerce/assets/icon-256x256.png?rev=2955116)

# CSS Classes For WooCommerce – customize the WooCommerce cart and checkout via CSS

 作者: [Jose Mortellaro](https://profiles.wordpress.org/giuse/)

[ダウンロード](https://downloads.wordpress.org/plugin/css-classes-for-woocommerce.0.0.3.zip)

 * [詳細](https://ja.wordpress.org/plugins/css-classes-for-woocommerce/#description)
 * [レビュー](https://ja.wordpress.org/plugins/css-classes-for-woocommerce/#reviews)
 * [開発](https://ja.wordpress.org/plugins/css-classes-for-woocommerce/#developers)

 [サポート](https://wordpress.org/support/plugin/css-classes-for-woocommerce/)

## 説明

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](https://josemortellaro.com/backend-speed-optimization/)
for more information.

## 評価

![](https://secure.gravatar.com/avatar/0750c31ad2e4acbd1e971a549974bf676de83ffafccd57e2dd7e2139fdd9e88d?
s=60&d=retro&r=g)

### 󠀁[Perfect to customize the cart and checkout via CSS](https://wordpress.org/support/topic/perfect-to-customize-the-cart-and-checkout-via-css/)󠁿

 [Jose Mortellaro](https://profiles.wordpress.org/giuse/) 2023年8月18日

I love my own plugin because it gives you the possibility to customize the cart 
and checkout pages depending on the cart situation, only via CSS without touching
any line of PHP code 🙂

 [ 1件のレビューをすべて表示 ](https://wordpress.org/support/plugin/css-classes-for-woocommerce/reviews/)

## 貢献者と開発者

CSS Classes For WooCommerce – customize the WooCommerce cart and checkout via CSS
はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

 *   [ Jose Mortellaro ](https://profiles.wordpress.org/giuse/)

[“CSS Classes For WooCommerce – customize the WooCommerce cart and checkout via CSS” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/css-classes-for-woocommerce)

### 開発に興味がありますか ?

[コードを閲覧](https://plugins.trac.wordpress.org/browser/css-classes-for-woocommerce/)
するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/css-classes-for-woocommerce/)
をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/css-classes-for-woocommerce/)
を [RSS](https://plugins.trac.wordpress.org/log/css-classes-for-woocommerce/?limit=100&mode=stop_on_copy&format=rss)
で購読してみてください。

## 変更履歴

#### 0.0.3

 * Checked: WordPress v. 6.4

#### 0.0.2

 * Added: CSS class for each row depending on the product ID, slug, and category

#### 0.0.1

 * Initial release.

## メタ

 *  バージョン **0.0.3**
 *  最終更新日 **1か月前**
 *  有効インストール数 **20+**
 *  WordPress バージョン ** 4.6またはそれ以降 **
 *  検証済み最新バージョン: **7.0**
 *  PHP バージョン ** 7.2またはそれ以降 **
 *  言語
 * [English (US)](https://wordpress.org/plugins/css-classes-for-woocommerce/)
 * タグ
 * [body](https://ja.wordpress.org/plugins/tags/body/)[cart](https://ja.wordpress.org/plugins/tags/cart/)
   [checkout](https://ja.wordpress.org/plugins/tags/checkout/)[customization](https://ja.wordpress.org/plugins/tags/customization/)
   [style](https://ja.wordpress.org/plugins/tags/style/)
 *  [詳細を表示](https://ja.wordpress.org/plugins/css-classes-for-woocommerce/advanced/)

## 評価

 5つ星中5つ星

 *  [  1 5-星レビュー     ](https://wordpress.org/support/plugin/css-classes-for-woocommerce/reviews/?filter=5)
 *  [  0 4-星レビュー     ](https://wordpress.org/support/plugin/css-classes-for-woocommerce/reviews/?filter=4)
 *  [  0 3-星レビュー     ](https://wordpress.org/support/plugin/css-classes-for-woocommerce/reviews/?filter=3)
 *  [  0 2-星レビュー     ](https://wordpress.org/support/plugin/css-classes-for-woocommerce/reviews/?filter=2)
 *  [  0 1-星レビュー     ](https://wordpress.org/support/plugin/css-classes-for-woocommerce/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/css-classes-for-woocommerce/reviews/#new-post)

[すべてのレビューを見る](https://wordpress.org/support/plugin/css-classes-for-woocommerce/reviews/)

## 貢献者

 *   [ Jose Mortellaro ](https://profiles.wordpress.org/giuse/)

## サポート

意見や質問がありますか ?

 [サポートフォーラムを表示](https://wordpress.org/support/plugin/css-classes-for-woocommerce/)