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
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:
// Adds the [wc_social_login_link_account_buttons] shortcode to display "Link Account" buttons where used
function woocommerce_social_login_link_account_shortcode( $atts ) {
// Buffer output
ob_start();
if( ! is_user_logged_in() ) {
// Text shown if a user is not logged in. Edit as needed.
echo 'You must be a customer to link a social account.';
}
// Shows "link account" buttons, which are shown only to logged-in users
woocommerce_social_login_link_account_buttons();
// Return buffered contents
return ob_get_clean();
}
add_shortcode( 'wc_social_login_link_account_buttons', 'woocommerce_social_login_link_account_shortcode' );
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:
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.
// Changes button display based on whether user is logged in or not using [wc_social_login_all_buttons] shortcode
function woocommerce_social_login_all_buttons_shortcode( $atts ) {
// Buffer output
ob_start();
// Displays login buttons to non-logged in users with default text from settings
woocommerce_social_login_buttons();
//Displays link account buttons to logged in users
woocommerce_social_login_link_account_buttons();
// Return buffered contents
return ob_get_clean();
}
add_shortcode( 'wc_social_login_all_buttons', 'woocommerce_social_login_all_buttons_shortcode' );
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:
// Adds login buttons to the top of the comment form
function insert_wc_social_login_buttons() {
// Displays login buttons to non-logged in users with default text from settings + redirect back to the comment form
woocommerce_social_login_buttons( home_url( add_query_arg( array() ) ) . '#respond' );
// Optional: include this to display 'link account' buttons to logged in users + redirect back to the comment form
woocommerce_social_login_link_account_buttons( home_url( add_query_arg( array() ) ) . '#respond' );
}
add_action( 'comment_form_top', 'insert_wc_social_login_buttons' );
// Changes the login text from what's set in our WooCommerce settings so we're not talking about checkout here.
function change_social_login_text_option( $login_text ) {
// Only modify the text from this option if we're not in the admin or on a WooCommerce page
if( ! ( is_admin() || is_woocommerce() || is_cart() || is_checkout() ) ) {
$login_text = __( 'Create an account with social login in 12 seconds or complete the fields below.', 'WC_Social_Login' );
// Adjust the login text as desired
}
return $login_text;
}
add_filter( 'pre_option_wc_social_login_text', 'change_social_login_text_option' );
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:
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.
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.
<?php // only copy if needed
/**
* Adds login buttons to the wp-login.php pages
*/
function sv_wc_social_login_add_buttons_wplogin() {
// Displays login buttons to non-logged in users + redirect back to login
woocommerce_social_login_buttons();
}
add_action( 'login_form', 'sv_wc_social_login_add_buttons_wplogin' );
add_action( 'register_form', 'sv_wc_social_login_add_buttons_wplogin' );
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:
<?php // only copy if need
/**
* Changes the login text from what's set in our WooCommerce settings
* so we're not talking about checkout while logging in.
*
* @param string $login_text the original login text
* @return string updated login text
*/
function sv_wc_social_login_change_text_option( $login_text ) {
global $pagenow;
// Only modify the text from this option if we're on the wp-login page
if( 'wp-login.php' === $pagenow ) {
// Adjust the login text as desired
$login_text = __( 'You can also create an account with a social network.', 'my-textdomain' );
}
return $login_text;
}
add_filter( 'pre_option_wc_social_login_text', 'sv_wc_social_login_change_text_option' );
When we do so, our buttons will now be displayed on the login and register forms:
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:
// Changes the login text from what's set in our WooCommerce settings so we're not talking about checkout elsewhere.
function change_social_login_text_option( $login_text ) {
global $pagenow;
// Only modify the text from this option if we're not on the wp-login page
if( 'wp-login.php' === $pagenow ) {
$login_text = __( 'You can also create an account with a social network.', 'WC_Social_Login' );
// Adjust the login text as desired
} elseif( ! ( is_admin() || is_woocommerce() || is_cart() || is_checkout() ) ) {
// Okay if we're not on an admin or WooCommerce page, then we also want to change it:
$login_text = __( 'Create an account with social login in 12 seconds or complete the fields below.', 'WC_Social_Login' );
// Adjust the login text as desired
}
return $login_text;
}
add_filter( 'pre_option_wc_social_login_text', 'change_social_login_text_option' );
