Unreadable text colors

  • Resolved mennovink

    (@mennovink)


    2 years, 1 month ago

    Is there a way to make woo-commerce automatically change text colors depending on the color of the background?

    In my theme i’m use a light (yellowish) primary color. Sometimes in my shop there are buttons filled with that color where the text color is black, but other times the text color is white, which is unreadable.
    An example of this is the “Description” tab on the product page. It uses yellow background with white text, while on that same page the “Add to cart” button uses a yellow background with black text.

    There are quite a few other occurrences of white on yellow in the cart/checkout procedure as well as in the My Account/Downlaods & Payment methods pages, so i’m asking for a general solution and not just for the “Description” tab.

    I have tried updating theme colors but these pages dont seem to respond to that.

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

  • Pretty sure Woo doesn’t use white on yellow by default. That’s gotta be related to your theme no?

    I believe WooCommerce has some custom colors you can set in the Customizer, but it’s likely that you may need to write custom CSS rules. Some of Woo’s rules are way too specific in my opinion, so they can be difficult to override, but it’s possible.

    Thread Starter mennovink

    (@mennovink)

    Hi Helga, thanks for your answer.

    I think WooCommerce is using my theme colors, but not always. The yellow color comes from my theme. Changing it doesn’t reliably update these pages though, probably due to some caching.

    Woo using the primary yellow color is good though, just the way it’s deciding whether or not to use black or white text is wrong sometimes. I could not find any colors in the customizer for WooCommerce unfortunately.

    I will dive into custom css rules, but shouldn’t Woo produce readable text by default no matter which primary theme color is used?

    Thread Starter mennovink

    (@mennovink)

    For future travelers, this is the css i needed, really messy but gets the job done:

    .woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce div.product .woocommerce-tabs ul.tabs li:hover, .woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
    color: var(--wp--custom--core-button--color);
    }
    .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
    color: var(--wp--custom--core-button--color);
    }

.restore-item{
    color: black;
    text-decoration-line: underline;
    }
    .showcoupon{
    color: black;
    text-decoration-line: underline;
    }
    .woocommerce-button.wp-element-button.button.view:hover{
    color: white;
    }
    .entry-content a:not(.wp-block-button__link):not(.arc-icon-wrapper):hover{
    color: white;
    }

.checkout-button.button.alt.wc-forward.wp-element-button:hover{
    color:white
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
    color: white;
    }
    .select2-results__option[data-selected="true"]{
    color: black;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected]{
    color: grey;
    }

    Hi @mennovink

    Thanks for reaching out!

    I’m glad you were able to find a solution to your inquiry here and thanks for sharing it with the community too! ??

    I will be marking this thread as resolved. Should you have further inquiries, kindly create a new topic here.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Unreadable text colors’ is closed to new replies.