add_action('woocommerce_after_main_content', 'mobile_sidebar',15); function mobile_sidebar(){ ?> <script> let sidebar = document.getElementById("secondary"); function checkWidth(){ let width = window.innerWidth; if (width<982){ sidebar.style="display:none"; }else{ sidebar.style="display:block"; } } checkWidth(); window.addEventListener('resize', checkWidth); </script> <?php } add_action('woocommerce_before_main_content', 'show_filters',15); function show_filters(){ echo '<button id="filterButton">Φίλτρα Αναζήτησης</button>'; ?> <script> let filterButton = document.getElementById("filterButton"); let sidebars = document.getElementById("secondary"); function checkWidth(){ let width = window.innerWidth; if (width>982){ filterButton.style="display:none"; }else{ filterButton.style="display:block"; } } checkWidth(); window.addEventListener('resize', checkWidth); filterButton.addEventListener('click', showFilters); let i = 1; function showFilters(){ if(i%2===0){ sidebars.style="display:block"; i++; }else{ sidebars.style="display:none"; i++; } } </script> <?php }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter