How to you modify the Title Bar Icon options?

[Karen Thomas]

Hello,

I want to modify what options appear on the Title Bar Menu (the ones to the right with the pretty icons)
I want to move the order and also include a heart icon so users can easily see their favourited products.

How do I do this?

(screenshot of the menu I mean attached)

Many thanks,

Karen

[Anonymous]

Hi @conscious-crafties, Please let me know that you just want to change the icon or add a new tab in that row for Favourite.

Regards

[Karen Thomas]

I’d like to add a new tab please with a heart icon – linking to the users favourite products 🙂

This would greatly improve the shopping experience for users to quickly visit the products they have favourited.

Many thanks,

Karen

[Kelly]

I too am interested in making some minor adjustments. I wasn’t sure if I should start my own thread or not but wanted to post here at least so I can follow this one. 🙂

Thanks

[Karen Thomas]

Hi Kelly, welcome to this thread – fingers crossed we can do this.

I’d like mine to be similar to the attached (taken from Etsy for logged in users).

Karen

[Stephen]

I asked this same question and outline the steps I took below (which didn’t work.) You can avoid those if you’ve been trying so you don’t waste your time. If you figure it out before we get a response to this, please share :).

https://www.buddyboss.com/support-forums/topic/adding-custom-icon-fonts/

[Karen Thomas]

Thanks for the heads up Stephen! 😀

[Anonymous]

Hi @conscious-crafties, To add a new icon in right section you will hove to follow these steps:

Copy header-aside.php from parent theme to child theme on same path onesocial-child/template-parts/header-aside.php.

Add the following code after line no. 42

<div class="myicon">
    	<a class="header-button" href="<?php echo bp_loggedin_user_domain(); ?>products/favorite_products/"><i class="fa fa-heart-o"></i></a>
  </div>

and add this css in your child theme’s custom css option:

#header-aside .myicon i {
    font-weight: bold;
}

If you have other concerns, just let us know and we will be more than happy to assist you.

Regards

[Karen Thomas]

I love this thank you sooooo much @pallavi

Could I be cheeky and ask how I add a tool tip when users hover over to say ‘Favourites’, like it does when they hover over Search, Edit Profile and Cart?

Many thanks for your help,

Karen

[Karen Thomas]

Also….

I noticed when uses have not yet favourited any items, when they click on the heart icon they receive a 404 page.

Could we have a friendlier page that says ‘You have not added favourited any items yet’

Many thanks,

Karen

[Anonymous]

Hi @conscious-crafties, Please add this code instead of earlier on and left the css same..

<div class="myicon">
    	<a id="header-button" href="<?php echo bp_loggedin_user_domain(); ?>products/favorite_products/" class="header-button boss-tooltip" data-tooltip="<?php _e( 'My Favorite', 'onesocial' ); ?>"><i class="fa fa-heart-o"></i></a>
  </div>

Regards

[Karen Thomas]

Perfect thank you so much @pallavi 😀

[Johnny]

Hi, Pallavi. Instead of creating a new topic, ill just ask you here. How to change icon on the header? I would like to change the log in icon to something else.

[Anve S.]

Hi @johnnetr,

Copy header-user-links.php from parent theme to child theme on same path onesocial-child/template-parts/header-user-links.php.

On line no. 17

“><i class=”fa fa-bluetooth-b”></i>

Here i have changed the icon by replacing its existing class by “fa fa-bluetooth-b”.

In same manner you can change this icon with your chosen fontawesome icon.

Regards
Anve

[Anve S.]

Hi @johnnetr,

Copy header-user-links.php from parent theme to child theme on same path onesocial-child/template-parts/header-user-links.php.

On line no. 17

<a href="#" class="login header-button animatedClick boss-tooltip" data-target="LoginBox" data-tooltip="<?php _e( 'Login', 'onesocial' ); ?>"><i class="fa fa-bluetooth-b"></i></a>

Here i have changed the icon by replacing its existing class by “fa fa-bluetooth-b”.

In same manner you can change this icon with your chosen fontawesome icon.

Regards
Anve