Home Forums Meteorite My account menu – Style

This topic is: resolved

This topic contains 10 replies, has 2 voices, and was last updated by  JuanMZC 3 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #915

    JuanMZC
    Participant

    I want to change the style of my account menu and set up avatar image on top. See what I want in this link: https://we.tl/1LmtczSK9x

    Can you help me? Thanks in advance.

    #916

    Terra Themes
    Keymaster

    Which plugin do you use for that functionality?

    #917

    JuanMZC
    Participant

    What do you mean? I’m not using any plugin in my account. That is the style by default from meteorite theme.

    #919

    Terra Themes
    Keymaster

    Can you provide a link to that menu and an account if this menu is only visible for logged in users? Then I can take a look at it.

    #921

    JuanMZC
    Participant
    This reply has been marked as private.
    #922

    Terra Themes
    Keymaster

    Which plugin do you use for that functionality?

    It’s WooCommerce, that’s what I wanted to know in my first post. That way I would have been able to try out something without the need of an account. However it’s better to take a look directly at the page.

    This is the CSS for the style of the menu.

    .woocommerce-MyAccount-navigation ul li {
    	list-style: none;
    	display: block;
    	padding: 15px 5px;
    	border-top: 1px solid #ddd;
    }
    
    .woocommerce-MyAccount-navigation ul li:last-of-type {
    	border-bottom: 1px solid #ddd;
    }
    
    .woocommerce-MyAccount-navigation ul li a {
    	display: block;
    	position: relative;
    	color: #826c78;
    }
    
    .woocommerce-MyAccount-navigation ul li a::after {
    	font-family: FontAwesome;
    	content: "\f0e4";
    	position: absolute;
    	right: 0;
    	color: #d7d2d8;
    	transition: color .3s;
    }
    
    .woocommerce-MyAccount-navigation ul li a:hover::after, 
    .woocommerce-MyAccount-navigation ul li a:focus::after {
    	color: #87617a;
    }

    The icons can be specified with the following:

    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::after {
      content: 'ADD THE ICON CODE HERE';
    }
    
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::after {
      content: 'ADD THE ICON CODE HERE';
    }
    
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::after {
      content: 'ADD THE ICON CODE HERE';
    }
    
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::after {
      content: 'ADD THE ICON CODE HERE';
    }
    
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::after {
      content: 'ADD THE ICON CODE HERE';
    }

    For the avatar I have found a small piece of PHP code you might works for you. You can add this in the functions.php or custom php plugin.

    /**
      * Print the customer avatar in My Account page above the menu
      */
     function ads_meteorite_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_before_account_navigation', 'ads_meteorite_myaccount_customer_avatar', 5 );

    Let me know how this works for you and whether it needs some adjustment.

    #925

    JuanMZC
    Participant

    Thanks so much!

    My Account Navigation menu looks nice now as I wanted however I would like to make different the active ‘a’, text should be bold and icon shouldn’t change the color. How can I do that?

    #926

    Terra Themes
    Keymaster

    The following should to the trick.

    active ‘a’, text should be bold

    .woocommerce-MyAccount-navigation-link.is-active a {
    	font-weight: 600;
    }

    active ‘a’ […] icon shouldn’t change the color

    .woocommerce-MyAccount-navigation ul li.is-active a:hover::after, 
    .woocommerce-MyAccount-navigation ul li.is-active a:focus::after {
    	color: #d7d2d8;
    }
    #927

    JuanMZC
    Participant

    Thanks so much! It is just what I wanted.

    Regarding the avatar, to avoid having an avatar for each user and make easy this, I’m looking for a function to take the image of the product which have been previously bought for the user who is login. Our customer can only buy one product. Any suggestion? or a small piece of PHP code which might works for me to add in the functions.php

    Thanks in advance!

    #928

    Terra Themes
    Keymaster

    Thanks so much! It is just what I wanted.

    Great, you’re welcome!

    Regarding the avatar, to avoid having an avatar for each user and make easy this, I’m looking for a function to take the image of the product which have been previously bought for the user who is login. Our customer can only buy one product. Any suggestion? or a small piece of PHP code which might works for me to add in the functions.php

    I don’t think that this is possible by default. You might want to ask in the WooCommerce forum for that functionality, because this has more to do with the shop plugin than my theme itself. You could try asking in the WordPress.org plugin forum from WooCommerce or their official website.

    #930

    JuanMZC
    Participant

    Thanks for your advice. You can mark this topic as resolved.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.