Skip to main content

Theme Compatibility

OneTap Login is designed to work with any properly-coded WordPress theme. This guide covers compatibility with popular themes and how to handle theme-specific customizations.

General Compatibility​

Why It Works Everywhere​

OneTap Login uses:

  • Standard WordPress hooks (login_form, woocommerce_login_form)
  • Google Identity Services JavaScript (vendor script)
  • Minimal CSS that doesn't override theme styles
  • Standard WooCommerce action hooks

Requirements for Theme Compatibility​

Themes must:

  • Use standard WordPress login hooks
  • Include WooCommerce template hooks (for WC themes)
  • Allow JavaScript execution
  • Not aggressively block third-party scripts

Tested & Confirmed Themes​

WooCommerce Official​

Storefront​

Status: ✅ Fully Compatible

Integration Points:

  • My Account page
  • Checkout page
  • Cart page

Notes:

  • Default WooCommerce hooks work perfectly
  • No customization needed
  • Best baseline for testing

Astra​

Status: ✅ Fully Compatible

Integration Points:

  • All WooCommerce pages
  • wp-login.php
  • Custom login pages via Starter Templates

Notes:

  • Works with free and Pro versions
  • Compatible with Starter Templates
  • No conflicts with Astra's header/footer builders

Flatsome​

Status: ✅ Fully Compatible

Integration Points:

  • WooCommerce checkout
  • My Account
  • Custom UX Builder pages (via shortcode)

Notes:

  • Works with Flatsome's popup login
  • Shortcode works in UX Builder
  • May need CSS for positioning in custom layouts

OceanWP​

Status: ✅ Fully Compatible

Integration Points:

  • Standard WooCommerce pages
  • Custom login pages

Notes:

  • Works with both free and Pro
  • Compatible with Ocean Extra plugin
  • Header login button compatible

GeneratePress​

Status: ✅ Fully Compatible

Integration Points:

  • All standard locations
  • Works with Elements module

Notes:

  • Lightweight theme, no conflicts
  • Works great with GenerateBlocks
  • Premium modules compatible

Kadence​

Status: ✅ Fully Compatible

Integration Points:

  • WooCommerce pages
  • Kadence Blocks login forms

Notes:

  • Works with free and Pro
  • Compatible with Kadence Blocks
  • Header/footer builder compatible

WooCommerce-Focused Themes​

Flavflavor (ThemeForest)​

Status: ✅ Compatible

Notes: Test with demo content first.

Porto​

Status: ✅ Compatible

Notes:

  • Works with Porto's AJAX login
  • May need CSS adjustments
  • Test checkout thoroughly

Flavor / flavour themes​

Status: ⚠️ Test Required

Notes: Various themes with this name; test individually.

Divi (Elegant Themes)​

Status: ✅ Fully Compatible

Integration Points:

  • WooCommerce pages
  • Divi Builder pages (via shortcode)
  • Custom login modules

Notes:

  • Use Code Module for shortcode
  • Works with Divi's WooCommerce modules
  • Theme Builder templates supported

Shortcode in Divi:

  1. Add Code Module
  2. Insert [onetap_button]
  3. Style with Divi controls

Elementor-Based Themes​

Hello Elementor​

Status: ✅ Fully Compatible

Notes:

  • Minimal theme, no conflicts
  • Use with Elementor Pro for best results

Starter Templates (by Starter Sites)​

Status: ✅ Compatible

Notes: Based on Starter Templates plugin.

Classic Themes​

Twenty Twenty-Four​

Status: ✅ Fully Compatible

Notes: WordPress default theme, perfect compatibility.

Twenty Twenty-Three​

Status: ✅ Fully Compatible

Notes: Block theme, works well.

Twenty Twenty-One / Twenty / Nineteen​

Status: ✅ Fully Compatible

Notes: Classic themes, standard hooks work.

Theme Builder Compatibility​

Global Headers​

If your theme uses global headers with login:

Theme Header → Login Button → Triggers modal →
Google Sign-In appears in modal

Supported:

  • Astra header login
  • Kadence header account icon
  • OceanWP top bar login
  • GeneratePress Elements

Custom Login Modals​

For themes with AJAX login modals:

// Add Google button to modal
add_action('theme_login_modal_form', function() {
    echo do_shortcode('[onetap_button]');
});

CSS Customization​

Button Positioning​

If button needs repositioning:

/* Center the Google button */
.onetap-button-container {
    text-align: center;
    margin: 20px 0;
}

/* Adjust button width */
.onetap-button-container iframe {
    max-width: 100%;
}

