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
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
10 facts about jobs in the future
Next
Upcoming SlideShare
10 facts about jobs in the future
Next
Download to read offline and view in fullscreen.

Share

Woocommerce theming with Storefront

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

32,784

On Slideshare

0

From embeds

0

Number of embeds

23,705

Actions

Downloads

5

Shares

0

Comments

0

Likes

0

×