How to create a custom look and feel using the WooCommerce Storefront theme

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