Mikey Arce

Working with WooCommerce’s “woocommerce-smallscreen.css” file

—

by

mikey
in ,

WooCommerce has the fun task of trying to play nice with thousands of themes. That’s not always an easy task and it’s especially hard when it comes to responsive design. How do you design store elements to work with basically every theme out there? You take a good guess and you hope for the best.

That’s where woocommerce-smallscreen.css comes in. This is the stylesheet responsible for, you guessed it, small screens! It contains a lot of nice touches like making the cart look nicer when the screen is small. Here’s an example the Twenty Fifteen default theme:

Twenty Fifteen normal:

Twenty Fifteen smallscreen:

You can see the actual CSS (or Sass) that it uses, here:
https://github.com/woocommerce/woocommerce/blob/master/assets/css/woocommerce-smallscreen.scss

It’s enqueued like this:

'woocommerce-smallscreen' => array(
    'src'     => self::get_asset_url( 'assets/css/woocommerce-smallscreen.css' ),
    'deps'    => 'woocommerce-layout',
    'version' => WC_VERSION,
    'media'   => 'only screen and (max-width: ' . apply_filters( 'woocommerce_style_smallscreen_breakpoint', $breakpoint = '768px' ) . ')',
    'has_rtl' => true,
),

It will look like this on your site:

<link rel="stylesheet" id="woocommerce-smallscreen-css" href="//yoursite.dev/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=3.0.7" type="text/css" media="only screen and (max-width: 768px)">

The important part to note is that it has this bit by default: media="only screen and (max-width: 768px)". That means that this stylesheet will only be applied when the screen size is smaller than 768 pixels wide. The reason for that is that an iPad Portrait mode is 768 pixels, so that’s become a standard for breakpoints.

So this stylesheet contains a lot of useful CSS for small screens, but it might not work the best for your theme or site – and you might have some special conditions you want. Maybe you want the product-thumbnail to display on small screens, or you want some other layout changes. Here are two suggestions that might work for you!

If you want to CHANGE that breakpoint, we very handily have the woocommerce_style_smallscreen_breakpoint filter that we can use like this:

// Don't add this opening PHP tag unless your file doesn't already have one
<?php
// Define a new breakpoint for woocommerce-smallscreen.css
function marce_filter_woocommerce_style_smallscreen_breakpoint( $breakpoint ) {
$breakpoint = '200px';
return $breakpoint;
};
add_filter( 'woocommerce_style_smallscreen_breakpoint', 'marce_filter_woocommerce_style_smallscreen_breakpoint', 10, 1 );
view raw woocommerce-smallscreen-filter-breakpoint.php hosted with ❤ by GitHub

Using that filter will change the breakpoint to 200 pixels instead of the 768 default.

Another option you have is to just remove it entirely from being loaded. You can do that like this:

// Don't add this opening PHP tag unless your file doesn't already have one
<?php
// Remove woocommerce-smallscreen.css
function marce-remove-woocommerce-smallscreen-css( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
add_filter( 'woocommerce_enqueue_styles', 'marce-remove-woocommerce-smallscreen-css' );
view raw remove-woocommerce-smallscreen.php hosted with ❤ by GitHub

Read more about how to disable all WooCommerce stylesheets here: WooCommerce CSS Structure

Comments

Leave a Reply