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