Topbar customization help

[gaga4]

Hello there,

I’m setting up an e-commerce and I would like to know how to change the top bar in order to display the name of the company, the phone number, email adress and the woocommerce basket and account login menu. I have no idea how to do it. Can you help ? Thanks a lot.

Gaelle

[thai]

Hi There,

You can add the following HTML code to your topbar content:

Company Name | <a href="tel:+123456789">123456789</a> | <a href="mailto:email@mail.com">email@mail.com</a> | <a href="#"><i class="x-icon x-icon-shopping-cart" data-x-icon="" aria-hidden="true"></i></a> | <a href="#">Login</a>

After that replace all the # characters with your links.

But for the WooCommerce basket, I recommend you enable the cart in the navbar instead. This option is under Theme Options > WooCommerce > Navbar Menu:

Regards!

[gaga4]

Thanks a lot it’s working well ! But is it possible to have the name of the company on the left side (above the logo) and the login link and another ling to a quote form on the right ? Thank you for your help, it’s very much appreciated !

[thai]

Hi There,

In this case, please update the previous HTML to this:

<span class="left">Company Name</span> <span class="right"><a href="tel:+123456789">123456789</a> | <a href="mailto:email@mail.com">email@mail.com</a> | <a href="#"><i class="x-icon x-icon-shopping-cart" data-x-icon="" aria-hidden="true"></i></a> | <a href="#">Login</a></span>

After that add this custom CSS under Theme Options > CSS:

.x-topbar .p-info { width: 100%;}

Let us know how it goes!

[gaga4]

Thanks a lot, it’s working great !

[christian]

You’re welcome.

[gaga4]

I’m sorry to bother you again but it worked for a little bit and went back to the left. I would like the last part “Mon Compte” on the left. Can you help please.
Here is the code I put : <span class="left">SURETECH |<a href="tel:+123456789">tel : +33 1 23 45 67 89</a> | <ahref="mailto:info@suretech.fr">info@suretech.fr </a> | <span class="right"></a> <a href="https://suretech.fr/mon-compte">MON COMPTE</a></span>

[rad]

Hi @gaga4,

There are many issues in your code and it’s malformed. Including the closing </a> and <ahref="mailto:

Please change it to this

<span class="left"><a href="https://suretech.fr/mon-compte">MON COMPTE</a></span><span class="right">SURETECH |<a href="tel:+123456789">tel : +33 1 23 45 67 89</a> | <a href="mailto:info@suretech.fr">info@suretech.fr
</a></span> 

Cheers!

[gaga4]

Thanks a lot for your help !

[christian]

You’re welcome, Gaelle. Just note that what we did here (writing custom HTML) is not something that we could continue on doing here. Custom coding is outside the scope of our support.

The code my colleagues gave you serve only as a guide. You are now responsible to fix issues in that code and further enhancement. If you have a tight deadline for your project and you still haven’t learned HTML, you will need to hire a third party developer to do it for you. You now know where to put code in the Topbar area. That is our goal here and that is achieved.

If you need more layout flexibility in the header without custom coding, please consider upgrading to Pro.

Thanks.

[gaga4]

Thank you for your help, I understand. I’m grateful you helped.

[thai]

You’re most welcome.