Plugin: Storefront Hooks Customizer

While working with Storefront over the past years, one common request I see is that folks need a way to “insert” other content into areas that might not always have a Widget or content area.  I wanted to make a solution that was more friendly, especially to folks that might not be comfortable with writing php code.

Continue reading “Plugin: Storefront Hooks Customizer”

Advertisements

How to override WooCommerce Image Sizes

Image sizes are not always fun to deal with in WordPress.

Where are they set?  Where do I change them?  Why are my images not showing up as the right size?

In this guide, we’re going to cover all the basics of how image sizes are set, and how to override each individual image size to make sure your site has the right image sizes you need.

What are the image sizes?

  1. Catalog Image
    Image name: woocommerce_thumbnail
    The catalog image is the image that shows in an archive page like the Shop or a Category page.
  2. Single Product Image
    Image name: woocommerce_single
    The single product image is the main image that will show when viewing a single product page:
  3. Product Gallery
    Image name: woocommerce_gallery_thumbnail
    The product gallery shows underneath the main product image on the single product page:

Where are the image sizes set?

Let’s take a default theme like Twenty Seventeen and look to see where the image sizes come from.

Interestingly, the sizes are not set on the theme!  WooCommerce has default image sizes for all the default themes:

As you can see, WooCommerce sets the thumbnail_image_width to 250, and the single_image_width to 350.  The gallery_thumbnail however, is not set so it uses the default 100 x 100 pixel size from WooCommerce.

What if my theme doesn’t declare a custom image size?

If that’s the case, the woocommerce_thumbnail and the woocommerce_single images will be set through the Customizer:

The gallery_thumbnailis going to use the default 100 pixels in this case.

What about the Storefront theme?

Storefront currently set’s the woocommerce_single and woocommerce_thumbnail sizes like this:

How do I override an image size?

woocommerce_single

Here’s an example of how you can override the woocommerce-single image:

In this example, we’re setting the width to 400, the height to “automatic”, and we are not cropping the image by default.

If you wanted to set the image to a specific size and crop it to fit, you would do this:

woocommerce_thumbnail

This snippet will change the woocommerce_thumbnail image to 500 x 500 pixels and crop the image.

woocommerce_gallery_thumbnail

The snippet above will make the single product gallery images 400 x 400 pixels.

What if my image sizes are not showing up as the right size?

What most often happens is that the image sizes are being set correctly, but the theme files are still putting them in containers that are smaller.  For example, in Storefront, if I set the gallery_thumbnail size to 500, they still show smaller because they are given a percentage width based on how many gallery images there are.  If you have 4 images, for example, each one gets a width: 14.2857142857%;  so your images are much smaller than 500 pixels.

The best thing to do in these cases is to make sure the image size is being loaded properly in the markup, and then see if there are any CSS conflicts that are making the image load smaller:

When you change an image size, you might need to regenerate your thumbnails for the new sizes to be created.  To do that, you can use a plugin like Regenerate Thumbnails.

More helpful documentation can be found here: https://github.com/woocommerce/woocommerce/wiki/Customizing-image-sizes-in-3.3

Overriding Parent Functions from a Child Theme

There is a great post, albeit a bit old (2015) on tutsplus.com about overriding parent functions:
A Guide to Overriding Parent Theme Functions in Your Child Theme

Here is my tl;dr version:

1. Even when using a Child Theme, all of your Parent Theme functions will still run.
2. The functions in your child theme will be loaded before the functions in the parent theme.
3. Priority is very important. Higher priority wins.
4. If you are simply removing an action or filter, you need to do it from inside a function because that will ensure it runs AFTER the parent one has run.

As someone who often edits other people’s themes, these are very useful tools to know!

Simply Show Hooks and How to Use Them

Back in the day, I used to do a lot of client sites using things like the Genesis Framework and Canvas.  I would use a child theme to make CSS style changes and add functions to add in other aspects of the site without having to manually edit templates.

In this tutorial, we will go through how to find a theme’s hooks and how to add content to them.  We’ll use Twenty Seventeen as the example theme.

Continue reading “Simply Show Hooks and How to Use Them”

Theme Resources: The Theme Handbook

I run a local WordPress Meetup and so I have the privilege of meeting a lot of folks early in the WordPress journey.  One question I get often from people just starting out to create their own themes is this:

Where should I go to learn more?  

Luckily we have an amazing Theme Handbook on WordPress.org that covers all the basics of creating themes:

WordPress Theme Developer Handbook

Even if you’ve been doing it for years, it’s still a good place to check to make sure you’re doing things the best way possible.

Some highlights include:

Using the Customizer API

Localization (a personal favourite)

Accessibility

Releasing your Theme

The whole thing is great so make sure to take advantage of it!  Of course, you can always join the Documentation Team and contribute to this yourself.

Storefront: Change the basket icon to a cart icon

Someone asked me today, why does the shopping cart had an icon of a basket instead of a cart?  It’s called the “cart” after all, right?  The URL says cart, and WooCommerce says cart, but there’s an icon of a basket.

Here you can see the default “cart” icon on the Storefront menu:

It also appears on mobile in the “handheld menu” on the bottom:

If you want to change these icons from a basket to a cart, here’s a bit of CSS I wrote that will do the trick (as of Storefront 2.2.4):

Result: