Hi there, I am new to WooCommerce and am wanting to edit the CSS in the woocommerce.css and woocommerce.less files but cannot find the file anywhere. am looking via my dashboard in the WooCommerce editor and tons of other files are listed except this one. Does anyone know where I should be looking? Or am I able to add custom css which will override it?

Dani AI

Generated

Quick summary and safe next steps (builds on question and ’s note).

Editing WooCommerce’s shipped CSS/LESS directly is fragile — updates will overwrite changes. Use a child theme or the Customizer so your overrides survive updates and load after WooCommerce’s files. A reliable pattern is to add an overrides stylesheet in your child theme and enqueue it with a slightly later priority so it wins without relying on !important everywhere.

Example functions.php snippet (child theme):

add_action( 'wp_enqueue_scripts', 'child_enqueue_woocommerce_overrides', 20 );
function child_enqueue_woocommerce_overrides() {
    wp_enqueue_style(
        'child-woocommerce-overrides',
        get_stylesheet_directory_uri() . '/woocommerce-overrides.css',
        array( 'woocommerce-general' ),
        filemtime( get_stylesheet_directory() . '/woocommerce-overrides.css' )
    );
}

If you want quicker edits without touching theme files, paste rules into Appearance → Customize → Additional CSS. Common gotchas: caching/minification plugins can serve old CSS (clear their caches), themes that bundle WooCommerce styles may override plugin rules, and selector specificity can make your rules appear ignored. Use browser DevTools to find the exact selector and stylesheet that’s winning, then increase specificity or add a minimal !important only if necessary.

Advanced: to attach small fixes directly after WooCommerce’s file, wp_add_inline_style targeting the WooCommerce handle can be useful. Always test on a staging site and keep a backup before changing files. was right — WooCommerce and CSS do tend to tangle; rely on the child-theme + enqueue pattern to keep things maintainable.

Recommended Answers

All 2 Replies

you would have to ftp into the site or goto the directory as follow: wp-content/plugins/woocommerce/assets/css/

You are better off creating a custom.css file and making the changes there.. then include the custom .css file within the header file.

Woocommerce and CSS issues go hand in hand. lol
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.