Not able to apply custom style to WooCommerce page

[yashitamittal11]

I am using WooCommerce and I have to do a very simple task. I am trying to change the colour of the breadcrumb on the Store page. But it is not changing.

CSS

body.woocommerce .site-inner div.breadcrumb span.breadcrumb-link-wrap a {
	text-decoration: none;
	color: black;
}

I have tried other variations of the styling but somehow I am not able to change the style.

I am able to change the style in the inspect window, but not through the CSS file.

I am using Genesis Connect for WooCommerce, and they are suggesting to disable the Woocommerce styles, define( 'WOOCOMMERCE_USE_CSS', false ); in functions.php. Create a folder named 'woocommerce' in your theme and make a style.css file. I have done this and added the above CSS in this style.css file also. I hope that Genesis Connect will automatically pickup this file. But this also doesn't have any effect on the styling.

Please suggest if there is some other step to change the CSS for WooCommerce pages

http://greeninvites.com/product-category/store/

[Erika]

Hi Yashitamittal!

Here is the code I have been able to use to accomplish this with my own themes:

.woocommerce .woocommerce-breadcrumb {
margin: 1em !important;
color: #854b38 !important;
text-align: center !important;
}

Feel free to add or take away what you don't need. Also, notice how each instruction includes an !important designation at the end. This helps my custom code override the code in the Woocommerce plugin.

[Victor Font]

The issue you're encountering has to do with the order in which the style sheets are loading. The last style sheet to load is the one that has control over the element. WooCommerce has multiple style sheets that load after the child theme style sheet. This has nothing to do with Genesis Connect by the way. The Genesis Connect Plugin doesn't load any style sheets.

To fix this, you can either change the load order of the style sheets, or use the WordPress Additional CSS area to customize the WooCommerce styles and add them you your page as inline styles. Inline styles take precedent over style sheets.

This will show you how to change the load order: https://victorfont.com/change-genesis-child-theme-style-sheet-load-order/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[yashitamittal11]

Hello,

1. I am able to change WooCommerce styles using wp_add_inline_style
Code that goes in functions.php-

function my_styles_method() {
        if (is_woocommerce()) {
            $custom_css = "
                    .woocommerce .site-inner div.breadcrumb span.breadcrumb-link-wrap a {
                        text-decoration: none;
                        color: pink;
                }
                .archive-title {
                    display: none;
                }";
            wp_add_inline_style( 'custom-stylesheet', $custom_css );
        }
}
add_action( 'wp_enqueue_scripts', 'my_styles_method',11);

I would like to know, is this the correct method if I need to add more styles. So much styling is now in functions.php file.

2. The other problem you mentioned is the order in which the stylesheets are loaded. But when I look in the Developer - View Source, custom.css is loaded after the Woocommerce style files (woocommerce-layout.css, woocommerce-smallscreen.css and woocommerce.css). So I don't understand why the styles don't get applied?

[Victor Font]

Your site is down this morning with the following error:

Warning: mysqli_real_connect(): (HY000/2002): No such file or directory in /hermes/bosnaweb20a/b2498/ipg.greeninvitescom1/wp-includes/wp-db.php on line 1538 Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /hermes/bosnaweb20a/b2498/ipg.greeninvitescom1/wp-includes/wp-db.php on line 1568 Warning: mysql_connect(): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) in /hermes/bosnaweb20a/b2498/ipg.greeninvitescom1/wp-includes/wp-db.php on line 1568

Error establishing a database connection

This either means that the username and password information in your wp-config.php file is incorrect or we can’t contact the database server at localhost. This could mean your host’s database server is down.

Are you sure you have the correct username and password?
Are you sure that you have typed the correct hostname?
Are you sure that the database server is running?

If you’re unsure what these terms mean you should probably contact your host. If you still need help you can always visit the WordPress Support Forums.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[yashitamittal11]

Hello,

I have migrated my website and it now exists on mgtools.in.
I want to change woocommerce styles on Products page.

I am able to change WooCommerce styles using wp_add_inline_style
Code that goes in functions.php-

function my_styles_method() {
        if (is_woocommerce()) {
            $custom_css = "
                    .woocommerce .site-inner div.breadcrumb span.breadcrumb-link-wrap a {
                        text-decoration: none;
                        color: pink;
                }
                .archive-title {
                    display: none;
                }";
            wp_add_inline_style( 'custom-stylesheet', $custom_css );
        }
}
add_action( 'wp_enqueue_scripts', 'my_styles_method',11);

I would like to know, is this the correct method if I need to add more styles. So much styling is now in functions.php file.

2. The other problem you mentioned is the order in which the stylesheets are loaded. But when I look in the Developer - View Source, custom.css is loaded after the Woocommerce style files (woocommerce-layout.css, woocommerce-smallscreen.css and woocommerce.css). So I don't understand why the styles don't get applied?

[Sabine145]

Hello,
THIS plugin did the job for me: it is changing the load order of the style sheets.

Regards,
Sabine

[yashitamittal11]

Hi Sabine

Thanks for the link.

[Author]

Posts