In all probability you’ve got seen on Amazon app that there’s a good wanting sticky backside cellular menu. Nicely, as we speak I’m going to point out you create a sticky cellular backside menu for Kadence theme or Astra theme. Additionally, you need to use this answer in each WordPress theme that makes use of hooks.
That is what we’re creating as we speak.
Methods to Create a Sticky Cellular Backside Menu for Kadence Professional Theme?
On this part we’ll have a look create a sticky cellular backside menu utilizing a Kadence Professional theme. It is a bit simpler then with different themes.
Step 1: Create a 3 column fastened aspect
Go to Kadence >> Parts >> Add new and choose Mounted as a sort.
- Placement: Mounted backside (no area beneath footer)
- Show: Whole web site (or wherever you want to it to be proven)
- Person settings: All customers (or explicit group you want to it to be proven)
- Machine settings: Pill and cellular
Step 2: Create a format
Now go and create a format utilizing you favourite web page builder. On this tutorial I‘m utilizing the Kadence Blocks for Gutenberg plugin.
If you wish to use the format I created for the Woocommerce primarily based website (seen within 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":"center","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","hyperlink":"https://pood.veebikoda.com/","goal":"_self","dimension":27,"width":2,"title":"","shade":"#444444","background":"clear","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"type":"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" type="text-align:heart"><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 type="show:inline-flex;justify-content:heart;align-items:heart;shade:#444444" class="kt-svg-icon kt-svg-icon-fe_home"><svg type="show:inline-block;vertical-align:center" viewbox="0 0 24 24" peak="27" width="27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="spherical" stroke-linejoin="spherical"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline factors="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":"cowl","bgImgPosition":"heart heart","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat"}],"textAlign":["","",""],"shadow":[{"shade":"#000000","opacity":0.2,"unfold":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","hyperlink":"https://pood.veebikoda.com/my-account/","goal":"_self","dimension":27,"width":2,"title":"","shade":"#444444","background":"clear","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"type":"default","marginTop":0,"marginRight":20,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""},{"icon":"fe_user","hyperlink":"https://pood.veebikoda.com/my-account/","goal":"_self","dimension":27,"width":2,"title":"","shade":"#444444","background":"clear","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"type":"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" type="text-align:heart"><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" type="margin-right:20px"><div type="show:inline-flex;justify-content:heart;align-items:heart;shade:#444444" class="kt-svg-icon kt-svg-icon-fe_user"><svg type="show:inline-block;vertical-align:center" viewbox="0 0 24 24" peak="27" width="27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="spherical" stroke-linejoin="spherical"><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":"cowl","bgImgPosition":"heart heart","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat"}],"textAlign":["","",""],"shadow":[{"shade":"#000000","opacity":0.2,"unfold":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":"cellular","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","hyperlink":"https://pood.veebikoda.com/cart/","goal":"_self","dimension":27,"width":2,"title":"","shade":"#444444","background":"clear","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"type":"default","marginTop":0,"marginRight":0,"marginBottom":0,"marginLeft":0,"hColor":"palette1","hBackground":"","hBorder":""}],"uniqueID":"_96883c-39","textAlignment":"proper","tabletTextAlignment":"proper","mobileTextAlignment":"proper"} -->
<div class="wp-block-kadence-icon kt-svg-icons kt-svg-icons_96883c-39 aligncenter" type="text-align:proper"><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 type="show:inline-flex;justify-content:heart;align-items:heart;shade:#444444" class="kt-svg-icon kt-svg-icon-fe_shoppingBag"><svg type="show:inline-block;vertical-align:center" viewbox="0 0 24 24" peak="27" width="27" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="spherical" stroke-linejoin="spherical"><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’re good to go.
Methods to Create a Sticky Cellular Backside Menu for Kadence Free Theme?
Since Kadence free doesn’t have the weather add-on we must be a bit extra inventive right here. Due to this fact go to Plugins >> Add new and seek for Reusable Blocks Prolonged plugin.
Set up and activate it after which go to Reusable Blocks >> Create new and create a format as I confirmed you within the earlier chapter.
Now, since I need to present the sticky cellular backside bar just for tablets or mobiles then I’ve to set the principles utilizing Kadence blocks row Visibility settings. Additionally, beneath the Superior settings givt the row a further CSS class “stiky-bottom”. We’re going to wish it later.
See the screenshot.
Step 2: Copy the code snippet
On this step we’re going to use Kadence hooks for displaying our sticky cellular backside bar. Due to this fact, both use the features.php file in your youngster theme or higher but, use the Code Snippets plugin so as to add the code.
So, seize this code right here beneath and paste it accordingly. Don’t neglect to switch the [reblex=”212″] shortcode.
add_action( 'kadence_after_footer', 'kadence_sticky_mobile_bottom_bar', 20 );
perform kadence_sticky_mobile_bottom_bar() {
echo do_shortcode( "[reblex id='1303']" ); // Change this shortcode right here
}Step 2: Add further CSS
Now the underside bar is seen nevertheless it’s not sticky. Let’s fixi with this tradition CSS code right here beneath. Paste it to the Customizer >> Extra CSS code bow and publish. Now you’re good to go.
.sticky-bottom {
place: fastened;
left: 0;
proper: 0;
backside: 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);
}Methods to Create a Sticky Cellular Backside Menu for Astra Theme?
When you have adopted the tutorials above then every thing is mainly the identical. Simply use Astra associated hook to point out your sticky backside cellular bar. Astra hooks can fe discovered right here.
So, add this code right here beneath to the features.php or Code Snipepts code field.
add_action( 'astra_footer_after', 'astra_sticky_mobile_bottom_bar', 20 );
perform astra_sticky_mobile_bottom_bar() {
echo do_shortcode( '[reblex id="1361"]' ); // Change the shortcode
}NB! Don’t neglect to stick the CSS code proven above to the Extra CSS field.
Methods to Add Ajax Merchandise Rely Subsequent to the Woocommerce Cart Icon?
That is elective and also you don’t must do it. However if you wish to present good cart merchandise rely quantity subsequent to the cart icon (see the screenshot above) then paste this code to the Code snippets code field. (thanks WP seashores)
add_shortcode ('woo_cart_but', 'woo_cart_but' );
/**
* Create Shortcode for WooCommerce Cart Menu Merchandise
*/
perform woo_cart_but() {
ob_start();
$cart_count = WC()->cart->cart_contents_count; // Set variable for cart merchandise rely
$cart_url = wc_get_cart_url(); // Set Cart URL
?>
<a category="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 replace
*/
perform woo_cart_but_count( $fragments ) {
ob_start();
$cart_count = WC()->cart->cart_contents_count;
$cart_url = wc_get_cart_url();
?>
<a category="cart-contents menu-item" href="<?php echo $cart_url; ?>" title="<?php _e( 'View your procuring 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;
}Subsequent, go to the Reusable Blocks or Kadence aspect you created earlier and add thw [woo_cart_but) shortcode within the place you want to it to be proven.
Now go to the Customizer >> Addtitional CSS and paste this code and save.
.cart-contents {
place: relative;
text-decoration: none;
}
.cart-contents-count {
place: absolute;
high: 12px;
proper: 1px;
rework: translateY(-105%) translateX(25%);
font-size: 12px;
line-height: 22px;
peak: 24px;
width: 24px;
vertical-align: center;
text-align: heart;
shade: #fff;
background: #000;
border-radius: 50%;
padding: 1px;
}
If every thing is OK then it ought to seem like this.
