Change Woocommerce media query breakpoint to load woocommerce-smallscreen.css at max-width: 767px instead of 768px

Question

Woocommerce load woocommerce-smallscreen.css at max-width 768px. How can I change it to 767px? I use this css file so I want it to be loaded but also change somehow this media query breakpoint.

I searched for this media query in woocommerce css files but I didn't find this phrase which I see in chrome devtools: media="only screen and (max-width: 768px)"

Answer 1

Add this Woocommerce filter in functions.php.

// Change Woocommerce css breaktpoint from max width: 768px to 767px  
add_filter('woocommerce_style_smallscreen_breakpoint','woo_custom_breakpoint');

function woo_custom_breakpoint($px) {
  $px = '767px';
  return $px;
}