Successfully reported this slideshow.
Your SlideShare is downloading. ×

Woocommerce theming with Storefront

Loading in …3

Check these out next

1 of 21 Ad

More Related Content

Similar to Woocommerce theming with Storefront (20)


Recently uploaded (20)

Woocommerce theming with Storefront

  1. 1. WooCommerce Theming with Storefront
  2. 2.  Merrill M. Mayer  Kool Kat Web Designs    @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

Editor's Notes

  • I am the owner and web developer at Kool Kat Web Designs. I work with designers to create custom solutions for small to medium sized businesses and non-profits.
  • Mention that the theme itself does not have bells and whistles like sliders and page builders but is compatible with many that can be added on as plugins. It responsive, accessible

    Mention schema markup is for SEO

    Mention that I am using the free hamburger menu extension

  • Extensions include mega menus, pagination, reviews and other

    Themes for book stores, toy stores, etc.

    Build your Own Child Theme and Use Storefront Actions and Filters. Override Storefront functions.

    We will discuss the third option today.
  • How to create a child theme. Style sheet includes parent template.

    Note that we don’t need to enqueue stylesheet

    For a Storefront child theme, parent and child CSS files are already enqueued. This works by checking if the theme is a child them and then enqueueing the stylesheet.
  • Once we have our child theme in place. We can begin the transformation. Our basic goal is to go from the out of the box Storefront theme to the specified design.
  • Once we have our child them in place. We can begin the transformation. Our basic goal is to go from the out of the box Storefront theme to the specified design.

    Site still under development
  • Note: Storefront actually uses the SASS pre-processor. You may also use this in your own styles.
    Storefront uses both Susy and Bourbon modules. In my project, I used SASS and imported the Susy modules, too. I used a GRUNT job to compile the SASS into CSS.

    Use the WordPress action wp_enqueue_scripts without any priority so it is in place before the stylesheets

    Use the WordPress action wp_enqueue_scripts with a high priority so it removed after the parent theme enqueues it

    Note the separate calls to enqueue scripts so actions happen in the correct order. We are using Lato and Merriweather
  • 1. class-storefront.php which sets up theme supports, scripts and widgets
    2. storefront-template-hooks.php which defines the hooks and priorities
    3. storefront-template-functions.php which contains the implementations
  • The next few items will all appear as part of the setup theme function
  • Remove unwanted elements from the home page. Replace the storefront credit with our own
  • This is the action we call to change the header. Show pics of original again.
  • Move around items. We want the secondary nav at the top before the logo. And we want the cart to be part of the secondary nav, not the primary. Notice that we call a couple of Storefront functions:

    So, lets look at storefornt_secondary_navigation
  • Since the storefront theme uses if (function_exists) when calling storefront_secondary_navigation() we can easily override that function with our own code. In other words, the parent theme function will not get called because there is a function of the same name in our child theme

    Here we call the secondary menu code to display the menu and add the header cart as part of that menu.

    And since we removed the storefront_secondary_menu action, the search gets moved after the site branding as it is the next action. Of course, it is formatted differently, too. We use the standard woocommerce “get_product_search_form filter to separate out the search button.
  • Same principal of overriding functions
  • Again we use the principal of overriding functions

    We also create a file content-homepage.php which displays the images, links and text for the home page. I used ACF repeater here to store this info.
  • Hopefully our goal is achieved!
  • Mention redirects for shop page and single product page