Docs

[Craig Corfield]

Hi guys i would like to have a background image on my shop page but the only way i can do it is by changing the background image in the customiser. I would like to have it only on the shop page. I have tried adding it in the edit section of the shop page but that does not seem to work. Using integrity theme with woocommerce plugin.

[Craig Corfield]

This reply has been marked as private.

[Rupok]

Hi there,

You can try adding with custom CSS :

.archive.woocommerce .site {
  background-image: url("//path/to/image.png");
  background-repeat: no-repeat;
  background-size: cover;
}

Hope this helps.

[Rahul]

Hey There,

Thanks for writing in!

You can set a background image on shop page by adding following CSS :

/* For shop page */
.woocommerce.post-type-archive-product {
background: url(your image link here) no-repeat;
background-size: cover;
background-color: read;
background-attachment: fixed;
}

Hope this makes sense!

[Craig Corfield]

Awesome worked thank you, could i do the same for each of the product pages?

[Rahul]

Hey There,

Thanks for writing back!

Please add at Appereance > Customizer > Custom > CSS according to your need :

/* For shop page */
.woocommerce.post-type-archive-product {
background: url(your image link here) no-repeat;
background-size: cover;
background-color: read;
background-attachment: fixed;
}
/* For individual product page */
.woocommerce.single-product {
background: url(your image link here) no-repeat;
background-size: cover;
background-color: read;
background-attachment: fixed;
}
/* For specific product page */
.woocommerce.single-product.postid-70 {
background: url(your image link here) no-repeat;
background-size: cover;
background-color: read;
background-attachment: fixed;
}

Hope this makes sense!

[Craig Corfield]

Hi Unfortunately didn’t work. Tried all the variations. It will be for all the products so tried the below:
/* For individual product page */
.woocommerce.single-product {
background: url(your image link here) no-repeat;
background-size: cover;
background-color: read;
background-attachment: fixed;
}

This didnt work for some reason?

[Craig Corfield]

This reply has been marked as private.

[Paul R]

Hi,

Kindly note that you need to change your image link here with the url of your background image.

Please try this code.

/* For individual product page */
.woocommerce.single-product {
    background: url(http://galaxysc.co.za/wp-content/uploads/2016/08/BSN-NO-XPLODE-50-Servings.png) top center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Hope that helps.

[Craig Corfield]

This reply has been marked as private.

[Christian]

You have a syntax error (..woocommerce.single-product). Please delete the whole code and copy the code from the previous reply.

Thanks.

[Author]

Posts