Background colour lost on embedded product

This topic has 11 replies, 3 voices, and was last updated 6 years, 2 months ago by Artem Temos.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
September 9, 2018 at 10:10 am #76181

Kim
Participant

Hi!

What I want
Create a landing page with a product on it.

What I’ve done
a) I modified a product through the page builder, giving the product description a pretty, blue background colour.
b) I embedded that product in a page, using the WooCommerce Product Page Element.

The problem
On the new page the product description loses its pretty, blue background colour.

The question
How do I fix this?

September 9, 2018 at 10:47 am #76190

Elise Noromit
Member

Hello,

Try to add the background to the row or column containing the product or provide your site URL I will check and suggest.

Best Regards

September 10, 2018 at 6:38 am #76279

Kim
Participant

Hi Elise!

Adding the background to the row/column unfortunately only affects the top section of the product page (main picture and short description), but not the lower section (long description).

I thought I put the site url in the ‘Your web-site link’ section in the original post? Anyway, here it is again: http://www.vipfisk.no:)

September 10, 2018 at 8:19 am #76292

Elise Noromit
Member

Hello,

Please provide page URL with the problem we shall provide custom CSS. This is Woocomerce element in WP Bakery page builder that is why our theme options are not applied.

Best Regards

September 10, 2018 at 1:24 pm #76388

Kim
Participant

Hi,

As far as I can understand the problem is that the theme options are applied – even when they shouldn’t. In other words, the theme options (grey background) apply even when I’ve set another colour (blue) in the page builder.

There is a link to the URL with the problem in the original post, however here it is again for your convenience: https://vipfisk.no/kjop-isbiter/

September 10, 2018 at 2:03 pm #76413

Elise Noromit
Member

Hello,

Please provide your site admin access.

Best Regards

September 10, 2018 at 3:10 pm #76451

Kim
Participant

Hi,

I provided them in the original post under ‘Private Content’, but here they are again for your convenience:

September 10, 2018 at 3:46 pm #76455

Elise Noromit
Member

Hello,

Add the color to the background of the row http://prntscr.com/ksrrru

Best Regards

September 10, 2018 at 8:04 pm #76488

Kim
Participant

Hi Elise, and thanks for your suggestion. I already tried to add the colour to the background of the row. As explained above, that only works on the top section of the product page element (main picture and short description) – see Screenshot 1.

What I want is to keep the background colour of the lower section – see Screenshot 2.

Attachments:
You must be logged in to view attached files.

September 11, 2018 at 6:37 am #76543

Artem Temos
Keymaster

Hi,

Yes, it seems that WPBakery doesn’t recognize these background colors for rows when you display product as a part of some separate page. Why do you need to do this? We suggest you just to keep the product as a separate page and it will work well.
Otherwise, you can add some extra CSS class to each row like my-background and use the following CSS code

.my-background { background: red; }

Regards

September 13, 2018 at 3:01 pm #76985

Kim
Participant

Hi! The reason I want to do this is to create a so called ‘landing page’ for this particular product. Thanks for the CSS trick, it worked:)

September 13, 2018 at 5:16 pm #77008

Artem Temos
Keymaster

Great, you are welcome.
Author

Posts