Checkouts are probably the most cruical aspect to any online shop. Any optimizations which can be made here for the customer, will yield significant gain.

One frustrating aspect about the Woocommerce default checkout form is that it has a lot of fields, and this can give the user some discomfort.

‘YITH Social Login for Woocommerce’ is a great plugin that can solve this issue. Once you have the plugin installed, navigate to YITH > Social Login as pictured below:

So to get this working, we need to register a free ‘App’ on the Google Console. This will give us the “Google ID” and secret for the boxes in the screenshot above.

Getting your ID and secret from Google

1. Visit this URL: https://developers.google.com/identity/sign-in/web/sign-in

2. Click “Configure Project”

3. Type in your website name so that Google knows what your App is going to be

4. Agree to the terms and click Next. Now from the type of application selct “Web server” and paste in the Calback URL from the YITH settings page (At the start of this post)

5. Click ‘CREATE‘. You will be given the Client ID and secret. Copy these into the YITH Settings page under ‘Google’ and hit save.

Styling the checkout page

Okay, so by default the icons are hidden on the checkout in a collapsible section. This is not conducive to a good user experience, and almost nullifies any effect of setting up the plugin.

Click ‘Customize’ on the admin bar, and in Custom CSS, paste this:

form.login.ywsl-box {
    /* Show the social icons by default */
    display: block;
    margin-top: 0;
    padding-top: 0;
}
a.show-ywsl-box {
    /* Hide the show/hide link for the social icons */
    display: none;
}
form.login.ywsl-box a {
    /* Space out the social icons a little */
    margin-right: 1em;
}

The end result is:

Help! I get a 403 error when trying to sign in!

Firstly, check the error logs on your server. If you have ModSecurity/Web Application Firewall enabled, make sure you disable the rule “210580”.