Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 24, 2020 at 6:32 am #1177998
    smarta-brett

    further to another support thread regarding side widget positioning

    woocommerce menu

    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 = aussie

    I’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 lost

    is 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 page

    any ideas??the

    January 24, 2020 at 6:50 am #1178003
    smarta-brett

    I’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 #1178240
    smarta-brett

    ok – 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 = aussie

    January 26, 2020 at 1:39 am #1178420
    smarta-brett

    ok

    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 tabs

    see 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, 11 months ago by smarta-brett.
    January 26, 2020 at 2:58 am #1178426
    smarta-brett

    ok…. – 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

    see this image

    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 #1178834
    smarta-brett

    I solved this by using a 3rd party plugin for the slider
    WooCommerce Product Carousel, Slider and Grid Ultimate

    January 28, 2020 at 3:08 am #1178854
    Ismael

    Hi,

    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,
    Ismael

    January 28, 2020 at 3:20 am #1178856
    smarta-brett

    all good – thank you

    January 28, 2020 at 8:34 pm #1179164
    Victoria

    Hey!

    Glad you got it working for you! :)

    If you need further assistance please let us know.
    Regards,
    Victoria

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.