Sticky sidebar/filters on shop for desktop/laptop. view
-
On the shop page, the product filter panel should remain visible and sticky while the user scrolls through the product listings. Currently, once the user scrolls, the filter moves out of view, which impacts usability.
Even better would be it if has a scroll bar of it’s own.
Kindly suggest a solution.
Hello,
You can set the hidden sidebar and it will be sticky. You can see the demo here: https://woodmart.xtemos.com/shop/?opt=hidden_sidebar
You can enable this option in the Theme Settings > Product Archive > Sidebar. You need to enable the Off-Canvas sidebar for the desktop.
Otherwise, you can use Elementor or WPBakery page builder to create your shop page custom layout as per the instructions https://xtemos.com/docs-topic/shop-page-builder/
This gives you the ability to set the sidebar inside the sticky container to achieve this.
If you have any questions, please feel free to contact us.
Best Regards,
Hello Team,
I have shared a screenshot with you. I want to make this sidebar sticky. How can I make it sticky?
Page URL: https://mukulgoyal.com/product-category/studio/
Attachments:
You must be
logged in to view attached files.
Hello,
Navigate to Theme Settings > Product Archive > Sidebar > enable the option Off-canvas sidebar for desktop.
See Screenshot for better understanding: https://postimg.cc/zbYH0Dpd
Best Regards,
Sir this is on. I mean, after i switch on, there is a show sidebar on top top products (as per the screenshot) I have to make that sticky.
I am sorry if I did not put across my point properly.
Attachments:
You must be
logged in to view attached files.
Hello,
Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.
Best Regards,
Hello,
The login details you provided are not working. Please share the correct login details so I can check the issue and give you a possible solution.
Best Regards,
PFA the verified login details.
Hello,
Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then, activate the 3rd party plugins one by one and check which plugin is creating the issue for you.
Otherwise, if the issue still exists, then keep the 3rd party plugins deactivated and let me know I will further check and give you a possible solution.
Best Regards,
I understand. Is there a php/patch/css to override everything?
Please help this is critical. I would have never gone to this extent but I hold 15+ licenses. Will be buying more in coming months. Please help.
Hello,
Please try to create a Staging platform where you can test issues, enable/disable features/plugins, thus such changes will affect the main site. Also, share the WP login details of the staging site so I can further check on your staging site and troubleshoot the issue.
The article below will help you to create it: https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/
Best Regards,
Sir, we were able to convince the team for another solution. I activated theme options>product archive>sidebar>Sticky off canvas sidebar button
Now we want to achieve the following:
– That the filter icon on the left, that is sticky to be white with solid orange background.
– Hanburger (three lines) icon next to show sidebar, just above the products, is to be changed with filter icon (same as sticky button)
I hope this resolves the entire thread.
Best,
-
This reply was modified 3 weeks, 2 days ago by
shweta. Reason: File attachment
Attachments:
You must be
logged in to view attached files.
Hello,
Please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:
.wd-sidebar-opener.wd-show-on-scroll.wd-shown {
background-color: orange;
}
.wd-sidebar-opener.wd-show-on-scroll.wd-shown.wd-action-btn>a {
color: white !important;
}
.wd-sidebar-hidden-lg .wd-shop-tools .wd-burger-icon>a:before {
content: "\f118";
}
Best Regards,
Perfect this worked. just one minor glitch that we have faced in past as well. On desktop, when we click on extreme right edge of the sticky filter icon it works and not in center. Similar issue was there in another ticket of mine – https://xtemos.com/forums/topic/checkout-page-checkbox-issue-on-mobile-also-sometimes-on-desktop/
Your solution that worked was
body:not(.sfm-body-pushed) .sfm-rollback{
z-index: 0;
}
Kindly check what can be done on similar lines for this sticky filter icon. Best,
Hello,
Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then, activate the 3rd party plugins one by one and check which plugin is creating the issue for you.
Otherwise, if the issue still exists, then keep the 3rd party plugins deactivated and let me know I will further check and give you a possible solution.
Best Regards,
We had this same conversation in previous ticket as well. Requesting you to help. It is a small css, like in previous case.
For tickets like these we buy from woodmart. We have more than 15 licenses. Please help. I know you always have a solution and we heavily rely on it.
Hello,
By default, the sticky sidebar filter works correctly on our test site without adding any custom code — clicking on either side functions as expected.
Please try temporarily deactivating all plugins and then reactivating them one by one to identify if any plugin is causing the issue. Once you’ve completed this test, let me know, and I’ll proceed with further troubleshooting on your site.
Best Regards,
.
