Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WooCommerce
Theming with Storefront
 Merrill M. Mayer
 Kool Kat Web Designs
 http://www.koolkatwebdesigns.com/
 merrill@koolkatwebdesigns.com
 @koolkatweb
Why Storefront
 Based on Underscores
 WooCommerce Integration
 Schema Markup
 Extensions
Ways to Customize
 Extensions
 Storefront Child Themes
 Build your Own Child Theme
Child Theme Review
A basic child theme consists of:
• Child Theme Directory
• style.css
• functions.php
The Starting Point
The Goal
Styles
 Custom styles go into the child theme’s stylesheet.
 Storefront uses the SASS pre-processor
Fonts
 Enqueue the Google fonts we want to use.
 Dequeue the Google fonts we want to use in the
Storefront theme we do n...
Storefront Hooks
 Hooks or actions and filters are defined in the inc
directory of the Storefront theme.
 There are 3 im...
Theme Setup
add_action( 'after_setup_theme',
'sevennotrump_setup_theme', 20 );
Getting the Correct Logo Size
remove_theme_support( 'custom-logo' );
add_theme_support( 'custom-logo', array(
'height' => ...
Clear Up the Clutter
//remove the breadcrumbs
remove_action( 'storefront_content_top',
'woocommerce_breadcrumb', 10 );
//r...
Customize the Header
add_action ( 'sevennotrump_header',
'sevennotrump_top_header' );
The Header
Handling the Header
function sevennotrump_top_header() {
remove_action( 'storefront_header',
'storefront_skip_links', 0 );...
Storefront Functions
if ( has_nav_menu( 'secondary' ) ) { ?>
<div class="secondary-nav-container">
<nav …>
//wp_nav_menu c...
Branding Overrides
function storefront_site_branding() {
//html for card players text goes here
//then get the logo
storef...
Home Page Overrides
function storefront_homepage_content() {
while ( have_posts() ) {
the_post();
get_template_part( 'cont...
The Goal
Thank You
Upcoming SlideShare
Loading in …5
×

Woocommerce theming with Storefront

17,517 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Woocommerce theming with Storefront

  1. 1. WooCommerce Theming with Storefront
  2. 2.  Merrill M. Mayer  Kool Kat Web Designs  http://www.koolkatwebdesigns.com/  merrill@koolkatwebdesigns.com  @koolkatweb
  3. 3. Why Storefront  Based on Underscores  WooCommerce Integration  Schema Markup  Extensions
  4. 4. Ways to Customize  Extensions  Storefront Child Themes  Build your Own Child Theme
  5. 5. Child Theme Review A basic child theme consists of: • Child Theme Directory • style.css • functions.php
  6. 6. The Starting Point
  7. 7. The Goal
  8. 8. Styles  Custom styles go into the child theme’s stylesheet.  Storefront uses the SASS pre-processor
  9. 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. 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. 11. Theme Setup add_action( 'after_setup_theme', 'sevennotrump_setup_theme', 20 );
  12. 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. 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. 14. Customize the Header add_action ( 'sevennotrump_header', 'sevennotrump_top_header' );
  15. 15. The Header
  16. 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. 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. 18. Branding Overrides function storefront_site_branding() { //html for card players text goes here //then get the logo storefront_site_title_or_logo(); }
  19. 19. Home Page Overrides function storefront_homepage_content() { while ( have_posts() ) { the_post(); get_template_part( 'content', 'homepage' ); } // end of the loop. }
  20. 20. The Goal
  21. 21. Thank You

×