Woocommerce Product Background Image


#1

Hi!

I’m wondering how to add a background image to the Products sections on Woocommerce. On the Shop page, the products are displayed at the bottom with a white background. I’d like to change the it so there is a background image behind the products. I think Woocommerce doesn’t provide this option. Is there any way to do this?
Cailley

http://stone.joshschuyler.com/wp-admin/


#2

Hello there,

Theme doesn’t have a feature to set a background image for specific pages. The solution might be with additional plugin. Try this one.

Regards,
Kharis


#3

You could also manually define the image background with CSS code. For example:

    body.post-type-archive-product { 
      background-image: url("http://yoursite.com/path/to/image.jpg"); 
      background-position: center center; 
      background-size: cover; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
    }

The body.post-type-archive-product selector is for shop index archive page.

To apply extra CSS code to your site, add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis


#4

Hi Kharis,

Thanks for your response! The Full Background Manager plugin looked cool but didn’t function once I installed it… maybe because I’m not on Syndey Pro? Not sure, but the CSS code helped. I can see the background image, but Woocommerce still seems to be over-riding a background image where the actual products are displayed (see white block background in the below screengrab). I’d rather have that white background be transparent so I can see the background image. Any advice?
Thanks!
Cailley


#5

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .page-wrap .content-wrapper {
      background-color: transparent;
    }

Regards,
Kharis


#6

That’s perfect, worked like a charm, thank you!
I also would be curious to know if there’s a way to change the font color on woocommerce’s product page? I’ve looked under Appearance -> Woocommerce but there doesn’t seem to be the option. I’m interested in changing the color of the name of the product and the price (e.g. “Gift Wrap” "$10).
Thanks!
Cailley