SlideShare a Scribd company logo
1 of 21
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 not need.
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
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' => 720,
'width' => 720,
'flex-width' => true,
) );
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 );
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 );
remove_action( 'storefront_header’,
'storefront_secondary_navigation', 30 );
remove_action( 'storefront_header',
'storefront_header_cart', 60 );
storefront_skip_links();
storefront_secondary_navigation();
}
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
}
Branding Overrides
function storefront_site_branding() {
//html for card players text goes here
//then get the logo
storefront_site_title_or_logo();
}
Home Page Overrides
function storefront_homepage_content() {
while ( have_posts() ) {
the_post();
get_template_part( 'content',
'homepage' );
} // end of the loop.
}
The Goal
Thank You

More Related Content

What's hot

Amazon seo best practices 2021
Amazon seo best practices 2021Amazon seo best practices 2021
Amazon seo best practices 2021AmeliaWright14
 
Intro To Magento CMXExpo 09
Intro To Magento CMXExpo 09Intro To Magento CMXExpo 09
Intro To Magento CMXExpo 09Jonathan Lackey
 
Inside the Content Marketing Playbook - Marcom Productions Presents: Point of...
Inside the Content Marketing Playbook - Marcom Productions Presents: Point of...Inside the Content Marketing Playbook - Marcom Productions Presents: Point of...
Inside the Content Marketing Playbook - Marcom Productions Presents: Point of...Marcom Productions
 
Ooorza Magento Extension FAQs
Ooorza Magento Extension FAQsOoorza Magento Extension FAQs
Ooorza Magento Extension FAQsOoorza .com
 
Website Visibility- Here is SEO Tips To Enhance Search Engine Ranking
Website Visibility- Here is SEO Tips To Enhance Search Engine RankingWebsite Visibility- Here is SEO Tips To Enhance Search Engine Ranking
Website Visibility- Here is SEO Tips To Enhance Search Engine RankingBrandie Davis
 
Shopify & Shopify Plus Ecommerce Development Experts
Shopify & Shopify Plus Ecommerce Development Experts Shopify & Shopify Plus Ecommerce Development Experts
Shopify & Shopify Plus Ecommerce Development Experts Folio3 Software
 

What's hot (6)

Amazon seo best practices 2021
Amazon seo best practices 2021Amazon seo best practices 2021
Amazon seo best practices 2021
 
Intro To Magento CMXExpo 09
Intro To Magento CMXExpo 09Intro To Magento CMXExpo 09
Intro To Magento CMXExpo 09
 
Inside the Content Marketing Playbook - Marcom Productions Presents: Point of...
Inside the Content Marketing Playbook - Marcom Productions Presents: Point of...Inside the Content Marketing Playbook - Marcom Productions Presents: Point of...
Inside the Content Marketing Playbook - Marcom Productions Presents: Point of...
 
Ooorza Magento Extension FAQs
Ooorza Magento Extension FAQsOoorza Magento Extension FAQs
Ooorza Magento Extension FAQs
 
Website Visibility- Here is SEO Tips To Enhance Search Engine Ranking
Website Visibility- Here is SEO Tips To Enhance Search Engine RankingWebsite Visibility- Here is SEO Tips To Enhance Search Engine Ranking
Website Visibility- Here is SEO Tips To Enhance Search Engine Ranking
 
Shopify & Shopify Plus Ecommerce Development Experts
Shopify & Shopify Plus Ecommerce Development Experts Shopify & Shopify Plus Ecommerce Development Experts
Shopify & Shopify Plus Ecommerce Development Experts
 

Similar to Woocommerce theming with Storefront

Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016David Brattoli
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress ThemesLaura Hartwig
 
10 Steps to Becoming a WordPress Theme Ninja
10 Steps to Becoming a WordPress Theme Ninja10 Steps to Becoming a WordPress Theme Ninja
10 Steps to Becoming a WordPress Theme NinjaTony Cecala, Ph.D.
 
