WordPress: Custom Logo @ WP Login Page

It’s once again WooCommerce customization time! As in the past 2 episodes (open external product in new tab and show shipping rates @ single product), I’m featuring snippets and code I personally use on my Sicilian marketplace/dropshipping business called A Piece of Sicily.

Today, I’ll quickly show you how to personalize the default WordPress login/logged out page with your custom logo and link as opposed to showing the WordPress logo and the wordpress.org image link, which to be completely honest, shouldn’t be there in the first place!

So, enjoy! You can see the live result here: https://www.apieceofsicily.com/en/login/?loggedout=true

PHP / CSS Snippet: Replace WordPress Logo With Custom Logo @ WordPress Login Page

/**
 * @snippet       Replace Logo - WordPress wp-login page
 * @how-to        businessbloomer.com/woocommerce-customization
 * @author        Rodolfo Melogli, Business Bloomer
 * @compatible    WooCommerce 5.1
 * @community     https://businessbloomer.com/club/
 */

add_action( 'login_enqueue_scripts', 'bbloomer_login_logo' );

function bbloomer_login_logo() {
	?>
    <style type="text/css">
        #login h1 a, .login h1 a {
           background-image: url(/wp-content/uploads/2020/03/PNG-RGB-1536x830.png);
           height: 150px;
           width: 250px;
           background-size: contain;
           background-repeat: no-repeat;
           background-color: transparent;
		}
    </style>
	<?php
}

add_filter( 'login_headerurl', 'bbloomer_login_logo_link' );

function bbloomer_login_logo_link( $url ) {
    return home_url( '/' );
}

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

• WooCommerce: Separate Login, Registration, My Account Pages
  There are times when you need to send logged out customers to a Login page and unregistered customers to a standalone Register page. As you…
• WooCommerce: Login Redirect by User Role @ My Account
  There are times when you don’t want customers to login and be redirected to the default “My Account” dashboard. Maybe because you have a membership…
• WooCommerce: Login Redirect to Previous URL @ My Account
  We’ve already seen how to set a custom My Account login redirect URL by user role – but today we want to cover another case…
• WooCommerce: Custom Login Redirect @ My Account
  The WooCommerce My Account login form redirects to… itself once a WordPress user logs in. So, what if you want to redirect logged in users…
• WooCommerce: Show/Hide Registration Form on Login Page
  WooCommerce by default displays both login and registration forms on the same page when “Allow customers to create an account“ is enabled on the My…

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli