[Resolved] Handheld footer bar

[Ricardo]

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

[Ying]

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!

[Ricardo]

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

[Leo]

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 🙂

[Ricardo]

Thank you so much for everything

[Ying]

Glad to help 🙂

[Author]

Posts