One Tap Popup Position​

One Tap position is controlled by Google, but you can influence:

/* Move One Tap popup */
#credential_picker_container {
    top: 100px !important; /* Adjust from top */
    right: 20px !important; /* Adjust from right */
}

Note: Google may override these in future updates.

Theme Conflicts​

If button overlaps theme elements:

/* Ensure proper z-index */
.onetap-button-container {
    position: relative;
    z-index: 100;
}

/* Clear floats if needed */
.onetap-button-container::after {
    content: "";
    display: table;
    clear: both;
}

Common Theme Issues​

Issue: Button Hidden​

Symptoms: Button doesn't appear

Causes:

  • Theme CSS hiding .g_id_signin
  • Overflow hidden on parent container
  • JavaScript conflict

Solutions:

/* Force visibility */
.onetap-button-container,
.g_id_signin {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

Issue: One Tap Behind Header​

Symptoms: One Tap appears but is partially hidden

Causes:

  • Fixed/sticky header with high z-index
  • Theme modal overlay

Solutions:

/* Raise One Tap z-index */
#credential_picker_container,
#credential_picker_iframe {
    z-index: 999999 !important;
}

Issue: Button Styling Broken​

Symptoms: Button looks distorted

Causes:

  • Theme global CSS affecting iframes
  • Box-sizing conflicts
  • Font inheritance issues

Solutions:

/* Reset iframe styling */
.g_id_signin iframe {
    box-sizing: content-box !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

Issue: Checkout Not Working​

Symptoms: Button on checkout doesn't function

Causes:

  • Theme AJAX checkout
  • Distraction-free checkout mode
  • JavaScript loading order

Solutions:

  1. Test with theme checkout features disabled
  2. Check JavaScript console for errors
  3. Ensure OneTap scripts load before checkout

Page Builder Specific​

Elementor​

Integration:

  1. Use Shortcode widget
  2. Insert [onetap_button]
  3. Style with Elementor spacing controls

With Elementor Pro Login Widget:

  • Google button appears below form
  • Or add custom shortcode widget

Divi Builder​

Integration:

  1. Use Code Module
  2. Add shortcode
  3. Style with Divi settings

With Divi Login Module:

  • Add Code Module after Login Module
  • Insert shortcode

WPBakery​

Integration:

  1. Use Raw HTML element
  2. Insert shortcode
  3. Apply custom CSS class if needed

Beaver Builder​

Integration:

  1. Use HTML Module
  2. Insert shortcode
  3. Style with module settings

Brizy​

Integration:

  1. Use Shortcode element
  2. Insert [onetap_button]
  3. Adjust layout settings

Testing Theme Compatibility​

Quick Test​

  1. Install OneTap Login
  2. Configure credentials
  3. Test on:
    • wp-login.php
    • My Account page
    • Checkout page (if WooCommerce)

Full Test​

  1. Visual check:

    • Button appears correctly
    • One Tap popup visible
    • No layout shift

  2. Functional check:

    • Google authentication works
    • User created/logged in
    • Redirect works

  3. Mobile check:

    • Test on mobile devices
    • Check touch targets
    • Verify popup behavior

Getting Theme Support​

If Issues Occur​

  1. Test with default theme:

    • Switch to Twenty Twenty-Four
    • If works, issue is theme-specific

  2. Check theme hooks:

    • Verify theme uses standard hooks
    • Check if hooks are filtered/removed

  3. Contact theme developer:

    • Report missing hooks
    • Request compatibility

  4. Use shortcode:

    • Manual placement via shortcode
    • Works anywhere PHP allowed

Custom Theme Development​

Ensuring Compatibility​

When developing custom themes:

// Include standard WooCommerce hooks
do_action('woocommerce_login_form_start');
do_action('woocommerce_login_form');
do_action('woocommerce_login_form_end');

// Include standard WordPress login hooks
do_action('login_form');

Custom Login Template​

// In your custom login template
<form method="post" action="<?php echo esc_url(wp_login_url()); ?>">
    <!-- Your form fields -->

    <?php do_action('login_form'); // OneTap hooks here ?>

    <button type="submit">Log In</button>
</form>

Best Practices​

Do's​

  • Test with theme's default settings first
  • Check mobile responsiveness
  • Test checkout flow completely
  • Use shortcode for custom placements
  • Keep theme updated

Don'ts​

  • Don't assume compatibility without testing
  • Don't modify core plugin files
  • Don't hide elements with CSS without checking
  • Don't skip mobile testing

Next Steps​