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

[mtgame21]

Here is a pic of one product on the SHOP page. I’m interested in changing the “white” area to an image background and/or a different color.

Also, questions on the “eyeball” link in the pic.
Is the eyeball KLEO theme specific, and when we click on the eyeball, is that called the “product page”? Is there a way to hide or disable the eyeball link in the picture. Im asking because Im trying to debug this problem: in the pic it shows “offered by: testuser1” and then you click the eyeball and it pulls up the new window and it says “offered by: mysitename”. FYI im using in WC Vendors multi-vendor plugin with woocommerce, which so far works pretty well with KLEO.

[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

[mtgame21]

I temporary opened it up so you can go to this http://mercquest.com/vendors/nick-test-user1-store/
You should not need a login to see this page now.

[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

[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

[Author]

Posts