Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1177998

    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

    #1178003

    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

    #1178240

    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

    #1178420

    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, 10 months ago by smarta-brett.
    #1178426

    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?

    #1178834

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

    #1178854

    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

    #1178856

    all good – thank you

    #1179164

    Hey!

    Glad you got it working for you! :)

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

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