Home Forums ePix Support Woocommerce product pages – sliding side bar?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #42585

    Matt T
    Member

    Hello chaps!!

    I’m in a bit of a pickle, need to have the sliding sidebar on woocommerce product pages if possible? ie. I want it to slide out of view so the product has more width, if that makes sense.

    OR Failing that could you tell me how to change the sidebar width?

    Thanks,
    Matt

    #42630

    Tom ( Support)
    Keymaster

    Hi Matt,

    I am not sure what you mean by the sliding sidebar? Do you mean have a gallery that is sliding? Like a group slider? If so, this is possible to do within the widgets section of WordPress.

    OR, to change the width of the content sidebars please follow this description.

    As this is a customization it was in the customization forum but as a one-off, heres what was said.

    To start, I recommend using the Custom CSS field within Appearance > Theme Options > Customize > Custom CSS as adding your CSS here instead of the CSS file will mean that when you update the theme, the code will still be within your settings.

    There is no documentation available as it is not a standard theme option but I can help you out with the code.

    Try the following CSS instead,

    #content.layout_six {margin-left: 20%; }
    .row .six, .row .two_column {width: 60%;}
    .sidebar.columns.four {width:20%;}
    .sidebar.columns.three {width:20%;}
    .sidebar.side_one.layout_six {margin-left: -80%;}
    

    It is kind of hard to explain but I gave it a go.

    #content.layout_six {margin-left: 20%; } – layout_six has a margin left of 20% as it needs to be pushed out 20% from the left.
    .row .six, .row .two_column {width: 60%;} – has a width of 60% as it is taking up 60% of the page (this is the main content area)
    .sidebar.columns.four {width:20%;} – Width for the right column
    .sidebar.columns.three {width:20%;} – Width for the left column
    .sidebar.side_one.layout_six {margin-left: -80%;} – is pushing out 80% from the right.

    .sidebar.side_one.layout_six {} ( left sidebar for sidebars left and right as per blog page )
    .sidebar.side_two.layout_six {} ( right sidebar for sidebars left and right as per blog page )

    all columns and content have to add up to 100%, if the set a sidebar to 20% then the margin-left of the content has to be 20%.

    Kind regards,
    Tom

    #42658

    Matt T
    Member

    Hi Tom, Say hi to Andy from me 🙂

    Thanks for the quick and detailed reply. Essentially I want to have a wider main content area.
    In this case it’s so my product designer add-on has more space: http://www.casemad.com/product/upload-your-own-image/

    With that in mind, here’s what I’ve used in the custom css part of theme options for ePix – but it’s made no difference? :

    #content.layout_six {margin-left: 15%; !important;}
    .row .six, .row .two_column {width: 80%; !important;}
    .sidebar.columns.four {width:5%; !important;}
    .sidebar.columns.three {width:15%; !important;}
    .sidebar.side_one.layout_six {margin-left: -80%;}

    #42665

    Tom ( Support)
    Keymaster

    Hi Matt,

    Currently your set up has the sidebar on, if you go Appearance > Theme Options > Woocommerce > Page layout and set it to full width without a sidebar, this will give you more space on the page.

    This way you can remove the code added before.

    Hope this helps.

    Kind regards,
    Tom

    #42667

    Matt T
    Member

    Strange, the product posts(woocommerce sections) already have page layout set to full width / no sidebar ?

    #42674

    Tom ( Support)
    Keymaster

    Hi Matt,

    Woocommerce product pages are not actual pages so the page options do not apply to individual pages. If you go Appearance > Theme Options > Woocommerce > Page layout and set it to full width without a sidebar, this will give you more space on the page.

    Hope this helps.

    Kind regards,
    Tom

    #42688

    Matt T
    Member

    Yes that’s what I meant the
    “Appearance > Theme Options > Woocommerce > Page layout and set it to full width without a sidebar”
    is already set to full width without a sidebar.

    #42694

    Tom ( Support)
    Keymaster

    Hi Matt,

    I am not sure what is happening here, please set your reply to private and provide your URL/login details so I can take a further look for you.

    Kind regards,
    Tom

    #42697

    Matt T
    Member
    This reply has been marked as private.
    #42724

    Tom ( Support)
    Keymaster

    Hi Matt,

    On further inspection the space on the right is coming from the CSS of the fancy-product.css file that is set to 200px wide. So on a larger screen where the theme gets slightly wider, there will be a gap. If you size the width of the browser window down, the theme gets slightly smaller to compensate for smaller resolution of screens.

    I can set this wider so it will fit it correctly for wider screens but when the screen resolution is smaller, the right hand side description and prices etc, will drop below as the fancy-product is not responsive and will not resize correctly.

    Unfortunately it is either or at the moment. I can either get rid of the gap so it will work on larger screens, or leave it how it is so it works on both large and smaller.

    Kind regards,
    Tom

    #42727

    Matt T
    Member

    Hi Tom, Is it possible to reduce width of left sidebar, basically wanted to have a wider main content area (i know it’s not best scenario for smaller resolutions but it’ll have to do for now). It’s so the sidebar of the product designer add-on has more space.
    Hope all that makes sense?

    #42758

    Tom ( Support)
    Keymaster
    This reply has been marked as private.
    #42765

    Matt T
    Member
    This reply has been marked as private.
    #42773

    Tom ( Support)
    Keymaster

    Hi Matt,

    Ok great, if you want to make the whole site full width, please follow the documentation here for more help.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

© 2018 Acoda