Return to previous page

User Icon to My Account - by Gry4you - on WordPress WooCommerce support

This topic has 27 replies, 3 voices, and was last updated 6 years, 5 months ago ago by Rose Tyler

Gry4you

Participant

November 14, 2017 at 09:49

Hi,

I would like to add “user icon”, like https://www.8theme.com/demo/xstore/shoes to my account (login link). How can I do that? What kind of php code I should add to framework/theme-functions.php?
Icon just like that:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_1.jpg
Add to my site (My account – Top bar ( Sign In link)
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_2.jpg

Thanks

#177523 Copied Theme version: 4.12 WooCommerce version: 3.2.3

26 Answers

Rose Tyler

Support staff

November 14, 2017 at 10:22

Hello,

Could you please provide wp-admin access in Private Content?

Regards

#177531 Copied

Gry4you

Participant

November 14, 2017 at 11:12

No. I would like to modify myself.

I only need php code to add, just like here:
https://www.8theme.com/topic/header-my-account-with-username/

#177551 Copied

Olga Barlow

Support staff

November 14, 2017 at 15:26

Hello,

We need to check the header type to provide you correct code. So, please, provide me temporary admin panel access to check your site and give you the answer.

Regards

#177592 Copied

Gry4you

Participant

November 14, 2017 at 15:56

Hi,

I chose Variant xstore header type.

Variant hamburger has user icon like <i class=”fa fa-user-o” aria-hidden=”true”></i>, but I can’t add php code to Variant xstore.

Access to admin panel is not safe for me.

Regards

#177601 Copied Theme version: 4.12 WooCommerce version: 3.2.3

Gry4you

Participant

November 15, 2017 at 10:45

And! Someone help me???

#177652 Copied Theme version: 4.12 WooCommerce version: 3.2.3
Rose Tyler

Support staff

November 15, 2017 at 11:00
Hello,

Please add this code in Theme Options > Styling > Custom css:
```
.login-link:before {
    content: "\e1000";
    font-family: 'xstore-icons';
    position: absolute;
    left: -8%;
    top: 1%;
}
```
Regards
#177654 Copied
Gry4you

Participant

November 15, 2017 at 11:16

Is not working. Look at the pics:

Your code in Styling > Custom css:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_3.jpg
And nothing:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_4.jpg

Mayby I will should add php code to framework/theme-functions.php ???

Regards

#177656 Copied Theme version: 4.12 WooCommerce version: 3.2.3

Rose Tyler

Support staff

November 15, 2017 at 11:18

Please check symbols in your code http://prntscr.com/hapmlk > http://prntscr.com/hapmsb

Regards

#177657 Copied

Gry4you

Participant

November 15, 2017 at 11:52

Uff. It’s working:) Thanks.

But only if I am not registered or logged. If I logged icon disappears! Look:

Before login:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_5.jpg

After:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_6.jpg

It is possible to add whan I’m logged? Can I use other icon like fa-user-o (<i class=”fa fa-user-o” aria-hidden=”true”></i>) from Font Awesome?

1) Login or Register/My Account could be bigger like 14px? No it’s to small?

2) Login or Register/My Account may have a different color like #0b1fba not typical grey?

Regards

#177660 Copied Theme version: 4.12 WooCommerce version: 3.2.3
Rose Tyler

Support staff

November 15, 2017 at 13:07
Hello,

Change the previous code to:
```
.login-link:before {
    content: "\e1000";
    font-family: 'xstore-icons';
    position: absolute;
    left: -10%;
    color: #0b1fba;
}
.top-links {
    font-size: 14px;
}
```
to change the icon use http://prntscr.com/haqz3o as content value in code http://prntscr.com/haqz8y

Regards
#177663 Copied
Gry4you

Participant

November 15, 2017 at 14:42

Thank you for your help:)

1. It’s better, but there is a correct code:

}.login-link:before {
content: “\e1000”;
font-family:’xstore-icons’;
position: absolute;
left: -8%;
top: 1%;
color: #0b1fba;
}
.top-links {
font-size: 14px;
}

2. Still REGISTER/LOGIN has a grey color.
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_7.jpg

I tried use this code, but not working :

}.login-link:before {
content: “\e1000”;
font-family:’xstore-icons’;
position: absolute;
left: -8%;
top: 1%;
color: #0b1fba;
}
.top-links {
font-size: 14px;
color: #0b1fba;
}

