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.

How-to: Generate a POT file for a WordPress Theme or Plugin

Translation files are a very important part of the WordPress ecosystem. They allow your plugin or theme to be used by people in all languages. So, you need them.  It’s less of a suggestion and more of a requirement 😉 Continue reading “How-to: Generate a POT file for a WordPress Theme or Plugin”

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!

Converting epub books to mobi with Kindlegen

I have an old Kindle Reader from 2012 that I use pretty often.  The problem I have with Kindles is that they don’t support epub books, only mobi. Sometimes I’ll download someone’s ebook and want to have it on my Kindle, and most processes for converting the files are pretty crappy and time consuming.

Enter Kindlegen.

It’s a super easy application you run from the Terminal to convert epub formatted ebooks into mobi formatted ebooks, and it’s free!

To run kindlegen, just download it from the link above, and open up a Terminal, and do this:

/path/to/kindlegen /path/to/book.epub

And that’s it!  You now have a newly formatted mobi book ready to go for your Kindle.