WooCommerce Social Login tips

Our WooCommerce Social Login plugin has quickly become one of my favorites, as you can allow users to easily link social accounts to WooCommerce and Sensei. This makes it easier to get involved with your store and far easier to save a user profile for future purchases.

There’s already a lot of flexibility in displaying social login buttons, as you can add them to any of the following:

  • the “My Account” page Login / Register sections
  • the Checkout page in the “Log in” notice
  • the Checkout page in a separate notice
  • the “Order Received” page
  • any page / widget area via widget or shortcode

Social Login Settings

WooCommerce Social Login

Checkout Notice

WooCommerce social login thank you message

Order Received page

WooCommerce social login buttons are also always displayed to logged-in users on the “My Account” page so that they can link social accounts to existing accounts for fast, easy sign in.

However, there are some handy templates tags in the plugin as well that can help you display WooCommerce Social Login buttons wherever you’d like. Let’s take a look at a few use cases for each of these.

Note that these are advanced uses / customizations that we don’t offer support for, so you should be familiar with basic WordPress / PHP development.

Only Allow Account Linking for Logged-in Users

While most shops want to use WooCommerce Social Login to encourage new users to make an account quickly and securely, some shops like to use this for customers (logged-in users) only. The issue here is that WooCommerce social login buttons are hidden by default to logged in users.

The thinking behind this is that we don’t want to distract these users from checking out or purchasing, as we can encourage them to link an account on the “thank you” page after they’ve paid. However, if users are logged in for a different reason (let’s say because you’re running a course / membership site), then displaying these buttons may not be as big of a distraction. If this is the case, we may want to display “link your account” buttons elsewhere. Fortunately, there’s a handy template tag to do so:

<?php woocommerce_social_login_link_account_buttons(); ?>

This will display “Link your account” buttons to logged-in users where used, and will show nothing to non logged-in users.

Rather than use a template tag, I’d prefer to use a shortcode so I don’t have to edit my theme. Let’s turn this into a shortcode that will display a message to non-logged in users, but show buttons for logged in users. If you’re not sure where to create this code, I recommend using the Code Snippets plugin as described here.

Before we walk through this, note that I’m going to add this shortcode to a text widget for use on my site (I can use the shortcode in pages / posts as well). This will only work if your theme allows shortcodes in text widgets. If it doesn’t work, you can add this tiny code snippet to force your site to do so: add_filter('widget_text', 'do_shortcode');

Let’s assume that I only want to show buttons if users are logged in, but a message if they aren’t. This snippet will create a [wc_social_login_link_account_buttons] shortcode to do so:

If you’re preventing non-logged in users from linking social accounts, don’t forget to create settings that reflect this. Remove all social login buttons from the checkout, “My Account”, etc. You could even use your new shortcode instead.

Now let’s use it! Add your new shortcode to a page, post, or text widget (if using our tip above).

WooCommerce Social Login link account widget

Now non-logged in users will see our message, but logged in users will see the “Link Account” buttons:

WooCommerce social login Non Logged In message

Non Logged In message

WooCommerce social login buttons

Logged in “link” buttons

Create a super widget / shortcode

WooCommerce Social Login has a built in widget to display social login buttons, as well as a shortcode to do so: [[woocommerce_social_login_buttons]]. However, the widget and shortcode will display nothing to logged in users. Again, this is because we don’t want to distract customers with shiny things until they purchase πŸ™‚ .

If we’re in the same situation as above where want logged in users to link an account, we can use the above shortcode. However, if you’re okay with showing the login buttons to non-logged in users as well, we can make this easier.

Let’s create a super shortcode (that I can also use in a text widget) that will show login buttons for non-logged in users, and “Link Account” buttons for logged in users. I’ll do something similar to the snippet above, but replace what happens for non-logged in viewers with the button display instead.

This will create a [wc_social_login_all_buttons] shortcode for me, as these functions already pay attention to whether the user is logged in or not and I don’t have to specify this.

Add WooCommerce Social Login to Comments

What if you have forums or comment forms on your posts, pages, or protected content? You may want to add social login buttons here to encourage members to either sign in with a social account or perhaps link a social account. We can do both!

The gist below will do a couple of things:

The first function adds WooCommerce social login buttons to the comment form. Remember, these functions already pay attention to whether or not a user is logged in so we don’t have to duplicate this conditional check. You can use the first part to display buttons to non logged-in users, and optionally use the second part to show “Link account” buttons to logged-in users.

There’s one problem with the social login buttons on my comment form. When users aren’t logged in, my default text from the WooCommerce settings page is used. It’s probably something like, “For faster checkout, login or register using your social account.”

