The color and font of “Add to Cart” and “View Cart” buttons are too light

Hi Suproa,

If your theme doesn’t provide settings for that, your best option is CSS. Please, post a link to your website so that I can provide you with the CSS code.

Cheers!
-Maria Antonietta

I think I’ve got them all covered, except for the View Cart button, which I can’t seem to find. Also the Read more text has enough contrast by being white on a blue background, therefore I haven’t added it here, but perhaps I didn’t look in the right place.

Here’s the code, add it to a custom CSS editor, if your theme hasn’t one, use a plugin like Simple Custom CSS here on the repository. This ensures your changes will survive a theme update.

Learn more link: Change #333 into your favorite color

.content-box .read-more {
  color: #333;
}

Add to Cart: change #333 into your favorite color

.button.add_to_cart_button.product_type_simple {
    color: #333 !important;
}

Copyright is now darker

p#copyright .credits {
    color: rgba(0, 0, 0, 0.8) !important;
}

This is the placeholder text inside the search box: change #333 into your favorite color:

::-webkit-input-placeholder {
 color: #333;
}
:-moz-placeholder { /* older Firefox*/
 color: #333;
}
::-moz-placeholder { /* Firefox 19+ */
 color: #333;
}
:-ms-input-placeholder {
 color: #333;
}

I hope this helps 🙂

Thank you for clarifying further. I think this is the missing code. There’s a lot of overriding specific elements, therefore I’m using !important on each rule: this ensures that the CSS rule sticks.

.coupon .button {
    color: #333 !important;
}

.actions .button {
    color: #333 !important;
}

.shipping-calculator-form p .button {
    color: #333 !important;
}

.comment-count > a {
    color: #333 !important;
}

Best wishes for your website 🙂

Hi Suproa,
Here’s the code, I hope I got them all, if I haven’t please let me know.

This is the View Cart button. I changed the background color, but if you’d rather change the color replace ‘background-color’ with ‘color’. This stands for the other snippets as well.

.woocommerce-message .wc-forward {
    background-color: #935386 !important;
}

This is for the Login and Register buttons:

.form-row .button {
    background-color: #935386 !important;
}

This is for the social buttons (I’ve also added a rounded background, I think it’s nicer. If you’d rather not have it rounded, delete the border-radius CSS rule):

.share-this .tipsytext {
    background-color: #a11fbc;
    border-radius: 50%;
}

I don’t work for 4Themes, I just help out on the forums, sometimes review themes submitted to the repository, and I have a couple of themes hosted here as well. I’m based in the UK.

Have a great day!
-Maria