css – how customise Woocommerce style of custom theme


i’m new to Woocommerce theme developing and i know some basic of Woocommerce structure , for example i can call the latest 4 item of WC or popular items and etc. but the thing made me confusing is how to declare my own CSS .
what’s the best procedure to wrote CSS file that compatible with Woocommerce .
i try this add_filter( 'woocommerce_enqueue_styles', '__return_false'); when i apply this, Woocommerce CSS will be dis-activate but all CSS class still remain .

this is my main question , should i work with that classes ?
or there is a better way ?

i will very glad if someone help me please. all the tutorial i watched only said include CSS file which worte before and don’t explain about that.

in progress 0
hossein 1 year 2021-08-02T02:00:20-05:00 0 Answer 0 views 0

Answer ( 1 )


    You can add your own css based on the classes created by WooCommerce. If you are working in a (child)theme, you can add a stylesheet by adding this code in functions.php:

     * Enqueue your own stylesheet
    function custom_wp_enqueue_woocommerce_style(){
        wp_register_style( 'mytheme-woocommerce', get_template_directory_uri() . '/css/woocommerce.css' );
        if ( class_exists( 'woocommerce' ) ) {
            wp_enqueue_style( 'mytheme-woocommerce' );
    add_action( 'wp_enqueue_scripts', 'custom_wp_enqueue_woocommerce_style' );

    Create a ‘woocommerce.css’ file in the folder /css/ in your (child)theme and write your css in that file.

Leave an answer