Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
hi! here is my question.
i want to set an image in the background of a specific woocommerce product page and i want it to stretch and fill the screen if it is a big screen size but i also want it not to shrink past a certain width for mobile and small screens. can this be accomplished through css? is parallaxing a possibility using the page builder image widget somehow?
thank you!
d-_-b
Hi D-_-b,
It looks like this thread has been handled in another thread by Andrew. If you feel this isn’t the case please tell me and I’ll give you all of the required information to do this.
it was answered on the other thread however i am not sure the question of parallaxing the image was covered. is that possible? also, on the other thread i had also asked about removing the sidebar on a woocommerce product page through css.
thank you!
d-_-b
Hi D-_-b,
Parrllaxing isn’t possible without a third party plugin. SiteOrigin can do it, but only if it controls what is generated.
Every page that is a WooCommerce powered page will a woocommerce class attached to the body. On a product page it also adds a single-product class. So something like this (as an example, this won’t work) could work:
.single-product .sidebar { display: none; }Hopefully, this makes sense.
this does make sense. to make this work i just need to give the code a page id correct?
Hi D-_-b,
I’m not sure I follow. You don’t need to target a page id directly as we’re using the woocommerce classes to do that for us.
hi! let me reset this a bit; i had added more to the conversation with Andrew which i now realize isnt in this thread. my goal is to create a landing page out of a product page in woocommerce. to do this i plan to add a background image and remove the sidebar; all the rest of the product page items will remain with perhaps a little page specific styling. so to your question; i dont wish to remove the sidebar altogether on product pages; just on a specific page.
so to do this i plan to use this for the background:
.postid-5421 #main { background-color: #dff1ff; background-image: url("https://nectarcollector.org/wp-content/uploads/2015/02/nc_15-02_web_bck01.jpg"); background-size: cover; }and for the sidebar this you provided but adding the post id:
.postid-5421 .single-product .sidebar { display: none; }does this appear as though it will work?
thanks again for your time!
d-_-b
Hi D-_-b,
That won’t work. .postid-5421 .single-product are applied to the same element so if you want to check if they are both attached to the body you’ll have to remove the space.
With that said, there’s little need to check if it’s a single-product if you’re targeting via the postid class.