Change shop columns breakpoint on mobile

[soulshakepower]

Hi WPLMS team, Hope you're all doing great, Alex and all your instances that keep working night&day :) I was wondering if on the main shop page (product archive) it was possible to:

1. Keep 2 columns on resolutions below 780px instead of 1 columns with huge product.

2. Hire one of you for a custom work on the shop page template: My goal is to ease the mobile shop experience by showing filters (widgets from the sidebar) on top.

Instead of showing all the widgets directly, they would be hidden (like in an accordion) and become visible when clicking a "Filters" button on top of the shop page. Many big online stores are doing this and I believe it is the most ergonomic approach for mobiles. Let me know! Cheers, Martin

[soulshakepower]

This reply has been marked as private.

[logan]

Hello, Please goto wp-admin >>> appearance >>> customize >>> custom css >>> paste & save. @media(max-width:768px){ .woocommerce ul.products{ max-width:100%; } .woocommerce ul.products li.product.col-sm-6{ width: calc(50% - 30px); float:left; margin: 15px; clear:none; } .woocommerce ul.products li.product.col-sm-6:nth-child(2n+1){ clear:both; } .yith-wcqv-button.inside-thumb{ position:absolute; left:50%; transform: translate(-50%,-50%) !important; } } Please paste this snippets in your wp-admin >> plugins >> editor >> wplms-customizer plugin >> wplms-customizer.php  add_action('wp_footer',function (){ ?> <script> function check_width_shop_page(){ var width = jQuery(window).width(); if(width > 768){ //deskyop jQuery('.shopsidebar').show(); jQuery('.shop_products.content.padder .toggle_sidebar').hide(); }else{ //mobile jQuery('.shopsidebar').hide(); if(!(jQuery('.shop_products.content.padder .toggle_sidebar') && jQuery('.shop_products.content.padder .toggle_sidebar').length )) jQuery('.shop_products.content.padder').prepend('<a class="toggle_sidebar button" >Show filters</a>') } } jQuery(document).ready(function(){ check_width_shop_page(); }); jQuery(window).on('resize', function(){ check_width_shop_page(); }); jQuery('body').delegate('.toggle_sidebar','click',function (){ jQuery('.shopsidebar').toggle(); }); </script> <?php });

[Author]

Posts