[mgalindoParticipant]

Is there a way to add custom CSS to a WooCommerce shop page? I realize it’s generated by WooCommerce and not editable in Cornerstone, but any other way to do with X? I’m trying to display .custom-attributes on the homepage and shop page but hide on all other pages.

Home – https://thevintageoutfitters.com
Shop – https://thevintageoutfitters.com/shop/

Login credentials to follow.

[mgalindoParticipant]

This reply has been marked as private.

[DarshanaModerator]

Hi there,

You can place your custom CSS rules into your Customizer, Custom > Global CSS area (Appearance -> Customize -> Custom > Global CSS).

Hope that helps.

[mgalindoParticipant]

Sorry, perhaps I should have been more clear.

I need to show the class on the home page and shop page, but hide on all others. Currently I can hide using global CSS (so it doesn’t display on individual product pages), then show on the homepage using the page specific CSS option available through Cornerstone.

So in the global CSS I’ve added the below code globally:

.custom-attributes{
  display: none;
}

And then this to the homepage:

.custom-attributes{
  display: inline !important;
}

This works perfectly to show the custom attributes on the homepage, but I can’t do the same to the shop page because I can’t edit that page specifically in Cornerstone. Is there any way to add CSS specific to the WooCommerce shop page?

[JadeModerator]

Hi there,

Please update this code:

.custom-attributes{
  display: inline !important;
}

to

.custom-attributes,
.woocommerce.archive .custom-attributes {
  display: inline !important;
}

Hope this helps.

[mgalindoParticipant]

Sorry Jade, thanks for trying, but that code causes the .custom-attributes class to show on all pages globally which is precisely what I’m trying to avoid.

I only want .custom-attributes to show on the homepage and shop page. It should be hidden everywhere else.

Any other suggestions?

[FriechModerator]

Hi There,

Please update this CSS code:

.custom-attributes{
  display: none;
}

To this:

body:not(.home) .custom-attributes {display: none;}
body.post-type-archive-product .custom-attributes {display: inline;}

The first line will hide the custom-attributes on all pages, but not on homepage.
The second line will show the custom-attributes on the shop page.

Hope this helps, Cheers!

[mgalindoParticipant]

Perfect! Thank you so much.

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts