Categories
Storefront WooCommerce

Add a Slider to Storefront

This is going to be a step-by-step tutorial on how to add a Slider to the Storefront theme.  In this example I’m using <a href=”https://en-ca.wordpress.org/plugins/ml-slider/”>Meta Slider</a> but really you can use any slider of choice!  Why Meta Slider? It’s free and it works.

Categories
Storefront WooCommerce

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.

Categories
CSS WooCommerce

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.

Categories
Storefront WooCommerce

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:

Categories
themes WooCommerce

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.

<?php
// Add this to your theme's functions.php
function marce_change_custom_logo_size() {
add_theme_support( 'custom-logo', array(
'height' => 400,
'width' => 400,
'flex-width' => true,
) );
}
add_action( 'after_setup_theme', 'marce_change_custom_logo_size', 30 );

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.