How to Create a Sticky Mobile Bottom Menu for Kadence or Astra Theme?

Probably you have seen on Amazon app that there is a nice looking sticky bottom mobile menu. Well, today I’m going to show you how to create a sticky mobile bottom menu for Kadence theme or Astra theme. Also, you can use this solution in every WordPress theme that uses hooks.

Kadence theme

SAVE 10% COUPON: SIMPLEHACKS

This is what we are creating today.

How to Create a Sticky Mobile Bottom Menu for Kadence or Astra Theme?
Sticky Mobile bottom menu with add to cart icon

How to Create a Sticky Mobile Bottom Menu for Kadence Pro Theme?

In this section we’ll take a look how to create a sticky mobile bottom menu using a Kadence Pro theme. This is a bit easier then with other themes.

Step 1: Create a three column fixed element

Go to Kadence >> Elements >> Add new and select Fixed as a type.

  • Placement: Fixed bottom (no space below footer)
  • Display: Entire website (or wherever you would like it to be shown)
  • User settings: All users (or particular group you would like it to be shown)
  • Device settings: Tablet and mobile

Step 2: Create a layout

Now go and create a layout using you favorite page builder. In this tutorial I‘m using the Kadence Blocks for Gutenberg plugin.

If you want to use the layout I created for the Woocommerce based site (seen in the screenshot above) then paste this code to your Gutenberg editor.

