将Woocommerce媒体查询断点更改为以max-width：767px而不是768px加载woocommerce-smallscreen.css

Question

Woocommerce加载woocommerce-smallscreen.css，最大宽度为768px。如何将其更改为767px？我使用这个css文件，所以我希望它被加载，但也改变了这个媒体查询断点。

我在woocommerce css文件中搜索了这个媒体查询，但我没有找到我在chrome devtools中看到的这句话：media="only screen and (max-width: 768px)"

Answer 1

在functions.php中添加此Woocommerce过滤器。

// 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;
}