Points to consider
If we use Elementor based header & footer in an eCommerce store powered by the StoreFront theme, we lose the Sticky Add-to-cart bar on desktop and handheld footer bar on mobile.
We will put our code in a child theme.
To support Elementor Locations, the theme needs to register supported location in the functions.php file.
Registering some of the core locations is done using the following code:
function bcloud_register_elementor_locations( $elementor_theme_manager ) {
$elementor_theme_manager->register_location( 'header' );
$elementor_theme_manager->register_location( 'footer' );
// $elementor_theme_manager->register_location( 'single' );
// $elementor_theme_manager->register_location( 'archive' );
}
add_action( 'elementor/theme/register_locations', 'bcloud_register_elementor_locations' );
Then we will add header.php and footer.php files to storefront child theme.
If we have Elementor based footer for a page then we need to remove the storefront_footer_widget & storefront_credit functions from the storefront_footer action. We need to run storefront_footer action as this action has function storefront_handheld_footer_bar hooked up.
Content of footer.php file:
<?php
/**
* The template for displaying the footer.
*
* Contains the body & html closing tags.
*
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
?>
</div><!-- .col-full -->
</div><!-- #content -->
<?php
do_action( 'storefront_before_footer' );
if ( function_exists( 'elementor_theme_do_location' ) && elementor_theme_do_location( 'footer' ) ) {
// if Elementor footer template is set then remove StoreFront Footer Widget & Credit functions.
// We still need the handheld footer bar
remove_action('storefront_footer', 'storefront_footer_widgets', 10);
remove_action('storefront_footer', 'storefront_credit', 20);
}
?>
<!-- style attribute added by Salil -->
<footer id="colophon" class="site-footer" style="padding: 0px;" role="contentinfo">
<div class="col-full">
<?php
/**
* Functions hooked in to storefront_footer action
*
* @hooked storefront_footer_widgets - 10
* @hooked storefront_credit - 20
*/
do_action( 'storefront_footer' );
?>
</div><!-- .col-full -->
</footer><!-- #colophon -->
<?php
do_action( 'storefront_after_footer' );
?>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
And to include the sticky add-to-cart we need to run storefront_after_footer action as the function storefront_sticky_single_add_to_cart is hooked to this action.
To use the Elementor header in site, we need to add header.php.
Content of header.php file:
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* @package storefront
*/
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php do_action( 'storefront_before_site' ); ?>
<div id="page" class="hfeed site">
<?php do_action( 'storefront_before_header' );
// Salil's code
// If elementor's header not set then set StoreFront's header
if ( ! function_exists( 'elementor_theme_do_location' ) || ! elementor_theme_do_location( 'header' ) ) {
?>
<header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>">
<?php
/**
* Functions hooked into storefront_header action
*
* @hooked storefront_header_container - 0
* @hooked storefront_skip_links - 5
* @hooked storefront_social_icons - 10
* @hooked storefront_site_branding - 20
* @hooked storefront_secondary_navigation - 30
* @hooked storefront_product_search - 40
* @hooked storefront_header_container_close - 41
* @hooked storefront_primary_navigation_wrapper - 42
* @hooked storefront_primary_navigation - 50
* @hooked storefront_header_cart - 60
* @hooked storefront_primary_navigation_wrapper_close - 68
*/
do_action( 'storefront_header' );
?>
</header><!-- #masthead -->
<?php } ?>
<?php
/**
* Functions hooked in to storefront_before_content
*
* @hooked storefront_header_widget_region - 10
* @hooked woocommerce_breadcrumb - 10
*/
do_action( 'storefront_before_content' );
?>
<div id="content" class="site-content" tabindex="-1">
<div class="col-full">
<?php
do_action( 'storefront_content_top' );
Most of the code above is an exact copy of the header.php file in the StoreFront theme. We just need to add a condition to check and run the Elementor header and if it is not set for the page, add the StoreFront’s header.
Now we have replace StoreFront’s header and footer with Elementor’s header & footer but we have kept Sticky Add-to-cart and handheld footer bar.
