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

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! 🙂

Change order of Available Downloads in WooCommerce

If you’re running WooCommerce and you sell digital products, here’s how you can change their order.

By default, WooCommerce will order them from Oldest > Newest.  So the first products you ordered go first, and the latest products you ordered go at the bottom.   If it’s a subscription site, where customers continually get new digital downloads, it might be nice to have the latest downloads on top.

The first thing you will need to do is make a copy of the WooCommerce template, into your theme.  You’re probably using a Child Theme, right?

    1. Copy
      woocommerce/templates/my-account/my-downloads.php

      into

      yourtheme/woocommerce/my-account/my-downloads.php

      If your theme already has this file there, you can just make your edits there.

    2. Change this line
      <?php foreach ( $downloads as $download ) : ?>

      to this

      <?php foreach ( array_reverse($downloads) as $download ) : ?>
    3. That’s it!  PHP’s array_reverse does all the magic for you.  Now all your Available Downloads will be ordered with the newest on the top.

      Screen Shot 2015-10-19 at 2.00.50 PM
      The order has been changed!