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.

Even better, it’s on sale for a limited time as part of the WooCommerce Essentials Kit! You can pick it up for 25% off.

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

Checkout Notice

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.

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

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

Non Logged In message

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

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:

Login 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 :) .

The post Advanced WooCommerce Social Login Tips appeared first on SkyVerge.