Off-canvas sidebar and filter collapse not working on custom Layout Builder temp

Hello,

I am experiencing a critical issue with the functionality of the product archive sidebar when using a custom layout built with the WoodMart Layout Builder and Elementor.

The layout is specifically assigned to product subcategories (e.g., ‘Eettafels’).

The Problem:

Mobile View (Off-Canvas Failure): The entire sidebar (containing Layered Nav filters) appears directly above the product grid on mobile, instead of being hidden in the expected off-canvas drawer.

Filter Collapse Failure: The individual filter widgets (e.g., ‘Pootkleur’) do not collapse/dropdown and remain permanently expanded, even though the Theme Setting for widget collapse is enabled.

Diagnostic Steps Taken (Troubleshooting):

Caching/Optimization: All LiteSpeed Cache optimizations (CSS Minify, JS Combine, UCSS, Async, Defer) were completely disabled. Caches were purged (LSCache, WoodMart, Browser). (Result: Issue persists).

Plugin Conflict: I performed an isolation test. All plugins were deactivated, leaving only WooCommerce, WoodMart Core, and Elementor active. (Result: Issue persists).

Conclusion:

This is confirmed to be a conflict or bug between the WoodMart Layout Builder’s rendering of the Elementor sidebar container and the necessary WoodMart JavaScript/CSS scripts required for mobile off-canvas functionality.

Please advise on how to resolve this layout conflict. I have created a temporary administrator account for your team.

Thank you for your assistance.

Attachments:

You must be logged in to view attached files.

Hello,

Thank you so much for purchasing our theme and contacting our support center.

Unfortunately, we can’t reach your website to check the issue described. Please see the screenshot https://gyazo.com/0d8fdbf12b2203e5f0bc09d20a68bea5

Kind Regards
XTemos Studio

Thank you for the quick response. The website is a staging/developer environment and is likely protected by an IP restriction or a firewall (e.g., restricted to specific regions) to prevent public access.

Could you please provide your current IP address so I can whitelist it on my server/firewall (Wordfence/hosting settings)? This will allow you to access the website to check the issue.

Of course, here is my current IP 46.205.204.197

I have received a definitive response from my hosting provider. It is not possible to whitelist your IP address on the server due to platform security restrictions. This means the server may temporarily block your IP if you try to access the site frequently or use specific tools.

To gain access, can you try one of the following:

Use a VPN (preferably based in The Netherlands) to change your external IP address.

Change your network/IP address and try again with the provided login credentials.

I have completed all required layout changes on my end, but two critical WoodMart bugs remain:

Mobile/Off-Canvas Bug: The filters in the custom sidebar do not collapse/expand correctly on mobile.

AJAX Refresh Bug: On the main ‘Tafels’ archive, the Product Categories section above the product grid unnecessarily reloads/flashes when a filter is selected.

Thank you.

We just tried to connect using VPN from the Netherlands and still see the same problem. Here is the IP 146.70.169.244

If you go to the website without www it should work. Can you give that a try?
https://dev.trendy-living.nl/

Yes, we can reach your website at the moment. Please disable all plugins that are not related to our theme temporarily so we can check what is wrong.

Perfect, I have disabled all unnecesary plugins

Hello,

As I can see, the off-canvas sidebar is disabled for this custom layout https://gyazo.com/8c301bbb1fe623f83425660b0e5ab244
You need to enable it by following our documentation https://xtemos.com/docs-topic/custom-off-canvas-sidebar/

As for the animation for categories, you are using the categories element from Elementor https://gyazo.com/23b125b24bb24ac77951162189b48aa8
You need to replace it with our theme’s core element, which works correctly with the AJAX.

Kind Regards

Hello,

Apologies for the delay in my response.

I wanted to let you know that the previous issue with the off-canvas sidebar and the categories is resolved. I followed your instructions and everything works perfectly now. You can mark that part as solved.

However, I have a follow-up question regarding the design of the shop sidebar. As you can see in the attached screenshot, the vertical spacing (margin) between the filter widgets is quite large.

Because of this spacing, the filters take up too much height and do not fit within a single screen view. This causes issues when I enable the “Sticky Sidebar” option: it starts to glitch because the sidebar content is taller than the viewport.

Could you provide me with a CSS snippet or a setting to reduce the space between the widgets? I would like to make the list more compact.

Kind regards,

Attachments:

You must be logged in to view attached files.

Hello,

We are glad that your initial issues are solved. Here is a custom CSS code to reduce the spacing for widgets

div.widget {
    margin-bottom: 20px;
    padding-bottom: 20px;
}

Kind Regards

Hello,

Thank you for the code!

I managed to apply it directly to the sidebar element CSS, and it works perfectly now. The spacing is much better, and the sticky sidebar issue is resolved.

You can mark this ticket as closed. Thanks for the help.

Kind regards,

Hello,

Great to hear everything is working now. We have marked the ticket as closed.

If you need anything else, feel free to reach out.

[Author]

Posts