Nicola Mustone

Happiness Lead @ Automattic

Add the customer avatar in My Account page in Storefront

Some themes include the customer avatar in the My Account page. I like it a lot, so i wrote a tutorial to add it also in Storefront, the latest WooThemes free theme – download it on WordPress.org!

The avatar will show on the left of the welcome message in your My Account page. It will show the customer photo or the “Mystery Man” from Gravatar. If you still do not have an account on Gravatar, I suggest to create one since it’ used on a lot of sites, and all sites powered by WordPress and Ghost (yep, also this one).

Ok, now it’s time to get your hands dirty. Open up your functions.php file located in wp-content/themes/your-theme-name/ and add this code in it:

/**
* Print the customer avatar in My Account page, after the welcome message
*/
function storefront_myaccount_customer_avatar() {
$current_user = wp_get_current_user();
echo '<div class="myaccount_avatar">' . get_avatar( $current_user->user_email, 72, '', $current_user->display_name ) . '</div>';
}
add_action( 'woocommerce_account_content', 'storefront_myaccount_customer_avatar', 5 );
view raw functions.php hosted with ❤ by GitHub

Then open your style.css file in the same path and add this code:

.myaccount_avatar {
border-right: 1px solid rgba(0, 0, 0, 0.1);
float: left;
padding-right: 10px;
margin-right: 10px;
width: 83px;
}
view raw style.css hosted with ❤ by GitHub

Note: Remember to use a child theme to do this, do not edit the files in Storefront.

The first code adds the functionality. It gets the customer avatar and print it after the welcome message. But we want it before, so we add also the second code, which is some CSS adding the style to move the avatar on the left of the welcome message and some borders to make it fit in the style of Storefront.

The page should now look like this:

myaccount-storefront-avatar

Feel free to further tweak the CSS. This is only a simple example of what you can do, but the options are limitless, you can change everything and move the avatar wherever you want it.

Advertisements

Subscribe to This Blog

Receive new articles from this blog directly in your inbox! No spam guaranteed!

Join 651 other subscribers

Contribute to Improving This Blog

Did you enjoy this article? Was it helpful? Contribute to help me write more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

€5.00
€15.00
€100.00
€5.00
€15.00
€100.00
€5.00
€15.00
€100.00

Or enter a custom amount

€

Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly
, ,
Advertisements

More Posts That You Might Like…

15 responses to “Add the customer avatar in My Account page in Storefront”

  1. unapplicable Avatar
    unapplicable

    I do trust all of the ideas you have introduced
    for your post. They’re very convincing and can definitely work.
    Nonetheless, the posts are very short for newbies.
    May you please lengthen them a little from next time?
    Thanks for the post.

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      Hi, thanks for writing and thanks for the suggestion!

      I’ll try to do better next time!
      Have a great week!

      Reply
  2. jin Avatar
    jin

    nice but i wish there was a way to also let the customer upload his own image.

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      Maybe you can with a plugin. By default WordPress supports only Gravatar, so an avatar upload feature needs to be added via custom code/plugins.

      With a quick search on WordPress.org I found this plugin: https://wordpress.org/plugins/wp-user-avatar/

      Reply
  3. A Avatar
    A

    Hi Nicola, i use” wp-user-avatar” plugin (it’s great) but your snippet do not work here.
    Any ideas?

    Reply
  4. David Avatar
    David

    Hi Nicole,

    Wow, thanks so much for this. It really helped me.

    I have a couple of questions maybe you could help me with. I inserted this code into the correct location and it works. The problem I am having is that the snippet of text next to it is now showing.

    Could you tell me what code to insert so that I can insert my own snippet next to the users profile picture in the same format? Ie colored bar next to the image and then text?

    Is there any way I can make the image circular?

    Thanks 🙂

    Reply
  5. sherly Avatar
    sherly

    how to Add the customer avatar in My Account page in Storefront ?

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      Hello,
      Did you read the article? It’s exactly about that.

      Reply
  6. Rodger Avatar
    Rodger

    Code works, but the image is after the welcome message, as per code description..
    “Print the customer avatar in My Account page, after the welcome message.”

    How does one put on the left as per screenshot example above?

    Thank you.

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      At the end of this article, there’s also some CSS. Did you use that?

      Reply
  7. Winters Avatar
    Winters

    Nicola thank you for your article! I know this is an old post but…

    I noticed on My Account page – there was no .myaccount_user class for floating the text to the right of the avatar image.

    To get the avatar to show up in a spot that was easier to manipulate, I had to change ‘woocommerce_before_my_account’ to ‘woocommerce_account_content’

    With the suggested change, the avatar displays before the welcome message. Then all you need for your .myaccount_avatar css is your float, padding and border styles.

    I am using WP 4.9.5 with the Storefront 2.3.1 default theme, hope this makes sense and helps someone else!

    Reply
    1. Nicola Mustone Avatar
      Nicola Mustone

      Hey Winters,
      thanks a lot for sharing this!

      I tested your suggestions and updated the article accordingly!

      Reply
      1. Winters Avatar
        Winters

        Super cool! Glad it was helpful!

        Reply
  8. Jim Worrall Avatar
    Jim Worrall

    Hi, this is great information. I wonder if you would be willing to show how to put the avatar in the header, but of course condition on the user being logged in. Or maybe do a separate post on that?

    Reply
  9. ErnestPH Avatar
    ErnestPH

    The code is not showing my image. So I modified it using get_avatar( $current_user->ID, 64 ) and it’s now showing fine.

    Thanks still for the heads up!

    Reply

Leave a Reply

Advertisements

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

About The Author

Hi, I’m Nico! Support Lead at Automattic, championing WordPress.com & WooCommerce. Off-duty, I’m at Elemental Beacon, leading epic D&D adventures. Let’s connect, whether it’s about WordPress or a quest!

Advertisements

Don't Miss a Thing!

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

Continue Reading

%d bloggers like this: