[Resolved] Different backgrounds for individual woocommerce pages

[Jennifer]

Oh, sorry, the direct links!

original issue:

https://s30.postimg.org/5gzu7vkoh/original_form_issue.png

remaining issue:

https://s4.postimg.org/fgmqwbuot/form_issues.png
https://s7.postimg.org/bas6g9g3v/form_issues_2.png

[Leo]

Hmm I wonder why it was transparent in the first place. Make sure WooCommerce doesn’t have settings for this?

If not can you comment out the CSS you’ve added so far and just try this instead? Shouldn’t need to do them by blocks.

form.checkout.woocommerce-checkout {
    background-color: #ffffff !important;
}

[Jennifer]

So, I’m fairly certain WooCommerce doesn’t have it as a setting . . . but I’ll do my best to check (not sure I know where to look, exactly). I do believe that the CSS to set a custom background is causing it, though I do not know why:

.woocommerce-checkout
{
background-image: url(‘http://localhost/wp/wordpress/wp-content/uploads/2017/03/olive-tree-2.jpg’);
background-position: center;
background-attachment: fixed; /*default is scroll*/
background-size: cover;
background-repeat: no-repeat;
}

When I remove it the form transparency goes away, when I replace it it returns. (Transparency returns, oh the irony.) I did try removing the CSS I put in and trying what you posted above, but it put it back into the transparent state. I was looking at the inspect element’s styles portion (lower left corner), and it had a checkbox that allowed me to uncheck the background color, which created white boxes around each section with transparency between them. If I can’t fill that space, it may be my best option. This is the section I’m referencing:

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header {
color: #0a0a0a;
background-color: #ffffff;
}

(There’s a checkbox before the color and the background-color)

Using that option gives me something that looks like this (while not my original aim it is not unappealing, per se):

https://s13.postimg.org/3lkl4ei9z/other_options.png
https://s11.postimg.org/41g0ykegz/other_options_2.png

Thank you for all your help! (Really!)

Jen

[Jennifer]

Ha, nevermind! Revealing my ignorance! Apparently I can’t actually change anything from that area . . . too bad.

Best,

Jen

[Leo]

You definitely can change the background color of that area. Did you try the code here?
https://generatepress.com/forums/topic/different-backgrounds-for-individual-woocommerce-pages/page/2/#post-285961

[Jennifer]

I did try that code, but it had no effect. :-\

[Leo]

I think it’s likely getting overwritten by something else. Unfortunately I would need to see the site live to see what’s going on. Let me know when it’s live?

[Jennifer]

I definitely will! I truly appreciate all your help! The GP theme and the very awesome customer support (not only firsthand, but the hours of forum posts I’ve read through from other people and your guys’ responses) have really helped me out. While I do still have things to iron out, I really think it’s coming along nicely!

[Leo]

You’re very welcome! Let me know, I’ll be here 🙂

[Author]

Posts