Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – How to replace a title in span with plain text and username (or diplay name) with PHP

Here is my situation.

I’m using flatsome theme with woocommerce. In its theme customizer, I can just check option boxes to make Account header show “Login / Register” before logging in and show display name (TEST in picture) after logging in. https://imgur.com/7tekdTo https://imgur.com/dYWQg75

These options work correctly on desktop but on mobile website it is not at all. These options don’t apply. I figure my only choice here is JavaScript. But I know next to nothing about HTML and JavaScript. https://imgur.com/p6Tn7Ig https://imgur.com/0i1tCkB

My question here are

  1. How can I change Login to Login / Register before logging in on mobile.
  2. How can I make it show display name instead of My Account after logging in on mobile.

I really want to save cost so plug-in isn’t viable option for me. I prefer this default header too because creating custom menu I can’t use popup login / register screen. I have searched online and none of solution work so far.

These are my elements of the mentioned account header.

Before logging in.

<a href="https://www.mywebsite.com/my-account/" class="nav-top-link nav-top-not-logged-in " data-open="#login-form-popup">
<span>
Login / Register </span>
</a>

After logging in.

<a href="https://www.mywebsite.com/my-account/" class="account-link account-login
  " title="My account">

            <span class="header-account-title">
        test        </span>
</a>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For now, I found a temporary solution to my first question. I use additional CSS to replace the text.

    .nav-top-link.nav-top-not-logged-in  span {
  display: none;
}
.nav-top-link.nav-top-not-logged-in:after {
  content: 'Login / Register';
}

    Where nav-top-link nav-top-not-logged-in is the class of the header before logging in.

    Also, I did some digging and I found the files. There are 2 files for this. It appears that the theme use 2 different codes for desktop and mobile. (/wp-content/themes/flatsome/template-parts/header/partials)

    There is 1 file called element-account.php.

    <?php $icon_style = get_theme_mod('account_icon_style'); ?>
<?php if(is_woocommerce_activated()){ ?>
<li class="account-item has-icon
  <?php if(is_account_page()) echo ' active'; ?>
  <?php if ( is_user_logged_in() ) { ?> has-dropdown<?php } ?>"
>
<?php if($icon_style && $icon_style !== 'image' && $icon_style !== 'plain') echo '<div class="header-button">'; ?>

<?php if ( is_user_logged_in() ) { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" class="account-link account-login
  <?php if($icon_style && $icon_style !== 'image') echo get_flatsome_icon_class($icon_style, 'small'); ?>"
  title="<?php _e('My account', 'woocommerce'); ?>">

    <?php if ( get_theme_mod( 'header_account_title', 1 ) ) { ?>
        <span class="header-account-title">
        <?php
        if ( get_theme_mod( 'header_account_username' ) ) {
            $current_user = wp_get_current_user();
            echo esc_html( $current_user->display_name );
        } else {
            esc_html_e( 'My account', 'woocommerce' );
        }
        ?>
        </span>
    <?php } ?>

  <?php if($icon_style == 'image'){
    echo '<i class="image-icon circle">'.get_avatar(get_current_user_id()).'</i>';
   } else  if($icon_style){
    echo get_flatsome_icon('icon-user');
   } ?>

</a><!-- .account-link -->

<?php } else { ?>
<a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>"
    class="nav-top-link nav-top-not-logged-in <?php if($icon_style && $icon_style !== 'image') echo get_flatsome_icon_class($icon_style, 'small'); ?>"
    <?php if( get_theme_mod('account_login_style','lightbox') == 'lightbox' && !is_checkout() && !is_account_page() ) echo 'data-open="#login-form-popup"'; ?>
  >
  <?php if(get_theme_mod('header_account_title', 1)) { ?>
  <span>
    <?php _e('Login', 'woocommerce'); ?>
    <?php if(get_theme_mod('header_account_register')){
        echo ' / '.__('Register', 'woocommerce');
      } ?>
  </span>
  <?php } else {
        echo get_flatsome_icon('icon-user');
    } ?>

</a><!-- .account-login-link -->
<?php } ?>

<?php if($icon_style && $icon_style !== 'image' && $icon_style !== 'plain') echo '</div>'; ?>

<?php
// Show Dropdown for logged in users
if ( is_user_logged_in() ) { ?>
<ul class="nav-dropdown  <?php flatsome_dropdown_classes(); ?>">
    <?php wc_get_template('myaccount/account-links.php'); ?>
</ul>
<?php } ?>

</li>
<?php } else {
    fl_header_element_error( 'woocommerce' );
}
?>

    And there is another file called element-account-mobile.php

    <?php $icon_style = flatsome_option('account_icon_style'); ?>
<li class="account-item has-icon">
<?php if($icon_style && $icon_style !== 'image' && $icon_style !== 'plain') echo '<div class="header-button">'; ?>
    <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>"
    class="account-link-mobile <?php echo get_flatsome_icon_class($icon_style, 'small');?>" title="<?php _e('My account', 'woocommerce'); ?>">
      <?php echo get_flatsome_icon('icon-user'); ?>
    </a><!-- .account-link -->
<?php if($icon_style && $icon_style !== 'image' && $icon_style !== 'plain') echo '</div>'; ?>
</li>

  2. 0

    @MihaiT is right. Dig around.

    Very hard to help with specifics because you’re using a builder, there are so many variables at play in how you have it set up. But all themes use header.php to display whatever is consistent across all headers – notably, login/logout details. You could take a look at your header.php and have a play around with something like this:

    <?php global $current_user; wp_get_current_user(); ?>

<?php if ( is_user_logged_in() ) { ?>

<div class="account-details">
    <p class="username">Welcome back <?php echo $current_user->display_name; ?></p>
    <a href="<?php echo wp_logout_url( get_permalink() ); ?>">&nbsp;|&nbsp;Logout</a>
</div>


 <?php } else { ?>

 <div class="account-details">
    <a href="/login/">Login&nbsp;|</a>
    <a href="/register/">&nbsp;Register</a> 
</div>

 <?php } ?>

    You would need to make any changes on a child theme so as not to overwrite any changes you make with a theme update. If you have no intention of ever creating a custom theme, then maybe this approach is not for you, and it’s best to reach out to the theme devs for support. The big problem with themes and builders is the moment you need something that’s not included, you’re in a pickle.

    The above code uses a basic if/else and a wordpress function that detects if the user is logged in. Because you’re running this in the back end you have access to useful data such as username. You’d need to figure out the links for logging in/out but this is the general theory.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search