WooCommerce Social Login Setup Docs

“WooCommerce Social Login Setup Docs” Documentation by “WPWeb”

Introduction

WooCommerce Social Login extension allows users to login and checkout with social networks such as Facebook, Twitter, Google, Yahoo, LinkedIn, Foursquare, Windows Live, VK.com, Instagram, Amazon PayPal and login with Email.

It has been proven countless times that the easier it is for a customer to create an account during checkout, the more likely they are to complete their purchase. This extension makes the WooCommerce checkout process another notch easier for customers that prefer to login via their favorite social networks.

Features:

One click registration.
WooCommerce Social Login works standalone with WooCommerce, BuddyPress, bbPress, or PeepSo.
Integrate your store's customer accounts with Facebook, Twitter, Google, Yahoo, LinkedIn, Foursquare, Windows Live, VKontakte (VK.com), Instagram, PayPal, Amazon and Login with Email.
Make account access and checkout easy and seamless – customers don't need to remember another username and password.
Reduce friction for repeat purchases – customers typically stay signed into social networks, which means they sign back into your site with one click.
Improve security and increase trust by using social sign-on
Ability to send newly created account details to user's email.
Auto Integrate on checkout page.
Includes a short code, [woo_social_login], that can be used to place the social login buttons on any page, as well as a widget that can be used in any widget area.
Ability to set custom redirect URL to get redirected after customer login with social media.
Admin can change the order of social network buttons by drag and drop.
View number of sign-ups for each social network.
Generate pie chart for percentage registration on each social network.
Flexibility to link accounts on the 'My account' page and 'Order received' page for easy checkout in future.
Social accounts are tied to a WordPress user account so that accounts can be accessed even if social accounts are unlinked.
A clean & user friendly admin UI to manage everything.
Allow users to signin or signup with email only.

What reports say about Social Login?

Over 77% of consumers prefer social login when using an eCommerce site.
Social sign-in can therefore lead to increased conversion rates – here's an example with over 10% increase.
Customers prefer social sign-in for security and personalization.
90% of people have encountered social login before, and more than half of people use it.

Minimum Requirements

Below are the minimum requirements to use the plugin.

cURL is required for the plugin to function; don't worry, most hosting providers already have this enabled.
However, if your host doesn't the plugin will show you a notice, and you must ask your host to upgrade your server.
To allow sign in with Amazon, you must use an SSL for your site. This is a requirement from Amazon.
If your site doesn't have SSL, the plugin will show you a notice.
PHP version 5.3 or greater (PHP 5.6 or greater is recommended)
MySQL version 5.0 or greater (MySQL 5.6 or greater is recommended)
WordPress 4.4 or greater

You should also check WordPress minimum requirements.

Installing the Plugin

The installation of the plugin is just like any other plugin installation for WordPress. Login to your WordPress site and go to Plugins > Add New.
At the Install Plugins Page click on Upload from the top navigation and then click on browse.
Go to the location on your computer where you saved the downloaded plugin zip file and upload this zipped file. You need to unzip the file first to get the plugin zip file.
Now click on Install Now.
Wait until WordPress has uploaded the file. If it's done click on Activate Plugin.
Now you should see a message 'Plugin activated' at the top of the window.

After installing the extension, a social login tab will be added to the WooCommerce settings page.

The Plugin Settings

General Settings

New Account Email Type
Choose new account email notification type. This option allows you to choose whether you want to send either WordPress or WooCommerce new account email when the user registers via social media.

New User Default Role
Select the default role you want to assign when new user register they account via social login.

New Account Email to User
Check this box, if you want to notify user when they get registered through social media.

New Account Email to Admin
Check this box, if you want to notify the admin when a new user registers through social media.

Redirect URL
Enter a custom redirect URL of a page to redirect a user on this page once they get registered via social media. Leave it blank to use current page URL.

Autoregistered Usernames
Select an option to create username based on unique ID & random number or based on real name or an email ID.

Display Settings

Display Social Login buttons on WooCommerce login page
Check this box to add social login buttons on WooCommerce login page.

Display Social Login buttons on WooCommerce Registration page
Check this box to add social login buttons on WooCommerce Registration page.

Display Social Login buttons on WooCommerce Checkout page
Check this box to add social login buttons on WooCommerce Checkout page.

Display Social Login buttons on Wordpress default login page
Check this box to add social login buttons on Wordpress default login page.

Display Social Login buttons on Wordpress default register page
Check this box to add social login buttons on Wordpress default register page.

Display "Link Your Account" button on Thank You page
Check this box to allow customers to link their social account on the Thank You page for faster login & checkout next time they purchase.

Social Login Title
Enter Social Login Title which will be displayed on checkout page above the social media buttons.

Social Buttons Position
Select the position where you want to display the social login buttons i.e. Above Login/Register form or below Login/Register form. Select Custom Hook if you want to display on custom form.

Custom Hooks:
If your theme/plugin does provide custom hooks then you can enter the name of the hook here.

Using a Custom Hook you can also use a custom hook within your theme. This is only recommended if you know what you're doing. If you want to have the Social buttons on a special place added automatically on which you want to display, then you can use the following code within your theme.

do_action( 'woo_custom_social_buttons' );

woo_custom_social_buttons can be any name you wish. Place that code in to the specific place within your theme where you want the social buttons being displayed and then use, in our example woo_custom_social_buttons, within the WooCommerce Social Login Settings Box and copy and paste it in to the Custom Hooks field.

Expand/Collapse Buttons
Here you can select how to show the social login buttons.

Social Buttons Image/Text
Here you can completely customized the look of the social login buttons. Use image as buttons options allows you to upload custom image and Use text as buttons allows you to display custom text buttons.

If you use image as buttons then you will get options to upload image for button as below:

Same for other social accounts settings.

If you use text as buttons then you will get options to set the text for button as below:

Same for other social accounts settings.

GDPR Settings

Enable GDPR
Check this box to Enable GDPR notice on social login.

Privacy Page
Choose a page to act as your privacy page.

Social Login Privacy Policy
Enter the text with your privacy policy link to show above the social buttons.

[privacy_policy] - Display privacy policy page link

Misc Settings

Delete Options
If you don't want to use the Social Login Plugin on your site anymore, you can check that box. This makes sure, that all the settings and tables are being deleted from the database when you deactivate the plugin.

System Report
Please generate system report file and provide us in your ticket when contacting support.

Facebook Settings

Facebook Application
Before you can start using Facebook for the social login, you need to create a Facebook Application.

Enable Facebook
Check this box, if you want to enable Facebook social login registration.

Facebook App ID/API Key
Enter Facebook API Key.

Facebook App Secret
Enter Facebook App Secret.

Facebook Valid OAuth Redirect URL
Enter Facebook Valid OAuth Redirect URL.

Facebook API Locale
Select the language for Facebook. With this option, you can explicitly tell which language you want to use for communicating with Facebook.

Enable Facebook Avatar
Check this box, if you want to use Facebook profile pictures as avatars.

Custom Facebook Icon
If you want to use your own Facebook Icon, upload one here.

Custom Facebook Link Icon
If you want to use your own Facebook Link Icon, upload one here.

Google Settings

Google Settings

Google Application
Before you can start using Google for the social login, you need to create a Google Application.

Enable Google
Check this box, if you want to enable Google social login registration.

Google Client ID
Enter Google Client ID.

Google JavaScript origins URL
Before using the Google Plus social login, update the Authorized JavaScript origins in Google App setting, click here.

Enable Google Avatar
Check this box, if you want to use Google profile pictures as avatars.

Custom Google Icon
If you want to use your own Google Icon, upload one here.

Custom Google Link Icon
If you want to use your own Google Link Icon, upload one here.

LinkedIn Settings

LinkedIn Application
Before you can start using LinkedIn for the social login, you need to create a LinkedIn Application.

Enable LinkedIn
Check this box, if you want to enable LinkedIn social login registration.

LinkedIn App ID/API Key
Enter LinkedIn App ID/API Key.

LinkedIn App Secret
Enter LinkedIn App Secret.

LinkedIn Callback URL
Enter LinkedIn Callback URL.

Enable LinkedIn Avatar
Check this box, if you want to use LinkedIn profile pictures as avatars.

Custom LinkedIn Icon
If you want to use your own LinkedIn Icon, upload one here.

Custom LinkedIn Link Icon
If you want to use your own LinkedIn Link Icon, upload one here.

Twitter Settings

Twitter Application
Before you can start using Twitter for the social login, you need to create a TwitteR Application.

Enable Twitter
Check this box, if you want to enable Twitter social login registration.

Twitter App API Key
Enter Twitter App API Key.

Twitter App Secret
Enter Twitter App Secret.

Enable Twitter Avatar
Check this box, if you want to use Twitter profile pictures as avatars.

Custom Twitter Icon
If you want to use your own Twitter Icon, upload one here.

Custom Twitter Link Icon
If you want to use your own Twitter Link Icon, upload one here.

Yahoo Settings

Yahoo Application
Before you can start using Yahoo for the social login, you need to create a Yahoo Application.

Enable Yahoo
Check this box, if you want to enable Yahoo social login registration.

Yahoo Consumer Key
Enter Yahoo Consumer Key.

Yahoo Consumer Secret
Enter Yahoo Consumer Secret.

Yahoo Home Page URL
Enter Yahoo Home Page URL.

Enable Yahoo Avatar
Check this box, if you want to use Yahoo profile pictures as avatars.

Custom Yahoo Icon
If you want to use your own Yahoo Icon, upload one here.

Custom Yahoo Link Icon
If you want to use your own Yahoo Link Icon, upload one here.

Foursquare Settings

Foursquare Application
Before you can start using Foursquare for the social login, you need to create a FoursqUare Application.

Enable Foursquare
Check this box, if you want to enable Foursquare social login registration.

Foursquare Client ID
Enter Foursquare Client ID.

Foursquare Client Secret
Enter Foursquare Client Secret.

Enable Foursquare Avatar
Check this box, if you want to use Foursquare profile pictures as avatars.

Custom Foursquare Icon
If you want to use your own Foursquare Icon, upload one here.

Custom Foursquare Link Icon
If you want to use your own Foursquare Link Icon, upload one here.

Windows Live Settings

Windows Live Application
Before you can start using Windows Live for the social login, you need to create a WindowS Live Application.

Enable Windows Live
Check this box, if you want to enable Windows Live social login registration.

Windows Live Client ID
Enter Windows Live Client ID.

Windows Live Client Secret
Enter Windows Live Client Secret.

Windows Live Callback URL
Enter Windows Live Callback URL.

Custom Windows Live Icon
If you want to use your own Windows Live Icon, upload one here.

Custom Windows Live Link Icon
If you want to use your own Windows Live Link Icon, upload one here.

VK.com Settings

Vk Settings

Vk Application
Before you can start using Vk for the social login, you need to create a Vk Application.

Enable Vk
Check this box, if you want to enable Vk social login registration.

Vk Application ID
Enter Vk Application ID.

VK Secret Key
Enter VK Secret Key.

Enable Vk Avatar
Check this box, if you want to use Vk profile pictures as avatars.

Custom Vk Icon
If you want to use your own Vk Icon, upload one here.

Custom Vk Link Icon
If you want to use your own Vk Link Icon, upload one here.

Instagram Settings

Instagram Application
Before you can start using Instagram for the social login, you need to create a Instagram Application.

Enable Instagram
Check this box, if you want to enable Instagram social login registration.

Instagram Client ID
Enter Instagram Client ID.

Instagram Client Secret
Enter Instagram Client Secret.

Instagram Callback URL
Enter Instagram Callback URL.

Enable Instagram Avatar
Check this box, if you want to use Instagram profile pictures as avatars.

Custom Instagram Icon
If you want to use your own Instagram Icon, upload one here.

Custom Instagram Link Icon
If you want to use your own Instagram Link Icon, upload one here.

Amazon Settings

Amazon Application
Before you can start using Amazon for the social login, you need to create a Amazon Application.

Enable Amazon
Check this box, if you want to enable Amazon social login registration.

Amazon Client ID
Enter Amazon Client ID.

Amazon Client Secret
Enter Amazon Client Secret.

Amazon Callback URL
Enter Amazon Callback URL.

Enable Amazon Avatar
Check this box, if you want to use Amazon profile pictures as avatars.

Custom Amazon Icon
If you want to use your own Amazon Icon, upload one here.

Custom Amazon Link Icon
If you want to use your own Amazon Link Icon, upload one here.

Paypal Settings

Paypal Application
Before you can start using Paypal for the social login, you need to create a Paypal Application.

Enable Paypal
Check this box, if you want to enable Paypal social login registration.

Paypal Client ID
Enter Paypal Client ID.

Paypal Client Secret
Enter Paypal Client Secret.

Paypal Callback URL
Enter Paypal Callback URL.

Environment
Select which environment to process logins under.

Custom Paypal Icon
If you want to use your own Paypal Icon, upload one here.

Custom Paypal Link Icon
If you want to use your own Paypal Link Icon, upload one here.

Login With Email Settings

Enable Login With Email
Check this box, if you want to enable sign in / sign up with email only.

Enable Confirmation Email
Check this box, if you want to send confirmation email to user when they singup with email only.

Confirmation Email subject
Enter the email subject.

Confirmation Email body
Enter the content for email body.
{verify_link} - This tag used to create verify link.

Position
Select the postion where you want to display the login with email form.

Heading Title
Enter the title for login with email.

Placeholder Text
Enter the text for email placeholder.

Button Text
Enter the text for submit button.

Seprater Text
Enter the text for seprater line.

Note: User will not be able to do login by entering administrator email.

Misc Settings

Delete Options
If you don't want to the Social Login Button on your site anymore, you can check that box. This makes sure, that all the settings and tables are being deleted from the database when you deactivate the plugin.

Caching
You should check this setting if you are using caching plugin.

System Report
Please generate system report file and provide us in your ticket when contacting support.

Adding a widget

If you want to attach a widget that shows all social login options, enter the administrator panel, then go to Appearance and click Widgets.

Find the "WooCommerce - Social Login" widget and drag it to your desired place. You can title your widget (this will appear above the social buttons).

After you setup the widget, Widget will look something like the one shown in the image below on the frontend. It depends on the settings you used.

Connecting Social Networks

You can connect WooCommerce Social Login to Facebook, Google, LinkedIn, Twitter, Yahoo, Foursquare, Windows Live, VK, Instagram, Amazon and Paypal. Please check our Creating Social Apps guide and video tutorial to set up an app for your social network. This will give you API credentials to enter into the plugin settings page to connect your store to the social network(s) selected.

View the Guide

Adding a Shortcode

Adding a shortcode in classic editor

To integrate the social login into any page or post you can use the [woo_social_login] shortcode. You will see a social login icon within the WordPress editor, just as shown in the image below.

Click on the social login icon and a new window with the custom settings will pop up as shown in the image below.

Adding a social login block in Gutenberg editor

To integrate the social login into any page or post you can add WooCommerce Social Login block within the Gutenberg editor, just as shown in the image below.

Click on the social login icon and you will be able to see the custom settings as shown in the image below.

Social Login Title
Enter Social Login Title which will be displayed above the social media buttons.

Social Networks
Select social networks you want to show. Leave it empty to display all enable social networks.

Redirect URL
Enter a custom redirect URL of a page to redirect a user on this page once they get registered via social media. Leave it blank to use current page URL.

Show Only on Page / Post
Check this box if you want to show social login buttons only on single post/page.

Expand/Collapse Buttons
Here you can select how to show the social login buttons.

Social Login Frontend
After inserting shortcode, on a frontend it will look something like as shown in the image below. It depends on the settings you used.

Link Social Accounts to User Accounts

New customer accounts that are created with the social login will automatically be linked to the appropriate networks. Existing Social accounts will also be able to connect their accounts to social networks when logging in or via the "My Account" page.

You can even invite logged in users to link their accounts after checkout for faster purchase in the future. Simply enable Social login buttons on the Thank You page.

Link Social Accounts to User Accounts After Checkout

Provide Account Management Tools

Customers will always be able to link or unlink social accounts from your site by visiting the "My Account" page:

Social Login Report Page

Admin can change the order of social networks buttons by drag and drop interface and view number of sign-ups for each social network as shown in the image below.

Generate Pie graph for Social Networks Register Percentage.

Social Login Monitor Page

Admin can view primary social profile information by visiting "Users" menu. A new column for "Primary Social Profile" can be found as shown in the image below.

Admin can view primary and linked social account information in the user edit profile page as well.

Frontend Behavior

Here are the front-end user experience:

User Info Received

This table shows the information that can be accepted by the plugin from each social network.

Note that there' s no way for us to pull the user's email from Twitter via their APIs, so we do prompt the user to enter an email address first time when sign-in in with Twitter so we can link that email address to his account.

Network	F Name	L Name	Username	Email	Photo	Cover Photo
Facebook	Y	Y		Y	Y	Y
Google	Y	Y		Y	Y
LinkedIn	Y	Y		Y	Y
Twitter	Y		Y	Y	Y	Y
Yahoo	Y	Y		Y	Y
Foursquare	Y	Y		Y	Y
Window Live	Y	Y		Y
VK	Y	Y		Y	Y
Instagram	Y	Y	Y		Y
Amazon	Y			Y
Paypal	Y	Y		Y

For Developers & Designers

We have Social Login Hooks Reference to provide a list of available filters and actions for theme developers.

Troubleshooting

Having trouble? Follow these steps to make sure everything is setup correctly before posting a support request :

Check that your App / Client IDs or keys are correct.
Double-check that your App / Client IDs or keys are correct. ;)
Not seeing social login buttons? Make sure that you are not already logged in, or use a different browser.
Submit a support ticket so we can troubleshoot further.

Social Login Demo

You can view a demo of the Social Login plugin here: WooCommerce Social Login Demo

Need Support

Created: July 30, 2014
By: WPWeb
Email: support@wpweb.co.in

If you have any question which you couldn't get answered within our documentation then feel free to email us on support@wpweb.co.in. If you have valid license key then please raise a ticket through our support system http://support.wpweb.co.in. We would also love to hear if you have any new Ideas for making our plugin even more rich with new features, Do visit our Ideas forum. Thank you.