Font colors in shopping cart and checkout (Woocommerce with Bookshop)

  • Resolved ullizee

    (@ullizee)


    3 years, 8 months ago

    Hi

    I have upgraded my website with the webshop plugin of Woocommerce. In order to do so I have changed the theme to Bookshop. I am really pleased with the result, but have one final issue I can’t resolve.

    In the web and tablet interface some font colors in the cart and checkout screens are such that the text is hardly readable against the background. In the mobile interface the font seems perfect.

    Find pictures of the problem at https://guntherverheyen.com/wp-content/uploads/2020/08/Font-colors-in-shopping-cart-and-checkout-Woocommerce-with-Bookshop.png

    I have searched and searched and searched all options in Design > Customize and in Store for a way to change the font color, but can’t find it.

    Looking at the forums it looks like it is possible to change it with some customer CSS. Is that the way to go? And, if so, who knows what command line to insert?

    Thanks a ton for helping me finalise my website!

    Warm regards
    Gunther

    • This topic was modified 3 years, 8 months ago by ullizee.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Nancy

    (@nancythanki)

    3 years, 8 months ago

    Hi Gunther,

    Thanks for reaching out. You are correct, this is definitely customizable through a bit of CSS. Taking a look at your site, I see that something like this should do the trick:

    
table th, #payment .payment_methods li label {
    color: #111111;
}

    You’ll edit the #111111 to be the color you’d rather use.

    Please click this link to see a screenshot of this in action: https://d.pr/i/ilX9ae

    I found the class of the theme by opening up the Developer tools in Chrome (you can use Firebug in Firefox if you prefer). You can add CSS to your theme stylesheet, or to the custom CSS editor available under Appearance > Edit CSS in your dashboard.

    If you’re not already familiar, I recommend looking into the basics of CSS. You can have a look here for starters:

    http://en.support.wordpress.com/custom-design/css-basics/

    But you’d open up a world of possibilities if you learned how to use Firebug or Chrome’s Developer Tools.

    You can find other useful links here:

    http://codex.wordpress.org/Know_Your_Sources#CSS

    You may also want to check out others’ blogs, they often cover topics like this.

    I also noticed that you’re currently hosted on WordPress.com. Please feel free to reach out to their support for additional resources and assistance as well.

    • This reply was modified 3 years, 8 months ago by Nancy.
    Thread Starter ullizee

    (@ullizee)

    3 years, 8 months ago

    Hi Nancy

    Thanks a ton. That largely did it. Thanks also for including the resources.

    Can I share my last concerns then?
    * It hasn’t changed the font color in the preview of the basket at my homepage.
    * It seems the color of the rounded check-boxes to select a payment option were made dark as well (rather than white or a lighter color).

    See also the picture at https://guntherverheyen.com/wp-content/uploads/2020/08/Font-and-check-box-colors.png

    Warm regards
    Gunther

    Nancy

    (@nancythanki)

    3 years, 8 months ago

    Happy to hear it!

    You’ll want to check the CSS via the Developer tools for both of those features as well and edit accordingly.

    For more assistance, I recommend reaching out to the WordPress.com support where your site is hosted.

    Nancy

    (@nancythanki)

    3 years, 8 months ago

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Font colors in shopping cart and checkout (Woocommerce with Bookshop)’ is closed to new replies.