Change background image for woocommerce product?

[mtgame21]

On the shop page, how can I change the background of the product box to an image? Currently it seems the box is transparent or white

Also, when I say box, I mean the whole area that contains the product image, add to cart button, name of product, price….etc.

if needed, I can add a pic. thanks

[Radu]

Hi,

Most probably via CSS, but to be accurate, please provide me a screenshot that pointing out where you need the BG

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

This reply has been set as private.

[Radu]

Please provide link to your category and an username and a pass to can view the page

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

This reply has been set as private.

[Radu]

Hi,

The eye can be hided with this css

COPY CODE

ul.products li .quick-view.hover-tip {
    display: none;
}

You can add a background image with this css

COPY CODE

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    background: url(http://www.exiv2.org/include/img_2158.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}

Add the css to wp-admin -> theme options -> general settings -> quick css

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mtgame21]

That worked on hiding eye. Just so I know, is the layout of the eye part of KLEO theme default or is that the default for woocommerce?

On the product background, it changed everything except the animated 2 add to car sections that I circled in the pic. I think there is actually 2 or 3 subsections here (button and offered by boxes). If you can point me to the css section, then I will change the background to make “add to cart” button look like a button with color or image.

Thanks.

[Radu]

The eye is part of kleo.

Here is the css for the div and for the add to cart that appears on hover

COPY CODE

li.product figcaption .shop-actions {
    background: red !important;
}

li.product figcaption .shop-actions a.button {
    background: yellow !important;
}

If you want to use a bg image you can copy and paste this

COPY CODE

   background: url(http://www.exiv2.org/include/img_2158.jpg);
    background-repeat: no-repeat;
    background-position: center top;

Instead the background color red or yellow

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts