wordpress - 更改 Woocommerce 媒体查询断点以在最大宽度 : 767px instead of 768px 处加载 woocommerce-smallscreen.css

Question

Woocommerce 以最大宽度 768 像素加载 woocommerce-smallscreen.css。如何将其更改为 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;
}