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

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:

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:

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

Storefront Handheld Menu Height

With Storefront you can have a separate menu for mobile and desktop. They are listed as Primary for the Desktop, and Handheld for Mobile:

If you are wondering, the Secondary Menu is for the Header.

The Handheld Menu is specific to mobile devices, and it looks like this:

One of the nice visual queues is that it uses an animation to “open up” the menu. Since animations require a height in order to work, it has to have a set “max-height” in CSS:

.handheld-navigation,.main-navigation.toggled .menu>ul:not(.nav-menu),.main-navigation.toggled ul[aria-expanded=true]
{max-height:1750px}

The problem then becomes, what if you have more menu items than that height can hold? In my tests it can hold up to about 30 items.

Honestly, if you have more than 8, it’s a bad idea.

However, if you want need to have more than 30ish, you can just use some custom CSS like this:

.handheld-navigation { max-height: 2000px !important; }

That should make the menu up to 2000px in height.

Align WooCommerce Add to Cart Buttons in Storefront

I get this request a lot – you have a lot of products but the “Add to Cart” buttons don’t line up together.  You probably have some product titles that span 2 lines, others than span 1.  Some of your images are taller than others, or maybe some are on Sale and others aren’t.  That’s ok!  Here’s what you need to do:

  1. Measure how big you want ALL your product heights to be.  Do you want all your products to have a height of 200 pixels or 500 pixels?
  2. Make sure you have the right image settings under WooCommerce > Settings > Products > Display.  From there you can actually set an  image size that will be uniform for your whole store.
  3. Use Custom CSS to set a specific height for your products:

I typically use Jetpack’s Custom CSS module to add CSS to your site but you can do it whichever way you want.

Before:

Screen Shot 2016-07-11 at 8.20.43 AM

After:

Screen Shot 2016-07-11 at 8.20.52 AM

Want more Storefront or WooCommerce tips? Leave a comment below with a suggestion!

Change the default logo size for Storefront and it’s child themes

WordPress recently added the Custom Logo feature which is pretty neat.  Storefront 2.0 also added support for this recently.  By default, Storefront will set the logo to be 110 by 470 – which is pretty small.  If you want to make that bigger, you just need to override the theme function using something like this.

Make sure you remove the opening php tag if that’s already in your functions.php file, and change the values of 400 to whatever you want.

Automatically hide or expire products after a certain date

Say you have a shop, and you use WooCommerce and WooCommerce Bookings.  Most of the time you want to have your Bookings available for people to buy, always!  However, some Bookings are more seasonal, or one-off Bookings.

For example you might have a tour you offer for 1 month but only every few years.  Or a seasonal booking like a sleigh ride.  In those cases, you might not want to leave that Bookable Product just sitting in your store without anyone being able to buy it.

Sure, you can go in and manually set them to draft, or private, but what if you have a LOT of them or don’t have the time to do that?

Here’s where Post Expirator can help!

Post Expirator has a lot of options, but my favourite part is that it adds this Meta Box to your WooCommerce Products:

Screen Shot 2016-03-07 at 11.33.44 AM

Just enable it, set an expiration date, and tell it how to expire!  Magic! 🙂