Custom filter shop woocommerce

Demo

PHP

paste to function.php

// Custom filter shop woocommerce
function filter_product_xso(){
if( !is_product() ): ;?>
    <?php if(!wp_is_mobile()){;?>
  <div class="loc-san-pham-theo">
	<form id="popular-form">
    <div class="range-check">
     <input class="xso-checkbox" type="checkbox" value="popularity" id="popular" name="orderby" onChange="this.form.submit()"/>
     <label for="popular">Phổ biến</label>
   </div>
  </form>
	  	<form id="rating-form">
    <div class="range-check">
     <input class="xso-checkbox" type="checkbox" value="rating" id="rating-check" name="orderby" onChange="this.form.submit()"/>
     <label for="rating-check">Đánh giá cao</label>
   </div>
  </form>
    <form id="datecheck">
   <div class="range-check">
     <input class="xso-checkbox" type="checkbox" value="date" id="date" name="orderby" onChange="this.form.submit()" />
     <label for="date">Mới nhất</label>
   </div>
  </form>
   <form id="oldproduct">
   <div class="range-check">
     <input class="xso-checkbox" type="checkbox" value="old-product" id="old-product" name="orderby" onChange="this.form.submit()" />
     <label for="old-product">Cũ nhất</label>
   </div>
  </form>
   <form id="pricedesc">
    <div class="range-check">
     <input class="xso-checkbox" type="checkbox" value="price-desc" id="price-desc" name="orderby" onChange="this.form.submit()" />
     <label for="price-desc">Giá giảm dần</label>
   </div>
  </form>
  <form id="pricesmall">
   <div class="range-check">
     <input class="xso-checkbox" type="checkbox" value="price" id="price" name="orderby" onChange="this.form.submit()" />
     <label for="price">Giá tăng dần</label>
   </div>
  </form>

  </div>
<?php }
	else{};
endif;
};
add_action('woocommerce_before_main_content','filter_product_xso');

JS

paste to function.php

function add_js(){;?>
    <script type="text/javascript">
jQuery(document).ready(function() {
    if (window.location.href.indexOf("popularity") > -1) {
          jQuery('#popular-form input[type="checkbox"]').prop('checked', true);
    }
	else if (window.location.href.indexOf("rating") > -1) {
          jQuery('#rating-form input[type="checkbox"]').prop('checked', true);
    }
	else if (window.location.href.indexOf("date") > -1) {
          jQuery('#datecheck input[type="checkbox"]').prop('checked', true);
    }
    else if (window.location.href.indexOf("old-product") > -1) {
          jQuery('#oldproduct input[type="checkbox"]').prop('checked', true);
	}
    else if (window.location.href.indexOf("price-desc") > -1) {
          jQuery('#pricedesc input[type="checkbox"]').prop('checked', true);
    }
    else if (window.location.href.indexOf("price") > -1) {
          jQuery('#pricesmall input[type="checkbox"]').prop('checked', true);
    }
});
jQuery("a.deselect").each(function(){
    this.search = "";
});
</script>
<?php };
add_action('wp_footer','add_js');

CSS

/******** Custom filter shop ******/

.woocommerce-ordering {display: none;}
.loc-san-pham-theo {display: flex;margin-top:0px;margin-bottom: 30px;justify-content: flex-end;border-bottom:1px solid #ddd;}
.loc-san-pham-theo input[type=checkbox]+label{cursor:pointer;color:#1f2a37;transition: .2s all;padding: 8px 10px;}
.loc-san-pham-theo input[type=checkbox]+label:hover, .loc-san-pham-theo input[type=checkbox]:checked+label{transition: .2s all;color:#fff;	background-color:#1F2A37;padding: 8px 10px;border-radius:3px}
.loc-san-pham-theo input[type=checkbox]{margin-right:3px;display:none;}
.loc-san-pham-theo form {padding: 0 0 0 10px;}
@media (max-width: 768px){.loc-san-pham-theo {justify-content: center;}}
@media (max-width: 576px){.woocommerce-ordering {display: block;}
	.loc-san-pham-theo{display:none;}}