-
AuthorPosts
-
January 24, 2020 at 6:32 am #1177998
further to another support thread regarding side widget positioning
which i am hoping to get answered
I’d like some info on styling WooCommerce pages
on the site i am building
https://aussiehiddentreasures.com/
front end access password = aussieI’ve created a custom shop page – Our Products – that displays the Parent categories using the Advanced Layout Builder
and I have styled the Cart, Checkout & My Account pages to match my other pages with a Colour Sections for page backgrounds and a widget on the right but as soon as it goes to single product page the layout is lostis there a way to apply the same layout to the single product page
I couldn’t find any shortcodes for this but even so I’d imagine if it was a custom page woocommerce would need to be re-coded to load that pageany ideas??the
January 24, 2020 at 6:50 am #1178003I’ve seen lots of plugins to re-arrange the page elements – I’m happy with the layout of those – I just want it to sit within a color section and have the widget at the side like me other pages
January 25, 2020 at 12:48 am #1178240ok – I’ve managed to fiddle with the code and get the right side menu into a better position – though not ideal it is now a pulldown under the product description – not what i wanted but i can live with it!
I have spent many hours trying to work out how to put a background image into the woocommerce generated pages – ie single product & the category pages
here are just some of the many css codes I have tried that I have found on various forums
.entry-featured { background-color: yellow; } .woocommerce-page { background-image: url(‘https://aussiehiddentreasures.com/wp-content/uploads/2020/01/bg7-2.jpg’); background-position: center; background-attachment: fixed; /*default is scroll*/ background-size: cover; background-repeat: no-repeat; } .woocommerce li.product { background-color: transparent; } .woocommerce .site, .archive .site { background-color: #000000; } .woocommerce #main { background-color: #FFFFFF; background-image: none; } .woocommerce.single-product { background: url(https://aussiehiddentreasures.com/wp-content/uploads/2020/01/bg7-2.jpg) no-repeat; background-size: cover; background-color: read; background-attachment: fixed; } #main-content { background-color: #00000; } .single-product .site { background-color: #00000; }
I can’t even get the background color to change let alone get an image in there !
can anyone help me out here before I got completely mad ….please !
https://aussiehiddentreasures.com/
front end access password = aussieJanuary 26, 2020 at 1:39 am #1178420ok
I managed to work this out – for anyone wanting to know here is how I did it
with the addition of the code added to child theme functions.php from this thread
(make sure you include both the php code & the css)then the css below
puts the widget to the right
calls the background image for the product & category pages
puts a background image (80% transparent white .png file) into the product description panel
puts a background behind the widget panel
removes the related products & the tabssee it on this site https://aussiehiddentreasures.com/
front end password if required is ” aussie ”.woocommerce-tabs { display: none !important; } .related.products { display: none; } .single-product-main-image { width: 25%; } .single-product-summary { overflow: hidden; width: 45%; float: left; margin-right: 5%; } .single-product .sidebar { width: 25%; } .template-shop { background-image: url(https://aussiehiddentreasures.com/wp-content/uploads/2020/01/bg5-light.jpg); background-repeat: no-repeat; background-position: bottom left; } .single-product-summary { background-image: url(https://aussiehiddentreasures.com/wp-content/uploads/2020/01/80-white-frost-panel-1.png); background-repeat: repeat; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; }
I hope this helps someone
- This reply was modified 4 years, 10 months ago by smarta-brett.
January 26, 2020 at 2:58 am #1178426ok…. – so I though i was pretty clever didn’t I !
now I have another problem – the background image I have placed in the woocommerce template is now also loading as the background into the “Products Slider” that I have on my homepage which has its own background
so now I need some nifty css to stop it showing in just that one element
I’ve tried many different thing with no success
any suggestions?January 27, 2020 at 11:37 pm #1178834I solved this by using a 3rd party plugin for the slider
WooCommerce Product Carousel, Slider and Grid UltimateJanuary 28, 2020 at 3:08 am #1178854Hi,
Thank you for the inquiries.
Looks like you’ve managed to solve and fulfill the issues/requests by yourself. Do you need anything else?
Best regards,
IsmaelJanuary 28, 2020 at 3:20 am #1178856all good – thank you
January 28, 2020 at 8:34 pm #1179164Hey!
Glad you got it working for you! :)
If you need further assistance please let us know.
Regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.