<!-- wp:kadence/rowlayout {"uniqueID":"_c40e75-87","columns":3,"mobileLayout":"equal","colLayout":"equal","maxWidth":1190,"topPaddingM":20,"bottomPaddingM":20,"bgColor":"#ffffff","verticalAlignment":"middle","topSep":"","topSepColor":"palette2","topSepHeight":49,"bottomSep":"","tabletPadding":[25,"",25,""],"topSepWidth":11,"bgColorClass":"white","vsdesk":true,"vstablet":true,"className":"sticky-bottom"} -->
<div class="wp-block-kadence-rowlayout alignnone kvs-lg-false kvs-md-false sticky-bottom"><div id="kt-layout-id_c40e75-87" class="kt-row-layout-inner kt-row-has-bg kt-layout-id_c40e75-87 has-white-background-color"><div class="kt-row-column-wrap kt-has-3-columns kt-gutter-default kt-v-gutter-default kt-row-valign-middle kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-equal"><!-- wp:kadence/column {"border":"#ebebeb","borderWidth":[0,1,0,0],"uniqueID":"_04d319-50"} -->
<div class="wp-block-kadence-column inner-column-1 kadence-column_04d319-50"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"icons":[{"icon":"fe_home","link":"https://pood.veebikoda.com/","target":"_self","size":27,"width":2,"title":"","color":"#444444","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default","marginTop":0,"marginRight":0,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""}],"uniqueID":"_437a62-3a"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons_437a62-3a aligncenter" style="text-align:center"><div class="kt-svg-style-default kt-svg-icon-wrap kt-svg-item-0"><a href="https://pood.veebikoda.com/" class="kt-svg-icon-link"><div style="display:inline-flex;justify-content:center;align-items:center;color:#444444" class="kt-svg-icon kt-svg-icon-fe_home"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="27" width="27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg></div></a></div></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"border":"#ebebeb","borderWidth":[0,1,0,0],"borderRadius":[0,0,0,0],"uniqueID":"_fc266b-6b","backgroundImg":[{"bgImg":"","bgImgID":"","bgImgSize":"cover","bgImgPosition":"center center","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat"}],"textAlign":["","",""],"shadow":[{"color":"#000000","opacity":0.2,"spread":0,"blur":14,"hOffset":0,"vOffset":0,"inset":false}]} -->
<div class="wp-block-kadence-column inner-column-2 kadence-column_fc266b-6b"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"icons":[{"icon":"fe_user","link":"https://pood.veebikoda.com/my-account/","target":"_self","size":27,"width":2,"title":"","color":"#444444","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default","marginTop":0,"marginRight":20,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""},{"icon":"fe_user","link":"https://pood.veebikoda.com/my-account/","target":"_self","size":27,"width":2,"title":"","color":"#444444","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default","marginTop":0,"marginRight":0,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""}],"uniqueID":"_ea8c73-2b"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons_ea8c73-2b aligncenter" style="text-align:center"><div class="kt-svg-style-default kt-svg-icon-wrap kt-svg-item-0"><a href="https://pood.veebikoda.com/my-account/" class="kt-svg-icon-link" style="margin-right:20px"><div style="display:inline-flex;justify-content:center;align-items:center;color:#444444" class="kt-svg-icon kt-svg-icon-fe_user"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="27" width="27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div></a></div></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":3,"border":"#ebebeb","borderWidth":[0,0,0,0],"borderRadius":[0,0,0,0],"uniqueID":"_517230-52","backgroundImg":[{"bgImg":"","bgImgID":"","bgImgSize":"cover","bgImgPosition":"center center","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat"}],"textAlign":["","",""],"shadow":[{"color":"#000000","opacity":0.2,"spread":0,"blur":14,"hOffset":0,"vOffset":0,"inset":false}]} -->
<div class="wp-block-kadence-column inner-column-3 kadence-column_517230-52"><div class="kt-inside-inner-col"><!-- wp:kadence/rowlayout {"uniqueID":"_c3279e-88","mobileLayout":"equal","collapseGutter":"none","columnGutter":"skinny","colLayout":"equal","currentTab":"mobile","maxWidth":1190,"topPaddingM":0,"bottomPaddingM":0} -->
<div class="wp-block-kadence-rowlayout alignnone"><div id="kt-layout-id_c3279e-88" class="kt-row-layout-inner kt-layout-id_c3279e-88"><div class="kt-row-column-wrap kt-has-2-columns kt-gutter-skinny kt-v-gutter-none kt-row-valign-top kt-row-layout-equal kt-tab-layout-inherit kt-m-colapse-left-to-right kt-mobile-layout-equal"><!-- wp:kadence/column {"uniqueID":"_a6ab46-78"} -->
<div class="wp-block-kadence-column inner-column-1 kadence-column_a6ab46-78"><div class="kt-inside-inner-col"><!-- wp:kadence/icon {"icons":[{"icon":"fe_shoppingBag","link":"https://pood.veebikoda.com/cart/","target":"_self","size":27,"width":2,"title":"","color":"#444444","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default","marginTop":0,"marginRight":0,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""}],"uniqueID":"_96883c-39","textAlignment":"right","tabletTextAlignment":"right","mobileTextAlignment":"right"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons_96883c-39 aligncenter" style="text-align:right"><div class="kt-svg-style-default kt-svg-icon-wrap kt-svg-item-0"><a href="https://pood.veebikoda.com/cart/" class="kt-svg-icon-link"><div style="display:inline-flex;justify-content:center;align-items:center;color:#444444" class="kt-svg-icon kt-svg-icon-fe_shoppingBag"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="27" width="27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg></div></a></div></div>
<!-- /wp:kadence/icon --></div></div>
<!-- /wp:kadence/column -->

<!-- wp:kadence/column {"id":2,"uniqueID":"_d2eeb7-9f"} -->
<div class="wp-block-kadence-column inner-column-2 kadence-column_d2eeb7-9f"><div class="kt-inside-inner-col"><!-- wp:shortcode -->
[woo_cart_but]
<!-- /wp:shortcode --></div></div>
<!-- /wp:kadence/column --></div></div></div>
<!-- /wp:kadence/rowlayout --></div></div>
<!-- /wp:kadence/column --></div></div></div>
<!-- /wp:kadence/rowlayout -->

Now publish and you are good to go.

How to Create a Sticky Mobile Bottom Menu for Kadence Free Theme?

Since Kadence free does not have the elements add-on we need to be a bit more creative here. Therefore go to Plugins >> Add new and search for Reusable Blocks Extended plugin.

Install and activate it and then go to Reusable Blocks >> Create new and create a layout as I showed you in the previous chapter.

Now, since I want to show the sticky mobile bottom bar only for tablets or mobiles then I have to set the rules using Kadence blocks row Visibility settings. Also, under the Advanced settings givt the row an additional CSS class “stiky-bottom”. We’re going to need it later.

See the screenshot.

How to Create a Sticky Mobile Bottom Menu for Kadence or Astra Theme?

Step 2: Copy the code snippet

In this step we are going to use Kadence hooks for showing our sticky mobile bottom bar. Therefore, either use the functions.php file in your child theme or better yet, use the Code Snippets plugin to add the code.

So, grab this code here below and paste it accordingly. Don’t forget to replace the [reblex=”212″] shortcode.

add_action( 'kadence_after_footer', 'kadence_sticky_mobile_bottom_bar', 20 );
function kadence_sticky_mobile_bottom_bar() {
	echo do_shortcode( "[reblex id='1303']" ); // Replace this shortcode here
}

Step 2: Add additional CSS

Now the bottom bar is visible but it’s not sticky. Let’s fixi with this custom CSS code here below. Paste it to the Customizer >> Additional CSS code bow and publish. Now you’re good to go.

.sticky-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(102,102,102,0.6); 
    box-shadow: 0px 0px 7px 0px rgba(102,102,102,0.6);
}

