- This topic has 23 replies, 2 voices, and was last updated 7 years, 1 month ago by
.
-
Posts
-
So, I realize this is not exactly a GP question, but I’m not sure whether it has to do with your theme (I bought the premium version) or woocommerce. I am unable to set individual background images for the woocommerce pages. I have combed through your support forum for hours and have tried different variations of custom css that you posted for other users, but without luck. I have also tried free plug-ins (like full background manager), but these have had no effect. I can set a background image in the customizer and it will display the same background on all the woocommerce pages, but that is not what I want. 🙁
I have also used some custom css to suppress the header on the shop page, but it doesn’t seem to extend to all of the woocommerce pages, and I’m not sure how to make it do so . . . Apologies if these questions have simple answers; I am VERY new at this and have zero coding knowledge, etc. Any help is appreciated!
Thanks in advance!
Jen
(P.S. I would provide a link to my page, but I’m using xampp and building my page on my localhost before publishing it or purchasing a hosting package. I’m not sure if I used all the correct terminology, but you’ll probably understand . . . )
Customer Support
Hi Jen,
Always good to see people look for solutions before posting 🙂
A bit more difficult to give you explicit answer when I can’t see the site but try the following:
– For the main WooCommerce shop page (http://demo.generatepress.com/shop/), try this CSS:.blog { background-image: url('URL TO THE IMAGE'); }– For individual pages like this one: http://demo.generatepress.com/product/happy-ninja/, try this:
.postid-xx.woocommerce { background-image: url('URL TO THE IMAGE'); }You would need to find the unique post id for each page to replace “xx”. If you are using chrome, right click anywhere on page and select Inspect. You should see the id shown in the
<body>tag on top.Let me know if this makes sense or if it works 🙂
Hi Leo!
I actually just played around and around and around with the CSS I found you post for another user, and I finally struck on the right combo! If it helps anyone as web-site-building-illiterate as I am, this is what worked for me:
To hide the site header from the “Home/Shop” page on WooCommerce:
.woocommerce .site-header
{
display:none;
}To hide the site header from the “Shopping Cart” page on WooCommerce:
.woocommerce-cart .site-header
{
display:none;
}To hide the site header from the “Checkout” page on WooCommerce:
.woocommerce-checkout .site-header
{
display:none;
}To hide the site header from the “Product” page on WooCommerce:
.woocommerce-product .site-header
{
display:none;
}To hide the site header from the “My Account” page on WooCommerce:
.woocommerce-account .site-header
{
display:none;
}To put an individual background on the “Home/Shop” page on WooCommerce:
.woocommerce-page
{
background-image: url(‘your url here’);
background-position: center;
background-attachment: fixed; /*default is scroll*/
background-size: cover;
background-repeat: no-repeat;
}To put an individual background on the “Shopping Cart” page on WooCommerce:
.woocommerce-cart
{
background-image: url(‘your url here’);
background-position: center;
background-attachment: fixed; /*default is scroll*/
background-size: cover;
background-repeat: no-repeat;
}To put an individual background on the “Checkout” page on WooCommerce:
.woocommerce-checkout
{
background-image: url(‘your url here’);
background-position: center;
background-attachment: fixed; /*default is scroll*/
background-size: cover;
background-repeat: no-repeat;
}To put an individual background on the “My Account” page on WooCommerce:
.woocommerce-account
{
background-image: url(‘your url here’);
background-position: center;
background-attachment: fixed; /*default is scroll*/
background-size: cover;
background-repeat: no-repeat;
}Now I have these remaining issues, not sure if you can help or not:
1) My shopping cart is see-through and shows the background image, can I fix this?
2) Is there a way with CSS to manipulate things like page titles, which I cannot seem to banish in WooCommerce?Thanks so much, Leo! (I have read way too much at this point, but I’m pretty sure it’s your CSS that I played around with till I got it to work.)
Best,
Jen
Apologies,
Not my shopping cart, my checkout page. But, same-same.
Thanks,
Jen
Haha that’s awesome you got it to work. I’m sure someone else will find this useful.
I don’t even remember posting these things…1) A checkout page like this? http://demo.generatepress.com/demo-checkout/
You should be able to change it globally through Customizer > Colors > Content > Background.
If you just want to change it for that page then we would need to target it with the selector again like this (assuming you are using separate containers:.page-id-xxxx .separate-containers .inside-article { background-color: #ffffff; }2) I don’t think WooCommerce has their own unique title classes so you should be able to use the Customizer settings. Try Typography > Content. If not then there is definitely a way to use CSS. If you right click on the title then you can see the classes associate with it and then overwrite them. Looks like you are getting pretty good at this already!
Let me know if this helps 🙂
Leo,
It’s the billing/checkout page. The form itself is transparent, so you can see the entire background. Hmmm, that CSS Made the form outline (content box?) white, and also did the same for the form fields, but the body of the form is still transparent . . . I’ve tried the Customizer for banishing page titles, but it hasn’t worked, so far. I’ll keep messing around with it. Ha, I don’t know if I’m very good at it; mostly just OCD enough to continue making minute adjustments to pre-written CSS until I strike on the right combo.
Thanks Leo!
Jen
ahh damn..I’m not particularly useful without seeing the page and use chrome inspect tool..
Give this another shot though:
.woocommerce-billing-fields { background-color: #000000; }Ha! You’re better than you think: Part of my form is no longer transparent! I changed the color to fffff, but anyway, I will keep trying to use that for the other two portions of the form (additional information and your order. . . billing details was the one that worked, and “billing-fields” worked a charm . . . joy.)
Thanks Leo! (A LOT!)
Jen
Can you try this again?..this kind of things bug me when I can’t get them right but I think this should work now…
input[type=text], input[type=email], input[type=url], input[type=password], input[type=tel], input[type=search], textarea { background-color: #ffffff; }Sorry Leo,
I had a tax appointment (that I was almost late for!). Anyway, I added that to the CSS, but it didn’t change anything. On the upside, it didn’t take away the 1/3 of the form that is now solid white and not transparent, haha! I’ll keep playing with it. Is there a way to share a screenshot? I really really appreciate your help!
Best,
Jen
Try this…
.woocommerce-checkout input { background-color: #000000 !important; }So,
This works for most of the form:
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-checkout-review-order
{
background-color: #ffffff;
}I figured out how to use “inspect element” (I warned you I was a noob.), and cut and pasted what I found to create this CSS, which worked identically to that above:
<form name=”checkout” method=”post” class=”checkout woocommerce-checkout customize-unpreviewable” action=”http://localhost/wp/wordpress/?page_id=79″ enctype=”multipart/form-data”>
{
background-color: #ffffff;
}Both of these options, though, leave a huge chunk transparent. The form field areas themselves are all now backed by a lovely white, but the blank space is firmly transparent. Can I insert screenshots in this form?
Best,
Jen
That turned my form input fields black . . . which is nifty, I am going to save that into a file for later reference.
Wait I thought we were trying to change the input field background color and that did it? You can change it to white? I was just testing with black so easy to see.
I found some useful info google “woocommerce checkout page css” 🙂
You can upload the image to a site like this: https://postimage.io/ and provide the direct link here but I’m not sure if it would help much. It should be similar to this: http://demo.generatepress.com/demo-checkout/
This is the issue I started out with on the checkout form:
https://postimg.org/image/sigfdmkbx/
This is the issue I have remaining:
https://postimg.org/image/wh5n507q1/
https://postimg.org/image/cptr4zh6v/
- You must be logged in to reply to this topic.