Archived topic
Handheld footer bar
5 replies · Started by Ricardo on December 31, 2020
Hello, is there any way to create a handheld footer bar with shortcuts similar to the one that the Woocommerce theme brings by default? (storefront)
something like this
https://flic.kr/p/2knxuQz
Hello Ricardo,
Yes, it's very doable by using block element.
https://docs.generatepress.com/article/block-element-overview/
I would also recommend you to use our block editor plugin Generateblocks. It works very well with block element.
https://generateblocks.com/
Once you start to create the block element
1) choose Hook as block type, choose generate_before_footer as hook, choose location depends on your needs.
2) create buttons structure as screenshot shows below, set each container under grid to 25% width.
https://tinyurl.com/ybjv275p
3) give the container above grid a class for later css, something like footer-buttons.
https://tinyurl.com/y8myzr8g
4) add icon to each container using the html editor.
https://tinyurl.com/ya2n74nv
For example, I add an svg into the button here:
https://tinyurl.com/ybe46z96
5) add some css to position the block element.
.gb-container.footer-buttons {
position: fixed;
bottom: 0;
z-index: 100;
width:100%
}
.site-footer {
margin-bottom:3.3em; /*may need to adjust this number*/
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if it works!
Everything worked perfectly.
https://tinyurl.com/yane895v
I would like to go a little further:
1- Add item counter in the cart icon
https://tinyurl.com/y9h9zk9z
2- Add search bar by pressing search button
I am using the Ajax Search for WooCommerce plugin that is included in the Prime demo
Hi Ricardo,
Unfortunately Ying's solution is all the help we can provide for a custom solution like this - it's already a bit out of the scope of this forum.
The additional request requires some custom PHP coding that you might need to hire a developer for it.
Thanks for your understanding :)
Thank you so much for everything
Glad to help :)