Miva ReadyThemes for Store Owners
Miva ReadyThemes for Store OwnersMiva ReadyThemes for Store Owners
Miva ReadyThemes for Store OwnersMiva
 
advance theme development
advance theme developmentadvance theme development
advance theme development1amitgupta
 
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)Kelly Dwan
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesMichelle Ames
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3David Bisset
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress WebsitesKyle Cearley
 
Child Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesChild Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesDamien Carbery
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme EnlightenmentAmanda Giles
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Joe Querin
 
Sitecore 10 XC SXA frontend development using the SXA Storefront Branded
Sitecore 10 XC SXA frontend development using the SXA Storefront BrandedSitecore 10 XC SXA frontend development using the SXA Storefront Branded
Sitecore 10 XC SXA frontend development using the SXA Storefront BrandedSerge van den Oever
 
Wordpress and Your Brand
Wordpress and Your BrandWordpress and Your Brand
Wordpress and Your BrandSara Cannon
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme developmentNaeem Junejo
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWPJoburg
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Thomas Daly
 
Building themesfromscratchwithframeworks
Building themesfromscratchwithframeworksBuilding themesfromscratchwithframeworks
Building themesfromscratchwithframeworksDavid Brattoli
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPressJeff Cohan
 

Similar to Woocommerce theming with Storefront (20)

Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
 
Theme guide
Theme guideTheme guide
Theme guide
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
10 Steps to Becoming a WordPress Theme Ninja
10 Steps to Becoming a WordPress Theme Ninja10 Steps to Becoming a WordPress Theme Ninja
10 Steps to Becoming a WordPress Theme Ninja
 
Miva ReadyThemes for Store Owners
Miva ReadyThemes for Store OwnersMiva ReadyThemes for Store Owners
Miva ReadyThemes for Store Owners
 
advance theme development
advance theme developmentadvance theme development
advance theme development
 
Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)Intro to WordPress Child Themes (NERDS Sept 2014)
Intro to WordPress Child Themes (NERDS Sept 2014)
 
WordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child ThemesWordPress HTML, CSS & Child Themes
WordPress HTML, CSS & Child Themes
 
WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3WordPress Theme Workshop: Part 3
WordPress Theme Workshop: Part 3
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
 
Child Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesChild Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notes
 
The Way to Theme Enlightenment
The Way to Theme EnlightenmentThe Way to Theme Enlightenment
The Way to Theme Enlightenment
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
Sitecore 10 XC SXA frontend development using the SXA Storefront Branded
Sitecore 10 XC SXA frontend development using the SXA Storefront BrandedSitecore 10 XC SXA frontend development using the SXA Storefront Branded
Sitecore 10 XC SXA frontend development using the SXA Storefront Branded
 
Wordpress and Your Brand
Wordpress and Your BrandWordpress and Your Brand
Wordpress and Your Brand
 
Wordpress theme development
Wordpress theme developmentWordpress theme development
Wordpress theme development
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013
 
Building themesfromscratchwithframeworks
Building themesfromscratchwithframeworksBuilding themesfromscratchwithframeworks
Building themesfromscratchwithframeworks
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPress
 

Recently uploaded

TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxNIMMANAGANTI RAMAKRISHNA
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 

Recently uploaded (11)

TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptx
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 

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
  • 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
  • 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' );
  • 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. }

Editor's Notes

  1. 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.
  2. 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
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. 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.
  8. ENQUEUE Use the WordPress action wp_enqueue_scripts without any priority so it is in place before the stylesheets DEQUEUE 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
  9. 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
  10. The next few items will all appear as part of the setup theme function
  11. Remove unwanted elements from the home page. Replace the storefront credit with our own
  12. This is the action we call to change the header. Show pics of original again.
  13. 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
  14. 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.
  15. Same principal of overriding functions
  16. 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.
  17. Hopefully our goal is achieved!
  18. Mention redirects for shop page and single product page