Copper’s Tips & Tricks #5: WooCommerce Mobile Breakpoint
At the office, we use this breakpoints for CSS layouts, basically bootstrap’s:
| From | To | Description |
|---|---|---|
| Nothingness | 767px | Mobile |
| 768px | 991px | Tablet |
| 992px | Infinity | Desktop |
That’s the standard anyway, and we usually merge tablet and desktop together, at least for the most important features. However, there’s one very annoying thing that WooCommerce does. Here’s their table:
| From | To | Description |
|---|---|---|
| Nothingness | 768px | Mobile |
| 769px | Infinity | Desktop |
Yes, a single pixel off of what we want. A single pixel that will bother you so, so much during development if you try to overwrite all of WC’s styles.
Don’t panic, however, as there’s an easy fix:
// Change Woocommerce css breakpoint from max width: 768px to 767px
add_filter( 'woocommerce_style_smallscreen_breakpoint', function( $px ) {
$px = '767px';
return $px;
});
Done! There goes that pesky pixel.
Happy WooCommerce stylesheeting!