We don’t want to use this on our comment form, so we can use the super-handy pre-option filter built into WordPress to adjust this. The second part of our code snippet uses this to change the option before the plugin retrieves it, depending on which page we’re on. The if() check in the beginning of this function checks to see if we’re in the admin or on a WooCommerce page, as we don’t want to modify the text there. If we’re not, then it changes the text to whatever you enter.

The end result works pretty well:

Non Logged in comment form

Non Logged in comment form

Logged in Comment form (if used)

Logged in Comment form (if used)

Notice that the text above our social login buttons has changed based on our snippet, but this won’t change on WooCommerce pages. Again, the “Link Account” buttons are optional here. If you don’t want them, you can remove the woocommerce_social_login_link_account_buttons(); part of the snippet.

You can even see this in action in our comments section.

WP Login Pages

The last place you may want to add these buttons is to the /wp-login.php pages. This may be handy if you’d like to link your social account as an administrator, allow shop managers to do so, or allow linking aside from the WooCommerce login. You’ll add it in pretty much the same way we added buttons to the comment forms.

You’ll probably also want to change the text here instead so that you’re text about checkout isn’t used on your login pages:

When we do so, our buttons will now be displayed on the login and register forms:

WP Login Buttons

Login Buttons

WP Register Buttons

Register Buttons

Finally, if you’re using our tip above to add the social login buttons to comment forms as well, you’ll want to use this snippet instead of the previous one to change the text in both places:


We’d love to hear about it if you use any of these tips in your shop! Drop us a line in the comments πŸ™‚ .

Published by Beka Rice

Beka manages WooCommerce product direction for SkyVerge, such as plugin roadmaps, documentation, and sales copy. She typically gets stuck with boring administrative tasks, but likes to write so she has an excuse to spend more time jamming out to anything from The Clash to Lady Gaga.

