Docs

[jessica]

Hi! How can I add a background image behind the product description on the woocommerce single product page? It should look like this:
Where the image is actually a pattern tiling in the x direction only.

[jessica]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.single-product .woocommerce-tabs {
	background-image: url('IMAGE PATTERN URL HERE');
	background-repeat-y: no-repeat; 
}

.single-product .x-tab-content .x-tab-pane {
	background-color: transparent;
}

Replace the IMAGE PATTERN URL HERE with your actual image pattern URL.

Hope it helps, Cheers!

[jessica]

That restrained the background and made it look like this rather than patterning it across the full width.

[Friech]

Hi There,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some mock up design), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[jessica]

Do you see the attachment on my original post. I simply want to add that background image. When I use your code, it adds the image, but there’s padding on the left and right (it’s not full page).

[Thai]

Hi There,

Could you please add the background image to your product pages again?

Thanks.

[Joao]

Hi Jessica,

Please add the following code to Appereance > Customizer > Custom > CSS and add the correctly path of the URL.

.single_product_balms_title {
    font-size: 40px;
}

.woocommerce div.product .woocommerce-tabs p:last-child {
    font-size: 20px;
    line-height: 1.5;
}

.x-tab-content>.active {
    margin-top: 70px;
    background-image: url('IMAGE PATTERN URL HERE');
    background-repeat-y: no-repeat; 
}

Hope it helps

Joao

[jessica]

This doesn’t product the same results because the image is not full width. Please see attached photo and compare it to the original design.

[Nabeel A]

Hi again,

Can you please upload the image again so we can take a look? It’s not uploaded.

Thanks!

[Author]

Posts