WooCommerce Popup Plugin ignoring custom CSS

Resolved pyroballpcbs
(@pyroballpcbs)

5 years, 11 months ago
I’m trying to fix a theming issue with my site where the WooCommerce popup seems to be ignoring some custom CSS, specifically the background color.

I’ve added a custom CSS block targeted at what I think is supposed to be the correct section, but so far I’ve had no luck in changing the background:
```
.pp_woocommerce .pp_content_container {
	background: black ;
}
```
Do I need to edit the plugin’s css directly or is there a different class I should be targetting?

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

AJ a11n
(@amandasjackson)

5 years, 11 months ago

Hi @pyroballpcbs

the WooCommerce popup seems to be ignoring some custom CSS, specifically the background color.

Are you referring to a plugin that specifically adds a pop up on your site for WooCommerce? If so, I’d recommend posting this on the correct plugin’s support page.

AJ a11n
(@amandasjackson)

5 years, 11 months ago

Inspecting the page, it looks like it’s coming from here

div.pp_woocommerce .pp_content_container {
background: black;
}
Thread Starter pyroballpcbs
(@pyroballpcbs)

5 years, 11 months ago
That’s the custom CSS that’s being ignored.

The actual site CSS class looks like this:
```
div.pp_woocommerce .pp_content_container {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.25);
    padding: 20px 0;
}
```
^ this seems to be overriding the one I added to the custom CSS
- This reply was modified 5 years, 11 months ago by pyroballpcbs.
Thread Starter pyroballpcbs
(@pyroballpcbs)

5 years, 11 months ago
To answer your first question, it’s the Popup plugin developed by WooCommerce
- This reply was modified 5 years, 11 months ago by pyroballpcbs.
jaydjohno
(@jaydjohno)

5 years, 11 months ago
Thats because the plugin will always use the plugins css first and then your custom css.

The Div css looks comoletely fine and looks like it matches the other css tags.

On your custom css replace yours with this.
```
div.pp_woocommerce .pp_content_container {
    background: black !important;
}
```
The !important increases the css and overrides any other css.

Hope this helps
Thread Starter pyroballpcbs
(@pyroballpcbs)

5 years, 11 months ago

That fixed it! thank you!

jaydjohno
(@jaydjohno)

5 years, 11 months ago

Your very welcome 🙂