Off Canvas Sidebar on Product Pages

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.

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

Regards

Ok thank you. Maybe on a future release.

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

Best Regards

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.

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

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

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.

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