CODEWITHSUNDEEP
csswordpresswoocommercethemeswordpress-theming
Aivaras P
Aivaras P

Reputation: 166

Woocommerce is not using child themes CSS

I'm setting up a sydney child theme.

Child themes file tree:

My child themes functions.php looks like this:

<?php
add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
function sydney_child_enqueue() {    
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

/* ADD YOUR CUSTOM FUNCTIONS BELOW */

/* Remove woocommerce breadcrums */
add_action( 'init', 'jk_remove_wc_breadcrumbs' );
function jk_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

/* Remove woocommerce list order box */
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

/* Remove wocommerce page title */
add_filter( 'woocommerce_show_page_title' , 'woo_hide_page_title' );
function woo_hide_page_title() {
return false;
}
/* Remove woocommerce kazko isemimas */
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

/* Remove woocommerce add to cart button */
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

I'm modyfying the non-woocommerce page styles like this (The theme has a customizer installed so it's a bit hard to change some things):

.page #masthead {
background-color: red !important;
padding: 15px;
}

The problem that i encountered is this: woocommerce pages (for example single product page) are not loading/using the modified child theme's css.

Maybe i'm doing something wrong while setting up the child theme? And Is there a way to overide the theme's customizer css?

Upvotes: 2

Views: 751

Answers (1)

Balint
Balint

Reputation: 36

If that's your actual code than put the ; before the !important so like this:

.page #masthead {
    background-color: red; !important
    padding: 15px;
}

If not: Your woocommerce pages not reacting to the custom CSS at all or just certain parts of it?

It can be that the woocommerce style sheet overriding your child-theme's sheet by being more targeted ex.:

div.product {
   background-color: red;
}

Maybe get's overwritten by 

.woocommerce div.product {
   background-color: green;
}

Happened to me before

Upvotes: 1

Related Questions