Support

Home Forums Event Espresso Premium Change Text and Styling of Registration/Login Prompt

Change Text and Styling of Registration/Login Prompt

Posted: August 14, 2019 at 5:00 pm


jdbell1994

August 14, 2019 at 5:00 pm

We require our users to be logged in to register for training in order to track certain things. On the checkout page the text that prompts users who are not logged in is not very noticeable. I want to style the text into a button and change the text entirely. I have seen your posts already on changing the text but the <p></p> has no id or class to manipulate with CSS. Do you have any suggestions on how to add an attribute to the paragraph to style it?


Josh

  • Support Staff

August 15, 2019 at 8:22 am

Hi,

With the way CSS works, you don’t need the <p></p> to have an ID or class to target it. You can use the parent element, which does have an ID.

e.g.

#ee-spco-wpuser_login-reg-step-form p {
color:red;
}

will change the text’s color to red.

With regards to changing the text, you can make use of a translation function. Here’s a link to the wiki that includes an example of a translation function:

https://eventespresso.com/wiki/how-to-change-wording-with-poedit/#custom-function

What you can do is plug in the following string into the translation function’s array, followed by the text you want to change to. e.g.

'The event you have selected requires logging in before you can register. You can %sregister for an account here%s if you don\'t have a login.' => 'The class you have selected requires logging in before you can register. You can %sregister for an account here%s if you don\'t have a login.'


jdbell1994

August 15, 2019 at 10:34 am

Hi Josh,
I gave the tranlsation a try and put the example custom function in my functions.php file and then changed the string into the text I want displayed and it seems to have no effect on the text in question? It is still displaying the original text on the login/register page. Below is the my code in its entirety; not sure what I’ve done wrong…

//add different text to login prompt screen.
function mycustom_filter_gettext( $translated, $original, $domain ) {
 
    // This is an array of original strings
    // and what they should be replaced with
    $strings = array(
        'The event you have selected requires logging in before you can register. You can %sregister for an account here%s if you don\'t have a login.' => '%No Account? REGISTER NOW%',
        'Confirm and go to payment page' => 'Complete registration',
        'No events available...' => 'No upcoming classes at this time...',

        // Add some more strings here
    );
 
    // See if the current string is in the $strings array
    // If so, replace its translation
    if ( isset( $strings[$original] ) ) {
        // This accomplishes the same thing as __()
        // but without running it through the filter again
        $translations = get_translations_for_domain( $domain );
        $translated = $translations->translate( $strings[$original] );
    }
 
    return $translated;
}
 
add_filter( 'gettext', 'mycustom_filter_gettext', 10, 3 );


jdbell1994

August 15, 2019 at 10:54 am

Also, thank you for the suggestion in using the parent element I feel dumb for not thinking of that. It worked great and if I could just change the text to meet my need It’ll be perfect.


Josh

  • Support Staff

August 15, 2019 at 11:15 am

Hi,

This:

'%No Account? REGISTER NOW%'

needs to be changed to:

'%sNo Account? REGISTER NOW%s'

If the above change doesn’t fix the issue, can you share a screenshot URL?


jdbell1994

August 15, 2019 at 11:22 am

Thank you for the quick response. I made the change and unfortunately there is still no effect. I have attached a link to the page in question below. You might have to add a training to your cart and try to check out if this link doesn’t take you direct.

https://deservicesaztraining.com/registration-checkout/?uts=1565886910#checkout


jdbell1994

August 15, 2019 at 11:25 am

Here is a screenshot as well….
login/registration screenshot


jdbell1994

August 15, 2019 at 11:26 am

As you can see I have styled the link the way I want and I just need to replace the text.


Josh

  • Support Staff

August 15, 2019 at 11:41 am

I think you’ll need to clear your cache and start a new session in order to see the changes take effect. Here’s what I see:

https://slack-files.com/T02SY781D-FM7DRPHDX-8bac7dea55


jdbell1994

August 15, 2019 at 11:52 am

Great! I was hoping it was something like that. You guys are awesome. Thank you for the help.


jdbell1994

August 15, 2019 at 11:55 am

One last easy question I figured I’d ask before messing with it. Can I add <br> or html in the string within the translation function? Like if I wanted to add “otherwise login and continue with your registration below?” to the translation but knock it down below the link?


Josh

  • Support Staff

August 15, 2019 at 12:12 pm

You could, technically speaking, make that change. Please be aware that in the future the html could end up getting escaped which would not look very good.

The following CSS could accomplish something similar:

#ee-spco-wpuser_login-reg-step-form p:after {
content:'otherwise log in and continue with your registration below';
display:block;
}

and would be more future proof.

The support post ‘Change Text and Styling of Registration/Login Prompt’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso