This document discusses customizing the Storefront theme for WooCommerce. It provides an overview of Storefront and explains that it can be customized through extensions, child themes, or building a custom child theme. It then reviews how to build a basic child theme and customize aspects like styles, fonts, hooks, and more. Specific code examples are given for customizing the header, branding, homepage content, and other areas. The goal is to show how to override and extend the Storefront theme functionality to customize it for a specific site.

1. WooCommerce
Theming with Storefront

2.  Merrill M. Mayer
 Kool Kat Web Designs
 http://www.koolkatwebdesigns.com/
 merrill@koolkatwebdesigns.com
 @koolkatweb

3. Why Storefront
 Based on Underscores
 WooCommerce Integration
 Schema Markup
 Extensions

4. Ways to Customize
 Extensions
 Storefront Child Themes
 Build your Own Child Theme

5. Child Theme Review
A basic child theme consists of:
• Child Theme Directory
• style.css
• functions.php

6. The Starting Point

7. The Goal

8. Styles
 Custom styles go into the child theme’s stylesheet.
 Storefront uses the SASS pre-processor

9. Fonts
 Enqueue the Google fonts we want to use.
 Dequeue the Google fonts we want to use in the
Storefront theme we do not need.

10. Storefront Hooks
 Hooks or actions and filters are defined in the inc
directory of the Storefront theme.
 There are 3 important files:
 class-storefront.php
 storefront-template-hooks.php
 storefront-template-functions.php

11. Theme Setup
add_action( 'after_setup_theme',
'sevennotrump_setup_theme', 20 );

12. Getting the Correct Logo Size
remove_theme_support( 'custom-logo' );
add_theme_support( 'custom-logo', array(
'height' => 720,
'width' => 720,
'flex-width' => true,
) );

13. Clear Up the Clutter
//remove the breadcrumbs
remove_action( 'storefront_content_top',
'woocommerce_breadcrumb', 10 );
//remove homepage actions we dont use
remove_action( 'homepage', 'storefront_product_categories', 20 );
remove_action( 'homepage', 'storefront_recent_products', 30 );
remove_action( 'homepage', 'storefront_popular_products', 50 );
remove_action( 'homepage', 'storefront_on_sale_products', 60 );
remove_action( 'homepage', 'storefront_best_selling_products', 70 );
//remove storefront footer credits
remove_action( 'storefront_footer', 'storefront_credit', 20 );
//add custom credit
add_action( 'storefront_footer',
'sevennotrump_storefront_credit', 20 );

14. Customize the Header
add_action ( 'sevennotrump_header',
'sevennotrump_top_header' );

15. The Header

16. Handling the Header
function sevennotrump_top_header() {
remove_action( 'storefront_header',
'storefront_skip_links', 0 );
remove_action( 'storefront_header’,
'storefront_secondary_navigation', 30 );
remove_action( 'storefront_header',
'storefront_header_cart', 60 );
storefront_skip_links();
storefront_secondary_navigation();
}

17. Storefront Functions
if ( has_nav_menu( 'secondary' ) ) { ?>
<div class="secondary-nav-container">
<nav …>
//wp_nav_menu code goes here
storefront_header_cart();
?>
</nav><!-- #site-navigation -->
</div>
<?php
}

18. Branding Overrides
function storefront_site_branding() {
//html for card players text goes here
//then get the logo
storefront_site_title_or_logo();
}

19. Home Page Overrides
function storefront_homepage_content() {
while ( have_posts() ) {
the_post();
get_template_part( 'content',
'homepage' );
} // end of the loop.
}

20. The Goal

21. Thank You