Change background colour and widget issue

currently im trying to change the background color but i couldnt see any changes to the background despite changing the colour through the layout and design. as shown below, ive tried using custom css but no luck. Im using Ethos for the website by the way

and regarding the widget, i actually am trying to remove the image thumbnail since non of the product/ item has an image so i add the following code (add_filter( ‘woocommerce_cart_item_thumbnail’, ‘__return_empty_string’ ):wink: it does remove the thumbnail but as you can see at the image below it doesnt show the product name

but for the pop up cart it successfully remove the image thumbnail and the product name weren’t affected as shown below


Hey Dirah,

Thanks for writing in. Your site is currently in maintenance mode. In order for us to inspect your site, please disable the maintenance mode or give us site access in a Secure Note.


1 Like

Hi @dirahh,

By default, Ethos blank page templates uses white backgrounds. Please add this CSS to override it

.page-template-template-blank-4-php .x-main, .page-template-template-blank-5-php .x-main, .page-template-template-blank-6-php .x-main, .page-template-template-blank-8-php .x-main {
    background-color: transparent;

The theme doesn’t use woocommerce_cart_item_thumbnail, perhaps you should remove the added code and just hide the image through CSS. As it appears the title is part of the thumbnail column in the widget.

.widget .thumbnails {
display: none;

Please check this as well


hi @Rad ,
The css for the background work like magic although the widget one doesnt work as how it should be i suppose. the thumbnail on the pop up cart widget are shown and the cart itself remain the same way. For now while figuring things out i decided to replace it completely with a different plugin that sort of align with my idea on how i want it to be.

altho currently there are other few problem i came across with when customizing the my account page which are shown below.

Is there a way that i could customize the browse product button to be the same as the save changes button above?

and also for the product page, is there a way to apply the customization from the other page to the product page itself? as you can see below there is different shade of colour on the background if compare to the header

Hi Dirah,

The buttons have the same styling, except for padding and text line, please add this CSS to achieve that as well

.woocommerce-account a.woocommerce-Button.button {
text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    padding: 0.579em 1.105em 0.842em;
text-decoration: none;

Then the background is the same on header and on that area, it’s just that there is a border line that create an illusion of multiple background colors. And those borders are added by your plugin with responsive CSS per breakpoint, I recommend contacting the plugin author for customisation related to it, especially if they are changeable through options.


1 Like

Hi @Rad,
That work like a charm thank you so much!
yeah will contacted with the plugin author. Thank you for the assist. really appreciate it! :smiley:

You’re welcome, Dirah. Glad we’re able to help.

1 Like

I kinda figure out on how to deal with the second problem that i came across with which is the inconsistent background color for my product page hopefully this will be helpful i suppose for those that come across same problem as me. I added the following code at the additional css instead.

.site {
background-color: #fffff3;

Glad it’s working okay now and thanks for sharing!

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.