Woocommerce login and logout menu options

Want to make your WooCommerce store more engaging and user-friendly? Adding custom login and logout buttons is a simple but effective way to do it. In this guide, you’ll learn how to create a dynamic WooCommerce login/logout button using a flexible shortcode that you can fully customize.

🧩 Understanding the Code

The snippet below lets you display personalized login and logout buttons with adjustable colors, hover effects, and text styles.

function tr_dynamic_login_logout_button($atts) {
    // Set default attributes and merge with user-defined options
    $atts = shortcode_atts(
        array(
            'bg_color' => '#0073aa',      // Default background color
            'hover_color' => '#005f8c',   // Default hover color
            'text_color' => '#ffffff',    // Default text color
            'login_text' => 'Log in',     // Default login button text
            'logout_text' => 'Log out',   // Default logout button text
        ), $atts, 'tr_dynamic_login_logout'
    );

    $style = sprintf(
        'background-color: %s; color: %s; text-decoration: none; padding: 10px 20px; border-radius: 4px; display: inline-block;', 
        esc_attr($atts['bg_color']), 
        esc_attr($atts['text_color'])
    );

    $style_hover = sprintf('background-color:%s;', esc_attr($atts['hover_color']));

    $output = '<style>
        .tr-login-logout-button:hover {
            '. esc_attr($style_hover) . '
        }
    </style>';

    if (is_user_logged_in()) {
        $current_url = home_url(add_query_arg(array(), $_SERVER['REQUEST_URI']));
        $logout_url = wp_logout_url($current_url);
        $output .= '<a class="tr-login-logout-button" href="' . esc_url($logout_url) . '" style="' . $style . '">' . esc_html($atts['logout_text']) . '</a>';
    } else {
        $myaccount_page_id = get_option('woocommerce_myaccount_page_id');
        if ($myaccount_page_id) {
            $login_url = get_permalink($myaccount_page_id);
            $output .= '<a class="tr-login-logout-button" href="' . esc_url($login_url) . '" style="' . $style . '">' . esc_html($atts['login_text']) . '</a>';
        }
    }

    return $output;
}
add_shortcode('tr_dynamic_login_logout', 'tr_dynamic_login_logout_button');

🎨 Customizing Your Buttons

This shortcode allows you to tailor the button’s appearance to your brand’s design.
You can easily adjust the background color, hover color, text color, and even the button text directly from the shortcode.

✅ Example Usage:

[tr_dynamic_login_logout 
    bg_color="#1e73be" 
    hover_color="#164f7a" 
    text_color="#ffffff" 
    login_text="Login Now" 
    logout_text="Logout Now"]

⚙️ How It Works

Login Button (WooCommerce): When visitors are not signed in, they’ll see a styled login button linking to the My Account page.
Logout Button (WordPress): Once logged in, the same button dynamically changes to a logout option.
Custom Styles: Easily fine-tune colors and text to align with your site’s branding.

🚀 Why Use This Approach?

Dynamic login and logout buttons make your WooCommerce store smoother and more intuitive to navigate.
They offer users a clear, consistent way to access their accounts—without requiring any coding skills.

All you need to do is:

Copy the snippet into your theme’s functions.php file or a Code Snippets plugin.
Add the shortcode to any page, post, or widget.
Adjust the attributes to match your design.

💭 Final Thoughts

Don’t settle for a generic store interface.
By adding dynamic WooCommerce login and logout buttons, you’ll create a more personalized, professional, and user-friendly experience for your customers.

Upgrade your store today with simple, customizable login/logout buttons!

Tags: #DynamicLoginLogoutButtons #WooCommerceCustomization #WordPressShortcode

Write a comment