Title: CSS Classes For WooCommerce – customize the WooCommerce cart and checkout via CSS Author: Jose Mortellaro Published: 2023 年 8 月 17 日 Last modified: 2025 年 12 月 10 日 --- 搜索插件 ![](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://cn.wordpress.org/plugins/css-classes-for-woocommerce/#description) * [评价](https://cn.wordpress.org/plugins/css-classes-for-woocommerce/#reviews) * [开发进展](https://cn.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/)，或 通过[RSS](https://plugins.trac.wordpress.org/log/css-classes-for-woocommerce/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/css-classes-for-woocommerce/)。 ## 更新日志 #### 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** * 最后更新：**5 月前** * 活跃安装数量 **20+** * WordPress 版本 ** 4.6 或更高版本 ** * 已测试的最高版本为 **6.9.4** * PHP 版本 ** 7.2 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/css-classes-for-woocommerce/) * 标签 * [body](https://cn.wordpress.org/plugins/tags/body/)[cart](https://cn.wordpress.org/plugins/tags/cart/) [checkout](https://cn.wordpress.org/plugins/tags/checkout/)[customization](https://cn.wordpress.org/plugins/tags/customization/) [style](https://cn.wordpress.org/plugins/tags/style/) * [高级视图](https://cn.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/) ## 支持 最近两个月解决的问题： 总计 1，已解决 0 [查看支持论坛](https://wordpress.org/support/plugin/css-classes-for-woocommerce/)