How to Add WooCommerce Social Login to WordPress Sites

Are you looking for a way to let your social media followers log in to your WooCommerce site easily? Consider adding WordPress social login to your website.

By adding social login to WooCommerce, you offer site visitors a quick way to log in using their social media account credentials.

However, the only problem is WooCommerce by default doesn’t offer a social login option for your e-commerce site. It only lets you offer a simple login and registration form to site visitors requiring them to create a new account with new credentials.

The good news is that you can create a custom login and registration form on your WooCommerce site using a plugin like ProfilePress.

In this article, we’ll show you how you can add social buttons to the WooCommerce login form and replace the default WooCommerce one with the custom ProfilePress ones.

Why you should add social login to WooCommerce?

As an online store owner, you probably already know that WooCommerce by default offers limited options for site visitors to log in to your website.

All site visitors will have to first register on your website using a unique username and their email address before they can access the content. The default login forms not only look basic but also offer limited options for users to quickly register and log in to your WooCommerce site.

The default WooCommerce forms are not designed to let your users log in to your website using their social media accounts. Since lots of people have social media accounts on platforms such as Facebook, Twitter, or Google, it makes it easier to use those account details to log in to your store.

Here are some more reasons why adding social login to your WooCommerce site is useful:

• Letting all types of users register and log in to your site. Since most people already have social media accounts ready to go, you can make your WooCommerce site much more accessible and welcoming for all types of users. Users that already have a registered Facebook account can easily register and log in to your website within a few clicks.

• Offer a friendly user experience. Offering a friendly user experience on your WooCommerce site encourages people to make more purchases and improves customer retention. Think about it: if it is easy for customers to log in to your WooCommerce site and place their orders, there’s a higher chance those same customers will return back to your online shop next time.

• Encourage more people to register. By offering easy, one-click sign-up and login, you encourage more people to register on your WooCommerce site. This is a great way to build your email lists and enhance your email marketing campaigns.

• Convert your social media following into registered users on your site. If your business has a huge following on social media platforms, it might be a great idea to divert all the attention towards your WooCommerce site. You can do this by offering social login buttons on your WooCommerce site so that your audience has an easier time accessing your WooCommerce site.

The easiest way to add social login to default WooCommerce

While there are many plugins you can use to add social login buttons on your WooCommerce site, ProfilePress is the only solution that stands out.

ProfilePress is a professional user profile and membership plugin that comes built-in with powerful form builders and advanced customizations.

You can create attractive-looking custom forms for the default WooCommerce login and registration pages without having to write a single line of code. In addition to this, you can also create member directories and showcase all your registered members on the front-end of your WooCommerce site. The best part about ProfilePress is that you can use the pre-designed templates to quickly create custom forms and then personalize them according to what you need.

Using the ProfilePress plugin, you can add social login buttons to a custom ProfilePress login form and replace it with the default WooCommerce registration and login form on the “My Account” page.

Adding social login to WooCommerce using ProfilePress

Here, we’ll show you how easy it is to add social login to WooCommerce using ProfilePress.

For this tutorial, you’ll need to have the WooCommerce plugin installed on your WordPress site. You will also need the ProfilePress plugin to add custom login forms with social login buttons on your WooCommerce site.

Step #1: Install and activate ProfilePress

To get started, get the ProfilePress plugin and install it on your WordPress site.

Navigate to Plugins → Add New from the WordPress admin panel and click on the Add New button. Now, upload the zip file and proceed to install the plugin on your WooCommerce site.

Step #2: Create a custom login form

With the ProfilePress plugin ready to go, you can start creating a custom login form with social media buttons added to it. Make sure to enable the Social Login add-on first by navigating to the ProfilePress → Addons screen.

Once that’s done, go to ProfilePress → Forms & Profiles and click on the Add New button.

Select the Drag & Drop Builder and give your custom login form a new title. Now select a template to start editing the login form. We’ve selected the Bash template to demonstrate.

Once you click on the Select Template button, it will automatically redirect you to the form edit page where you can add extra fields as well as the social media login buttons.

Step #3: Add social login buttons

You can add multiple social login buttons and drag-and-drop add or remove extra fields to your login form from this page.

You can also edit each field and customize the field text displayed on the front-end of your WooCommerce site.

Simply click on the settings icon while hovering your mouse over the field and click on the Apply changes button once you’re done. Once you’re done with customizing the fields, you can use the Form Settings meta box to add social media login buttons to your login form.

Using the Appearance tab, add social media accounts using the Social Login Buttons text field. You can also customize the button text for submit buttons and text field placeholders for your custom login form.

Once you’re done, make sure to click on the Apply Changes button to continue.

Step #4: Replace the default WooCommerce login form

Copy the custom login form shortcode and navigate to Pages → Add New to create a new social login page on your WooCommerce site.

Simply paste the login form shortcode using the Shortcode block and click on the Publish button to continue. Now all that’s left to do is configure the actual social login in settings and replace the default WooCommerce login form with the one we just created.

To set the page we created as the default WordPress login page globally on our site, navigate to ProfilePress → Settings and select the newly created login page using the Login Page dropdown under the Global Settings tab.

To set up the actual social login process, navigate to ProfilePress → Settings and click on the Social Login tab to set social login settings.

Here, you can enter set up API keys for all social media accounts so that the different social apps integrate seamlessly with ProfilePress social login forms. After entering the API keys for social media platforms, click on the Save Changes button.

In addition to this, you can also change the button text on the social login buttons by going to the Buttons tab.

Once you’re done make sure to click on the Save Changes button.

To replace the default Registration and Login forms shown in the WooCommerce My Account page; click on the WooCommerce tab and select your newly created social login page using the My Account Login Form and My Account Registration Form dropdown fields.

Here’s how it might look on your WooCommerce My Account page depending on the form theme you selected.

You can also replace the default WooCommerce login form at checkout with a ProfilePress login form with social login. To do this, simply select the login page that contains the login form with social logins we created earlier using the Checkout Login Form dropdown menu.

Click on the Save changes button to continue.

Clicking on the social login buttons will redirect users to the login authentication page.

Customers can also log in from the WooCommerce checkout page using their social media accounts.

Conclusion

Adding social login buttons to your WooCommerce site is a great way to encourage more registrations as well as improve the user experience on your site. This is especially useful for businesses that already have a huge following on their social media accounts.

However, you’re limited by the default WooCommerce functionality when it comes to offering social login on your site. This is why we recommend using a dedicated custom form builder plugin such as ProfilePress to replace the default, generic-looking login form on your WooCommerce site.

Looking for an easy way to add social login to your WooCommerce site? Get ProfilePress today!