Woocommerce is taking the custom CSS I added to my homepage in cornerstone (not global css) and applying it to the shop page

Support
#1

Hello:

See title.

I added the below code in the custom css section for my homepage only and not in the global css area. It is changing the woocommerce shop page. I have even removed that code from the homepage custom css and it is still showing up on the woocommerce shop page. See highlighted in yellow in pic where the woocommerce shop page is (I think?) taking a style id from the homepage. How do I stop this?

  @media (max-width:  481px) {
 .woocommerce li.product, .woocommerce-page li.product {
  margin-left:22%!important;
  }
}

I am running WordPress v 4.9.1, Woocommerce v 3.2.6, and X v 5.2.5 with a child theme that I recently installed.

#2

Hi There,

Thank you for writing in, yes that highlighted in yellow line is your shop page specific CSS (not homepage CSS).

But the CSS blocks above that line though are added to Theme Options > CSS (which is Global CSS), so yup it will affect your shop page.

Please navigate to Theme Options > CSS and make sure you moved that block to homepage CSS.

Hope it helps,
Cheers!

#3

How do I edit the shop page specific CSS? I have removed the CSS block from the global CSS and the homepage CSS that is causing the issue already and it is still showing up in that yellow highlighted area. That is the only instance I can find of that css block anywhere on my site.

#4

See the pictures here. That CSS block is still showing up when I inspect the page. And you can see it is in the yellow highlighted area which is the same as in the previous picture. I have tried this on multiple browsers, cleared caches and all of that.

Summary

#5

It looks like the custom CSS I added to my homepage in cornerstone has somehow been added to my header (SEE PIC).

THE CODE IN THE PICTURE BELOW HAS NOT BEEN ENTERED INTO MY GLOBAL CSS EVER.

How do I fix this?

#6

hI there,

Please disable all cache plugins and flush cache in your site. It may causing the issue.
After that please remove css from the customizer and past it in shop specific page css.
Edit your Shop page in cornerstone and you will find the css menu in the left side of the page.

If that doesn’t work please send us your login details and website URL in a secure note to help you on this.

Thanks

#7

Did you even read what I wrote? I dont have a caching plugin installed. The CSS block causing the issue is not written in the customizer or any specific page anymore and it is still causing an issue because "style id=“cornerstone-custom-page-css” is in the header of the page. How do I remove "style id=“cornerstone-custom-page-css” from loading in the header of the shop page?

#8

Hi There,

Would you mind providing us login credentials in a secure note so we can take a closer look?

Don’t worry about id="cornerstone-custom-page-css" being on the <head> section, because that has always been there.

To clarify, the issue is you don’t want that custom CSS block below to be applied to the Shop page, right?

 @media (max-width:  481px) {
 .woocommerce li.product, .woocommerce-page li.product {
  margin-left:22%!important;
  }
}

On that note, have you check your Shop page CSS? (you know the page that you set as Shop). Because when I check, I have seen that CSS block above in there.

Thanks,

#9

I have no shop page css. All css changes to the shop page were made in global css, which this css block does not exist in. My whole point is that the css loading under id=“cornerstone-custom-page-css” in the head section was for my homepage and not my shop page.That css loading under that style id was entered into my hompeage specific custom css only and not global css. Therefore it should not be loading on my shop page, correct?

#10

Hi there,

It’s really weird that it picks up the CSS if the home page and I can’t reproduce it anywhere. But to disable that on your shop page, please add this code to your child theme’s functions.php

add_filter('_cornerstone_custom_css', 'no_cs_css_shop');

function no_cs_css_shop ( $css ) {
return x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ? false : $css;
}

Hope this helps.

#11

Thanks for taking a look. Two questions: 1. Will that disable the changes I made to the shop pages in the theme options global css?
2. Is it possible there is some setting that is making wordpress or X think that the woocommerce shop is my homepage?

#12

Hello There,

Thanks for updating in!

1.) No. The code given by Rad will make sure that Cornerstone’s custom page css will not be loaded in any of the WooCommerce pages. Anything you added in the theme options global css will still take effect.

2.) Yes it’s possible. Cornerstone thinks that your shop page is the same as the homepage that is why it displays the custom css of the home page. I am also puzzled because normally the homepage will be label as the ‘home’. In your site, the homepage and the shop page were labeled as ‘home’. You can check that out here: https://prnt.sc/hqot1u, https://prnt.sc/hqotdl

This might be caused by a 3rd party plugin. You may try to test for a plugin conflict.

Hope this helps.

#13

Thanks for the reply. If it is not caused by a plugin conflict do you have any idea as to why they might both be labeled as home?

#14

Hi There,

It can also be a custom function that you added to your child theme, or a JavaScript you added. But most commonly is a plugin conflict.

Thanks,

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.