Add Custom CSS to WooCommerce Pages Easily

How to add custom css to woocommerceCustom css for woocommerce product pagesWhere to put custom css in woocommerceApply css to specific woocommerce pagesCustomize css in woocommerceAdd css to woocommerce siteHow to style woocommerce pages with cssWoocommerce custom css tutorialBest way to add css in woocommerceUsing css for woocommerce customization

Explanation

To add custom CSS to your WooCommerce pages, you can use two handy functions. These functions ensure your styles are applied only when WooCommerce is active and specifically on WooCommerce-related pages like the shop, cart, checkout, or account pages.

Using a Separate CSS File:

The first function checks if WooCommerce is active and if you're on a WooCommerce page.
If both conditions are met, it loads a CSS file named woocommerce-custom.css from your theme's directory.
This is great for organizing your styles in a separate file, making it easier to manage and update.

Adding Inline CSS:

The second function also checks for WooCommerce activity and page type.
It then adds CSS directly into the page, which is useful for quick changes without needing a separate file.
For example, it can style product borders and message backgrounds directly on the page.

These methods help you customize the look of your WooCommerce pages efficiently, ensuring styles are applied only where needed.

Code
<?php
/**
 * Add custom CSS to WooCommerce pages.
 *
 * This function enqueues custom CSS specifically for WooCommerce pages.
 * It checks if WooCommerce is active and then adds the CSS only to WooCommerce pages.
 *
 * @return void
 */
function wp_dudecom_enqueue_woocommerce_custom_css() {
    // Check if WooCommerce is active
    if ( class_exists( 'WooCommerce' ) ) {
        // Check if we are on a WooCommerce page
        if ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) {
            wp_enqueue_style( 'wp-dudecom-woocommerce-custom-css', get_stylesheet_directory_uri() . '/woocommerce-custom.css', array(), '1.0.0' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'wp_dudecom_enqueue_woocommerce_custom_css' );

/**
 * Add inline custom CSS for WooCommerce pages.
 *
 * This function adds inline CSS directly to WooCommerce pages.
 * It is useful for quick customizations without creating a separate CSS file.
 *
 * @return void
 */
function wp_dudecom_add_inline_woocommerce_css() {
    // Check if WooCommerce is active
    if ( class_exists( 'WooCommerce' ) ) {
        // Check if we are on a WooCommerce page
        if ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) {
            $custom_css = "
                /* Custom WooCommerce Styles */
                .woocommerce .products .product {
                    border: 1px solid #e0e0e0;
                    padding: 10px;
                    margin-bottom: 20px;
                }
                .woocommerce .woocommerce-message {
                    background-color: #f0f8ff;
                    border-color: #b0e0e6;
                }
            ";
            wp_add_inline_style( 'wp-dudecom-woocommerce-custom-css', $custom_css );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'wp_dudecom_add_inline_woocommerce_css' );
?>

Instructions

File Location: Add the following code to your theme's functions.php file or a custom plugin file.

Prerequisites:

Ensure WooCommerce is installed and activated on your WordPress site.
Have access to your WordPress theme files or a custom plugin file.

Implementation Steps:

Open your WordPress admin panel and navigate to Appearance > Theme Editor or use an FTP client to access your theme files.
Locate and open the functions.php file of your active theme.
Copy and paste the provided code into the functions.php file.
Save the changes to the functions.php file.
Create a new CSS file named woocommerce-custom.css in your theme's directory. This file will contain your custom CSS rules.
Add your desired CSS styles to the woocommerce-custom.css file.
Ensure the file is saved and uploaded to the correct directory if using FTP.
Visit your WooCommerce pages (shop, cart, checkout, account) to see the custom styles applied.

For further assistance or to implement more advanced functionality, consider using the services of wp-dude.com.