Home › Forums › WoodMart support forum › Off Canvas Sidebar on Product Pages

Off Canvas Sidebar on Product Pages

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 5, 2018 at 12:44 pm #56232

    newsprince
    Participant

    Hello.

    We have off canvas sidebar on shop page and works just fine.

    You gave us also on a previous post a custom javascript script that we can assign a class on any element to trigger the sidebar to open and works just fine.

    We want the off canvas sidebar to show up on product pages also. When we press the custom class button only the shadow appears and not the sidebar.

    Is this possible to make it happen?

    Thank you.

    May 5, 2018 at 3:37 pm #56257

    Eric Watson
    Participant

    Unfortunately, such functionality is possible only on the pages of the shop and categories.

    Regards

    May 5, 2018 at 5:47 pm #56265

    newsprince
    Participant

    Ok thank you. Maybe on a future release.

    May 5, 2018 at 7:00 pm #56271

    Eric Watson
    Participant

    You are welcome! If you have any questions feel free to contact us.

    Best Regards

    May 5, 2018 at 7:37 pm #56276

    newsprince
    Participant

    OK i have figure a way to make it happen.

    I did that on chrome console and seems to work but i want a guidance on how to embed the code to make it permanent.

    The steps are.

    Go to Theme Settings > Product Page > Single Product Sidebar

    Choose Left Sidebar

    Go to widgets and add widgets to single product page widget area

    Now if you go to a single product page you can see the sidebar.

    Right click on sidebar and inspect with dev tools

    1st.

    Change

    <aside class=”sidebar-container col-sm-2 col-sm-pull-10 sidebar-left area-sidebar-product-single” role=”complementary”>

    With

    <aside class=”sidebar-container col-sm-2 col-sm-pull-10 sidebar-left area-sidebar-shop show-hidden-sidebar”>

    2nd.

    Change

    <div class=”product-image-summary col-sm-10 col-sm-push-2″>

    With

    <div class=”product-image-summary col-sm-12″>

    3rd.

    Change

    <div class=”owl-item active” style=”width: 723px;”>

    With

    <div class=”owl-item active” style=”width: 874px;”>

    Now the off canvas sidebar works and the product template width and image are normal.

    Can you guide me on how to make those changes permanent please?

    Thank you.

    May 5, 2018 at 7:38 pm #56277

    newsprince
    Participant

    Go for example on that product page and try it with chrome dev tools

    May 6, 2018 at 6:30 am #56301

    Eric Watson
    Participant

    Try to add the following PHP code snippet to the child theme sidebar.php file to do this

    if ( is_product() ){
	$sidebar_class = 'sidebar-container col-sm-2 col-sm-pull-10 sidebar-left area-sidebar-shop show-hidden-sidebar';
}

    https://prnt.sc/jebf6s

    then try to add the following PHP code snippet to the child theme woocommerce/content-single-product.php and replace this line

    <div class="product-image-summary <?php echo esc_attr( $content_class ); ?>">

    with this one

    <div class="product-image-summary col-sm-12">
    https://prnt.sc/jebf8z

    Best Regards

    May 6, 2018 at 11:19 am #56329

    newsprince
    Participant

    Yes thank you it works but it has issues..

    When you select a filter it adds the

    ?filter_

    at the product url and not the shop url so it just reloads the same product page except if you select a category fitler.

    And the second issue is that on mobile or when you resize the browser window a part of the sidebar doesn’t stay hidden.

    Thank you for your support regardless.

    If it’s not manageable to fix this and requires additional coding to fix these 2 issues we will abandon this concept on product page.

    If you can provide us with a simple fix we will be happy to implement it.

    Thank you again.

    May 6, 2018 at 3:18 pm #56344

    Elise Noromit
    Member

    Hello,

    You would better not to use this sidebar for filters. Filters would not work. For now we do not have a quick solution.

    Best Regards

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