2. And I can’t change icon type still! Is not working!

3. Before logging in I see icon:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_7.jpg

After logging in I don’t see icon:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_8.jpg

It is possilbe add icon after logging in?

4. The icon could be bigger like 14px? Login/Register has 14px, but icon is to small (on the left side). Just like that:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_7.jpg

Regards

#177675 Copied Theme version: 4.12 WooCommerce version: 3.2.3

Gry4you

Participant

November 15, 2017 at 14:45

…After logging in I don’t see icon:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_8.jpg

It is possilbe add icon after logging in?

Maybe this code should work? What do you think?

if ( is_user_logged_in() ) {
$user=wp_get_current_user();
$name=$user->display_name; // or user_login , user_firstname, user_lastname

Regards

#177676 Copied Theme version: 4.12 WooCommerce version: 3.2.3
Rose Tyler

Support staff

November 15, 2017 at 15:02
Hello,

2. To change color use this code:
```
.top-links .links a {
    color: #0b1fba !important;
}
```
to change size you may change value in this code http://prntscr.com/hash84, because the icon inherit font size from .top-links

And I can’t change icon type still! Is not working!

– oh I see, please use
```
font-family: FontAwesome;
content: "\f007";
```
instead
```
content: "\e1000";
font-family: 'xstore-icons';s';
```
http://prntscr.com/hasn3s
3. Yes, it is possible, but to give you the appropriate code I need your wp-admin access.
4. The icon inherit font size from .top-links, so change the size value in this code http://prntscr.com/hash84.

Regards
#177678 Copied
Rose Tyler

Support staff

November 15, 2017 at 15:15

Try to add to this code http://prntscr.com/hasv4b .top-bar .my-account-link:before, like http://prntscr.com/hasvlv

Regards

#177679 Copied

Gry4you

Participant

November 15, 2017 at 16:25

Wow. You are amazing:)

It almost done, but before logging in has a perfect size and and position, look at:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_10.jpg

After logging in is to close, look at:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_11.jpg

I tried to change position, but it works both side.

Thank you very much for your help. This is my code:

}.top-bar .my-account-link:before, .login-link:before {
content: “\f007”;
font-family: FontAwesome;
font-size: 18px;
position: absolute;
left: -6%;
top: -4%;
color: #0b1fba;
}

.top-links .links a {
font-size: 15px;
color: #0b1fba !important;

}

#177691 Copied Theme version: 4.12 WooCommerce version: 3.2.3
Rose Tyler

Support staff

November 15, 2017 at 16:28
Please also add this code:
```
.top-bar .my-account-link:before {
    left: -9%;
}
```
Regards
#177692 Copied
Gry4you

Participant

November 15, 2017 at 16:36

Yes, yes, yes….. Thank you a lot.

This is a perfect code:

.top-bar .my-account-link:before, .login-link:before {
content: “\f007”;
font-family: FontAwesome;
font-size: 18px;
position: absolute;
left: -6%;
top: -4%;
color: #0b1fba;
}

.top-bar .my-account-link:before {
left: -12%;
top: -3%;
}

.top-links .links a {
font-size: 15px;
color: #0b1fba !important;
}

Best Regards
Damian

#177694 Copied

Rose Tyler

Support staff

November 15, 2017 at 16:41

You’re welcome!
Great. Let us know if you need any further assistance.

Regards

#177696 Copied

Gry4you

Participant

November 15, 2017 at 16:55

I have two more problems!

1. If I would like to use “Header text color/Top bar text color” I can use only Dark and White. This is only one way? Can I use different color like #0b1fba or the other?

2. Active window like here:
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_12.jpg

When I enter the window, a green background appears. I will try to make a change in WP Bakery, but there is only active-block (In Inner Column Settings/General) that can’t be changed!
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_13.jpg
https://gry4you.com/wp-content/uploads/2017/11/Icon_XStore_14.jpg

I want white or blue background after I will enter the window!

Maybe Y have a idea?

Regards

#177701 Copied Theme version: 4.12 WooCommerce version: 3.2.3
Tagged: best selling, my account, themes, user icon, woocommerce
1 2

Viewing 20 results - 1 through 20 (of 27 total)