Category link and hover colors in Shop

Support
#1

I’m using a dark theme color with white text on a dark background. However, when I am on a shop page the background is white and the category links cannot be seen.

Is there some code I can use for font and hover colors for the category links in the shop?
Alternatively I can change the colors globally but then I need a style or preset to apply to other texts within the site.
As a temporary work around, I have changed the default link colour to grey as I found all sell prices in the shop were also displaying in white and not visible.

www.ptwtools.com

#2

Hi @artisticdog,

To change the color of links in your shop pages, you can add the code below Theme Options > CSS

.woocommerce a { color:blue !important; }
.woocommerce a:hover { color:red !important; }

Change blue and red with the color that you like.

Thanks

#3

Thanks, that works great on the links in the shop.
However, the price font color in the shop is still white. Is there another code I can add to adjust this?
Also if I wanted this applied to a specific page id, how would I modify the code you gave me to use?

Thanks

#4

Hi @artisticdog,

The price block is using a different selector so kindly add:

.woocommerce .price > .amount, 
.woocommerce .price > ins > .amount, 
.woocommerce li.product .entry-header h3 a:hover, 
.woocommerce .star-rating:before, 
.woocommerce .star-rating span:before, 
.woocommerce .price > del {
    color: blue;
}

Would you mind providing more information about this query? Do you mean you want to change the link colors in a specific page regardless if it is a woocommerce page or not?

Thank you.

#5

Yes, a specific page id outside of woocommerce see this page: https://ptwtools.com/air-fittings/ The more info text cannot be seen. I can overide the colour on the page by choosing text color but this removes the hover function.

I now have two new issues that seem to have been introduced with the changes https://ptwtools.com/shop/

  1. The sales badges in the corner of the main product images are white and not visible.

  2. The text colour of the woocommerce buttons “Select Options”, “Add to Cart” & “View products” etc. now all have the new colours applied but I need them to remain white text because the buttons are dark in color.

Thanks

#6

Hi @artisticdog,

To change the links color on per page basis, you can add the code below in Cornerstone > CSS

body a {
   color:red;
}

body a:hover {
   color:blue;
}

By adding it in Cornerstone > CSS. The code will only take effect on that specific page.

The sales badges in the corner of the main product images are white and not visible.

Add this in Theme Options > CSS

.woocommerce .onsale, .widget_price_filter .ui-slider .ui-slider-range, .woocommerce #comments li.comment.bypostauthor article.comment:before {
    background-color: red;
}
``

> The text colour of the woocommerce buttons "Select Options", "Add to Cart" & "View products" etc. now all have the new colours applied but I need them to remain white text because the buttons are dark in color.

Add this in `Theme Options > CSS`

```css
.woocommerce a.add_to_cart_button {
    color:#fff;
}

For reference kindly refer to the links below

Thanks

#7

Thanks again and thank you for the inspect element video links. They are very good.

However I am still having problem with the text color not displaying as white. See attached images.
In the images you will see that the buttons when in the shop and related products are still red & blue. Once a product is selected the add to cart button is white. I have played around with codes all day myself but cannot get these to change to white. Thanks again for your help. I hope this is my last post on this topic. :slight_smile:

#8

Hi @artisticdog,

Please also add this custom CSS:

.woocommerce li.product .entry-header .button {
    color: #fff !important;
}
.woocommerce li.product .entry-header .button:hover {
    color: #f00 !important;
}

Hope it helps :slight_smile:

#9

All seems to be now working well.
Thank you and all that helped. :pray:t3:

#10

You’re always welcome @artisticdog!
Glad that everything is now working.

Cheers!

#11

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