Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 19, 2017 at 7:32 pm #736036
    Itai

    Hello,

    I can’t for the life of me figure out how to control the appearance of the titles below the images on the woocommerce shop and ‘related products’ (essentially links with hover states).

    What is the CSS class of these links?

    Thanks so much!

    January 19, 2017 at 7:45 pm #736045
    Yigit

    Hey Itai,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .products .product h3:hover {
    color: orange;
}
.products .product h3 {
    font-size: 20px;
}

    If that does not help, please post a screenshot showing the changes you would like to make and a link to your page.

    Best regards,
    Yigit

    January 19, 2017 at 9:13 pm #736097
    Itai

    Well I have some success with this :

    .inner_product_header_cell h3 {
    text-decoration: none!important;
}
.inner_product_header_cell h3:hover {
    color: yellow!important;
    text-decoration: none!important;
}

    But I still get an underline as a non-hovered state. However, when I hover over the thumbnail the underline disappears but the yellow text doesn’t appear like I would if I hover over the h3 text. It’s as if an earlier class supersedes my instructions.

    January 19, 2017 at 11:57 pm #736134
    Itai

    I’ve tried with the .products .product class & I get the same result

    So this is what I get:

    In a normal state, I get an underlined link when I didn’t want one:

    When I hover over the link text, it looks as it should: yellow and no underline

    But when I hover over the image or price I get something else:
    http://heaven11audio.com/KDJ/wp-content/uploads/2017/01/hover-image.png

    What class should I use to get a consistent feel and no underline?

    Many thanks,

    Itai

    January 23, 2017 at 8:35 pm #737415
    Itai

    any update on my question?

    Cheers,

    i

    January 26, 2017 at 4:42 am #738694
    Ismael

    Hi,

    We are very sorry for the late response. Please add this code in the Quick CSS field to remove the underline.

    div .products .product a, div .products .product a:hover {
    text-decoration: none !important;
}

    If this is not working, please provide a link to the actual page with the issue.

    Best regards,
    Ismael

    January 26, 2017 at 4:48 pm #739027
    Itai

    Hello,

    Thanks for answering. I got the text-decoration part, but more importantly, I wanted for consistency the text link to change to yellow when hovering above the image OR the text (the text that says ‘Billie amp anodized silver pre-order’).

    The shop page in question

    Cheers,

    i

    January 27, 2017 at 10:49 am #739305
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .woocommerce-LoopProduct-link:hover h3 {
	color:#ffee38!important;
}

    Best regards,
    Vinay

    January 27, 2017 at 11:22 pm #739633
    Itai

    Yes! That’s it!
    Thanks Vinay, you can close the thread now.

    January 28, 2017 at 9:45 pm #739796
    Nikko

    Hi,

    Glad we could help :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Woocommerce CSS control of A links’ is closed to new replies.