Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

Woocommerce theming with Storefront

26 628 vues

Publié le

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

Publié dans : Internet
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×