51 Comments

  1. Great post, so many useful snippets, bookmarked for our customers!

  2. Great tutorial Beka! I just asked for a couple of those tricks via woothemes support unsuccessfully. πŸ˜‰
    Just a thing: get rid of that white social icons’ right border because in my template is completely messed up and had to treat all of them via css, forcing me to add uselessly some addictional css code to load. πŸ™‚

    • Hey Alessandro, glad you’ve found them useful! It’s actually good to hear they’re not included in the WooThemes support channel, as it’s fairly impossible for us to include custom code as part of support for hundreds of thousands of sites. Including it in a ticket gives the indication that we’ll customize it as needed or update it, so we prefer to leave tips like this in tutorials where it’s clear that it’s an advanced / developer tweak πŸ™‚ .

      As for the CSS, we have an update coming out today or tomorrow that should fix this display issue! You can get rid of the extra CSS once you’ve updated.

  3. Hello Beka,

    I had a quick question about this.
    Can the plugin also pull user’s profile pic from their social profile? and can it be displayed on their “My account” page?

    • Hi Puneet, it does pull the profile picture (if available – details here) and this will be used as the avatar picture. It won’t automatically be added to the WooCommerce “My Account” page, as profile pictures are not shown here by default, but you could add it via custom code if desired.

  4. This is a great plugin.
    I’m wondering how can I change the “Click here to login” text in the check out notice?
    Would be nice to have this option in the dashboard somewhere.

    Thanks
    And Happy New Years!

  5. Hi,

    I’m trying to add WooCommerce Social Login to my review and comment forms. I followed the section “Add WooCommerce Social Login to Comments” inside the “Code Snippets” plugin but it does not seem to be working. Am I doing something wrong?

    Thank you

    • Hey Phelipe, after you save the snippet, do you then activate it? The comment form action we’re using is in WordPress core, so it should work with most themes.

      • Hi Beka,

        I did activate it, and my theme does accept Code Snippets… but I do not see the WooCommerce Social Login for none logged in users, only for logged in users to link their accounts. Any help is appreciated.

        PS: I would like the same feature for product reviews.

        Thanks,
        Phelipe

        • Hello,

          I have same issues of Phelipe Peres. Have you any solution?

          Regards,
          Jader Silva

  6. Hello Beka,

    Thanks a lot for the great tips on your blog.
    I’m trying to change the return URL after logging in with social media but I’m having a hard time figuring out. I guess it should be a simple task but I can’t get it right!

    Cheers,
    Maspn

  7. For reference, this is the filter that I’m using:
    // Custom redirect for users after logging in with social networks
    add_filter(‘woocommerce_social_login_redirect’, ‘wcs_social_login_redirect’);
    function wcs_social_login_redirect( $redirect ) {
    $redirect = ‘http://linencrate.com/?p=21650’;
    return $redirect;
    }

    • Afraid that filter isn’t present, which is why this code isn’t working πŸ™ . I’d recommend using the shortcodes instead of automatically displaying login buttons to manually set this, as they have a return_url attribute — more info here.

  8. Hi Beka, Thanks for the Say What plug in it works great.

    I have 2 questions if you could help.

    1: How can I make social login button open in new page or a pop up?
    2: My twitter button is returning a white blank screen, I created the app correctly and added the keys like any other app but it only returns the white screen. Below is the return URL if you see something that I dont. ( I replaced my URL with website)

    http://website.com/wc-api/auth/twitter/?return=https%3A%2F%2Fwebsite.com%2Fmy-account%2F

    Any help is much appreciated.
    Cheers

    • We’d definitely be happy to help out with this! Do you have a support ticket submitted already? If you can respond with the 6-digit ticket number, I can make sure we grab it right away. You can also submit it here. Thanks!

      • Hi Beka,

        Sorry I did submit a ticket with woo themes about this but I just now see they responded to me last month about it. So I dont know if its still open or not.

        My tic number is #245573

        Thanks

  9. I was able to apply login buttons to Post comments, though these buttons wont appear in woocommerce product review tab. How can I add them there?

    • Hey Marcus, I’m afraid that product reviews do not add comments the same way that standard WP comments are added, so the action used here won’t exist in product reviews (this is instead a custom form created by WooCommerce). I’d recommend looking into review templates to add the social login template tag instead.

  10. Great customization tips! I’m really considering to add these functionality to one of my projects. Anyway, I’m working on a new website which brings a custom “My Account” page template. How could I move the Social Login linking options to a specific section within my page template after the user is logged in? I mean, would it be possible to achieve this without having the options for linking social accounts duplicated? I ask because by viewing the plugin’s screenshots it seems it follows woocommerce default templating.

    • The account linking template is hooked into the woocommerce_before_my_account action, so you could unhook it and re-add elsewhere in the my account template if desired.

  11. Thanks a lot! I’m checking now the plugin’s Developer Docs.

  12. Please help me! I want to logged in automatically to my website if customers already have account on my website and linked social network when they logged in to these social network websites in other tab.

  13. Hi all!
    I have successfully got the facebook login button on to the Account Page but I want it on the right hand side, where the register new user usually goes. How do i do this?
    Thanks

  14. Hi Beka.

    I’m still getting familiar with functions, actions and hooks.

    Question:
    I’m trying to unhook social login from woocommerce_before_my_account action so I can move its location in my account page, using this code in my functions file:

    remove_action( ‘woocommerce_before_my_account’, ‘wc_social_login_profile::get_social_profiles_template’ );

    Then I am calling it in another location of the account page using this code:

    This is not working can you please let me know the correct hook / code to use?
    I’m sure this isn’t correct.

    Thanks
    Best Regards.

    • Sorry.

      I forgot to write how I am calling it:

      Appreciate any help
      Best Regards.
      πŸ™‚

      • I knew I didn’t forget its just not displaying because opening / closing brackets.
        This is code to display:
        wc_social_login_profile::get_social_profiles_template();

        Sorry I thought I was going crazy… :-/

  15. Hi Beka,

    I’m having a hard time figuring out.
    How do I let my users return to the current page or referer page after login in?

    Thanks in advance.

    Martijn

  16. Hi Beka, are you going to add more services to this plugin like VKontakt, yahoo and such?

  17. Beka, it’d be cool if SkyVerge could jump in here and help here, but I’m gonna figure this one out one way or another πŸ™‚ …….

    Scope: Use Social Login (along with some “compelling CTA”) to capture email addresses to be used for abandoned cart, remarketing, and email follow up purposes.

    Application: If the user is not logged in, echo:
    1.) Social Login along with
    2.) Text “Giveaways, Tips, Contests, and Free Toasters!” (….or some similar text). Once user has selected their account, snag associated email. Note: Yes, I get that Twitter & Instagram will be the exception
    3.) Check(ed) Box for receiving email correspondence
    4.) Store email address as a value that can be used for abandoned cart, follow up emails, or anything else.

    Beka, have you Max or anyone else ever thought about tackling this?

    • Hey Brad, You could add your text with a ! is_user_logged_in() check by overriding the /global/social-login.php template, which renders the buttons. As for opting into email correspondence, this would be a bit tougher to do since the email would then have to be passed to whatever the customer is opting into (plugins or external services), which would require integration for each service / plugin.

      I think for most stores, creating an account typically gives you permission to send abandoned cart or follow up emails (i.e. you don’t opt into order update emails, right?), so I wouldn’t worry as much about getting the opt in for “lifecycle” emails like this. I’d just get permission for other emails, such as marketing / promotion emails, which perhaps you could do with a welcome email hooked into the woocommerce_created_customer action. Another solution would be to automatically subscribe new customers to MailChimp, then send an email from MailChimp asking them to opt into your marketing groups / segment by updating their profile / preferences.

      We are working on the abandoned cart problem for sure πŸ™‚ Our Jilt app is very close to integrating with WooCommerce, which would automatically use the stored email for logged in customers to send emails (or try to capture one for guest customers if not).

  18. I think there is a bug, or it’s a feature by design πŸ™‚

    WooCommerce Social Login plugin doesn’t allow to connect a social network account if that account uses the same e-mail address. This applies when a WordPress user with same e-mail address is already exist.

    I couldn’t connect my Facebook and Google accounts, but I could add another Google account which has a different e-mail address then the one which already exists in WP user database.

    Hope you understand what I’m trying to explain πŸ™‚

    • So (1) you have a WP account with a linked social account (2) you try to “log in” with another social account and it doesn’t automatically link them. This correct? Sounds like you’re doing this from your admin / shop manager account, which is expected behavior. If you log in, then link the account via “My Account”, you’ll be fine.

      This won’t happen for your customers, as logging in with a social account that uses the same email as the site account will link them automatically. The reason why is a bit detailed, so I’ve added it to the plugin docs here.

      • Yup, that’s exactly what happened.
        Me (admin) and a friend (shop manager) were testing πŸ™‚

        After reading the link with docs you attached it makes more sense.

        Thank you,
        regards

  19. Hi Beka,
    Awesome post have been searching for it for a while, just purchased the plugin, am trying to set up on my homepage so new users can login with their social login, but they should be redirected back to the homepage after login, i will like the login form to popup when users click the my-account link, how do i make that happen?

    • am trying to set up on my homepage so new users can login with their social login, but they should be redirected back to the homepage after login,

      This should happen already if put on the homepage via shortcode. If not, we’d be happy to help out via the help desk!

      i will like the login form to popup when users click the my-account link, how do i make that happen?

      You’d need custom code around creating a modal window / iframe for this, as it’s not something the plugin will do itself.

      • Hi Beka, Can you please update me? will woocommerce lightbox plugin be able to display social login as a popup? if that is possible, i will appreciate a response very much or any other suggestion.

        I also think you should do a course like this advanced social login tutorial, on social popup login, its being used by at least 50% of websites, Regards.

        • As I’d said in my original message, triggering a modal / pop up with a my account link would need to be a customization. There’s not a reliable way to do this in a tutorial; would it use an iframe with a lightbox? If so, which lightbox (as there are several lightbox scripts)? Would it use a custom modal instead if not? That would require a lot of code around creating the modal and logging in via the modal, which isn’t easy. Should it have regular log in fields or only log in buttons? You’d need to have a developer implement the best solution for your site’s needs.

          This isn’t something we’d add to the Social Login plugin, as it supports a pretty simple workflow by outputting buttons directly with the shortcode already. Instead of outputting an account link and trying to do a pop up login workflow to show login buttons, I’d recommend outputting the buttons directly with the shortcode.

  20. Hi,

    This plugin seems to work well but the style options are limited. Is there an easy way to get the social media links to align vertically rather than horizontally, or just to display the icons? With the links all being different sizes, it can look a little messy.

    Thanks!!

    Charlie

  21. Hi Beka, thx for this great tutorial. I could make use of a lot of thinking inside it. I got a problem I would like to ask you about. It happens that I gave access to our bakeries web store to registered customers only and I wonder how to move the social buttons on top of the registration form rather than on the bottom of it. I managed to include a snippet in my functions that actually display a text message for not logged in users that says they would have to login. But I still have the normal login above the socials whereas it would be better the other way round. Do you have any idea? Saludos!

  22. Hello!

    Has anyone been successful using this plugin inside a lightbox/popup/iframe? We’re using AppPresser for our mobile apps, which is basically a button-less browser, and if somebody doesn’t remember their social credentials they end up getting stuck if they are using an iPhone without a back button.

    Regards,
    PJ

  23. Hi.. Loving the WP Login Pages function. However how can I move the Social button UNDER the WP log in button. Kinda in the wrong place right now (between WP password and WP button).

    • Hey Charlie, probably a priority issue. I’d give an adjustment there a try, changing this:

      add_action( 'login_form', 'add_wc_social_login_buttons_wplogin' );
      add_action( 'register_form', 'add_wc_social_login_buttons_wplogin' );

      to something like:

      add_action( 'login_form', 'add_wc_social_login_buttons_wplogin', 50 );
      add_action( 'register_form', 'add_wc_social_login_buttons_wplogin', 50 );
  24. Is there any way to place the social buttons together along with “login with email” part – either above or below email login part – http://take.ms/mBo63

  25. Hi Beka,

    I have a problem, when i try to login with user rol administrator or super admin, the social login not works.

    http://www.exemple.com/checkout?wc-social-login-restricted-role-error=true

    How can i fix this?

    Can you provide please a hook?

    Thank you in advanced and great tips for woo social login!

Comments are closed.

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match