Woocommerce text / background styling

[compania123]

Hi guys,
we have just a few issues - test.palimeovocie.sk - so I want to kindly ask you for your help. As you can see our product text hover is the same color as background. How can we change hover color?

Also filter and sorting are not visible so how can we change text color?

Last thing is that we want to change orange background color in cart and checkout page.

Thank you
Michael

[prakash_s]

Hello @compania123,

Thanks for writing to us.

To change these colors. It would require custom CSS code. Please add these custom CSS code under X/Pro—>Theme Option —>CSS

For product text color on hover

.woocommerce li.product .entry-header h3 a:hover {
    color: #000000;
}

For filter and Product count

.woocommerce-ordering select {
    color: #ffffff;
}

.woocommerce-result-count {
    color: #ffffff;
}

For the Cart and Checkout page background-color

.woocommerce-cart.woocommerce-page .entry-wrap {
    background: #404040 !important;
}

.woocommerce-checkout.woocommerce-page .entry-wrap {
    background: #404040 !important;
}

Please feel free to change the color code as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[compania123]

Perfect many thanks.

It works perfectly but unfortunately cart / checkout texts are invisible while we change background to white color so please how can we edit text color on these sites.

And the last thing how can we change we change background in product detail which is still orange (I forgot to ask previous time :-))

Thanks
Michael

[tristup]

Hi Michael,

I have checked the Cart page and found the custom CSS code is implemented to make the Text color white, I would suggest you remove the specific custom CSS code to get rid of this issue.

Please remember that we don’t offer any support to the issue related to the custom code.

I have also checked the Product details page but didn’t find the issue mentioned regarding the background color orange, please let us know if you are seeing the same after clearing all types of cache.

Thanks

[compania123]

Hi there,
thanks for your reply. I was looking for css code in global css but I was unable to find it.

Attached Im sending image of product orange background.

Thanks
Michael

[tristup]

Hi Michael,

The following code for the Product Details page has been already provided on your other thread.

.woocommerce-page .entry-wrap,
.woocommerce-page li.product
{
    background:transparent !important;
    border:none !important;
    box-shadow: none !important;
}

Please find the following thread here:

Woocommerce background color

Hi there, we have three issues with woocommerce. we want to change color of products background (also single product background, cart background etc) but we want to keep color of upper and bottom parts with red cross [Bez názvu] we want to change the size of the product font and wrap it. So each product will have the same size of text field / lines. how can we change button background, button hover but only for woocommerce. Not for the whole site. Thanks a lot guys Michael

Hope it helps.
Thanks

[compania123]

@tristup

.woocommerce-page .entry-wrap,
.woocommerce-page li.product
{
    background:transparent !important;
    border:none !important;
    box-shadow: none !important;
}

Yes you are right but this will also change background color of this product list but I need to change it only after clicking on a product.

Thanks
Michael

[tristup]

Hi Michael,

To implement that code only on the Single Product page you need to modify it a little, please add the following modified code.

.single-product .entry-wrap
{
    background:transparent!important;
    border:none !important;
    box-shadow: none !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[compania123]

@tristup

.single-product .entry-wrap
{
    background:transparent!important;
    border:none !important;
    box-shadow: none !important;
}

Perfect, many thanks.

Michael

[prakash_s]

You are most welcome @compania123

[compania123]

Sorry for that but now I’ve just realized that after color change I have to also change colors of text “You may also like…” and product names in that section (for now it is white text on white background). Please can you help?

Thanks
Michael

[tristup]

Hi Michael,

I would suggest you check all the solutions given by us and find if the issue is resolved. If that is not resolved, please add the following custom CSS code.

.single-product .up-sells h2
{
    color: #000000 !important;
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide custom codes that mean we can’t fix it if it conflicts with something on your site nor will we enhance it.

Thanks

[compania123]

@tristup

.single-product .up-sells h2
{
    color: #000000 !important;
}

Thank you!

[marc_a]

Hi Michael,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.