How to Create a Sticky Mobile Bottom Menu for Astra Theme?

If you have followed the tutorials above then everything is basically the same. Just use Astra related hook to show your sticky bottom mobile bar. Astra hooks can fe found here.

So, add this code here below to the functions.php or Code Snipepts code box.

add_action( 'astra_footer_after', 'astra_sticky_mobile_bottom_bar', 20 );
function astra_sticky_mobile_bottom_bar() {
	echo do_shortcode( '[reblex id="1361"]' ); // Replace the shortcode
}

NB! Don’t forget to paste the CSS code shown above to the Additional CSS box.

How to Add Ajax Item Count Next to the Woocommerce Cart Icon?

This is optional and you don’t have to do it. But if you want to show nice cart item count number next to the cart icon (see the screenshot above) then paste this code to the Code snippets code box. (thank you WP beaches)

add_shortcode ('woo_cart_but', 'woo_cart_but' );
/**
 * Create Shortcode for WooCommerce Cart Menu Item
 */
function woo_cart_but() {
	ob_start();
 
        $cart_count = WC()->cart->cart_contents_count; // Set variable for cart item count
        $cart_url = wc_get_cart_url();  // Set Cart URL
  
        ?>
        <a class="menu-item cart-contents" href="<?php echo $cart_url; ?>" title="My Basket">
	    <?php
        if ( $cart_count > 0 ) {
       ?>
            <span class="cart-contents-count"><?php echo $cart_count; ?></span>
        <?php
        }
        ?>
        </a>
        <?php
	        
    return ob_get_clean();
 
}

// Ajaxify

add_filter( 'woocommerce_add_to_cart_fragments', 'woo_cart_but_count' );
/**
 * Add AJAX Shortcode when cart contents update
 */
function woo_cart_but_count( $fragments ) {
 
    ob_start();
    
    $cart_count = WC()->cart->cart_contents_count;
    $cart_url = wc_get_cart_url();
    
    ?>
    <a class="cart-contents menu-item" href="<?php echo $cart_url; ?>" title="<?php _e( 'View your shopping cart' ); ?>">
	<?php
    if ( $cart_count > 0 ) {
        ?>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
        <?php            
    }
        ?></a>
    <?php
 
    $fragments['a.cart-contents'] = ob_get_clean();
     
    return $fragments;
}

Next, go to the Reusable Blocks or Kadence element you created earlier and add thw [woo_cart_but) shortcode in the place you would like it to be shown.

Now go to the Customizer >> Addtitional CSS and paste this code and save.

.cart-contents {
    position: relative;
    text-decoration: none;
}
.cart-contents-count {
	position: absolute;
        top: 12px;
   	right: 1px;
   	transform: translateY(-105%) translateX(25%);
	font-size: 12px;
	line-height: 22px;
	height: 24px;
        width: 24px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
        background: #000;
        border-radius: 50%;
        padding: 1px;  
}

If everything is OK then it should look like this.

How to Add Ajax Item Count Next to the Cart Icon?

Useful Tips

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Default image
Janek T.
I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce. If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here Follow me in Twitter here
Articles: 72