Mikey Arce

close-up web magic

Category: 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.

    (more…)

  • 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:

    (more…)

  • 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 );

    view raw

    storefront_custom_logo_size.php

    hosted with ❤ by GitHub

    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.

    (more…)

  • 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/order/order-downloads.php

        into

        yourtheme/woocommerce/order/order-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!