Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 25, 2020 at 7:50 pm #1263066
    SarahKunterbunt

    Hello,

    I am using Enfold theme with Woocommerce, see here https://miriamfrank.com/shop/ But I can’t find the settings where I can make the font more visible. The “Add to basket” (Here in German “in den Warenkorb”) under the product picture is in a pretty light grey with grey background. You can’t almost see it. Can you help me to find the right font colour which I need to change

    November 26, 2020 at 2:01 pm #1263259
    cherrmann

    Hi,

    please try adding the following CSS

    .avia_cart_buttons {
    color: black !important;
    opacity: 1 !important;
    background-color: white !important;
}

    You may not need the !important and of course you can change the colors to anything else.

    November 26, 2020 at 11:40 pm #1263403
    Jordan Shannon

    Hi,

    Thanks for sharing that. Hopefully it works for them.

    Best regards,
    Jordan Shannon

    May 4, 2021 at 4:55 am #1298136
    Jason

    Hello. I used this same above quick CSS on a page and worked for what I was trying to do. Only issue is how do I control the hover over color or turn this off on these? See the attached page of a dev site:
    https://devapp.galaxypress.com/battlefield-earth-post-apocalyptic-book/
    I want the white bars to be black like it is on the demo site, but I had to change the main background color to white in the overall site, which effected these overlays.
    One more complication on this is that I have the shop with a white background, so can I control these pages where I use the product grid separate?

    Here is the shop sample in white:
    https://devapp.galaxypress.com/shop/#top

    Based on this maybe just turning this function off is safer?
    Thanks, Jason

    • This reply was modified 3 years, 6 months ago by Jason.
    May 5, 2021 at 2:05 pm #1298563
    Yigit

    Hi Jason,

    Thanks for contacting us!

    I see that you have added following code to Quick CSS

    .avia_cart_buttons {
    background-color: #e81b3a !important;
}

    You can add following code to Quick CSS to change background color on hover

    .avia_cart_buttons:hover {
    background-color: orange !important;
}

    If that does not help, could you please post screenshots showing the changes you would like to make? You can upload your screenshots on imgur.com and post the links here :)

    Best regards,
    Yigit

    May 5, 2021 at 11:44 pm #1298699
    Jason

    Thank you very much for the code.

    Okay, so there look to be 3 colors you can modify as I will describe. Here is the link I am looking at:
    https://devapp.galaxypress.com/battlefield-earth-post-apocalyptic-book/

    1. Not licking on any product there is a white clear over the “Add to Cart” button.
    2. If you hover over the product image or price, but not the actual button, the clear overlay turns off and it is red.
    3. Then if you hover over the “Add to Cart” it now turns orange with the new code.

    What I am wondering is about the #1, where it has a white overlay. Can I turn that off?
    The issue is I changed the basic background color to white on the template and this is now effecting this.
    I also have the actual shop page, which is here:
    https://devapp.galaxypress.com/shop/

    This shop page is on white as you will see. Can I control the shop page separately on these quick CSS?
    Thanks, Jason

    May 6, 2021 at 10:44 am #1298749
    Yigit

    Hi Jason,

    Thanks for the clear explanation!

    1- You can add following code to Quick CSS to turn it off

    .avia_cart_buttons {
    opacity: 1;
}

    2- Using custom CSS, that would be possible however I think it would be simpler if you set background color to black globally if that is how you would like to display your shop page and then use Alternate colors on other pages. That way you would not need to use custom CSS. You could change background color to black using following CSS however that would make other elements on the page not so visible so more CSS would be required

    .archive.avia-woocommerce-30 .main_color {
    background-color: black;
}

    Also, have you considered using Advanced Layout Builder to create your shop page? :)

    Best regards,
    Yigit

    May 7, 2021 at 2:07 am #1298869
    Jason

    Hello. This is almost perfect. If you look at the new development site it works both on black and white background now.

    White:
    https://devapp.galaxypress.com/shop/

    Black:
    https://devapp.galaxypress.com/battlefield-earth-post-apocalyptic-book/

    The only thing I am wondering is on the hover over color I am applying the following:
    .avia_cart_buttons:hover {
    background-color: #e81b3a !important;
    }
    If I wanted this above to have more of a transparent look is there an option for this?

    Best, Jason

    May 7, 2021 at 12:36 pm #1298935
    Yigit

    Hi Jason,

    You can use the code as following

    .avia_cart_buttons:hover {
background-color: rgba(232,27,58,0.8) !important;
}

    232,27,58 is the RGB value of the color and 0.8 is opacity level that you can set between 0 and 1 :)

    Best regards,
    Yigit

    May 9, 2021 at 11:56 pm #1299193
    Jason

    Thank you so much! That worked perfectly and did exactly what I needed. Best, Jason

    May 10, 2021 at 5:23 am #1299226
    Nikko

    Hi Jason,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Change Colour of text in Woocommerce product items’ is closed to new replies.