Posted on

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:

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

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.

5 thoughts on “Add the customer avatar in My Account page in Storefront

  1. 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.

    1. Hi, thanks for writing and thanks for the suggestion!

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

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

    1. 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/

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

Leave a Reply

Your email address will not be published. Required fields are marked *