Reserve Your Free Seat for Our Next WooCommerce Class! Search
Business Bloomer
  • Business Bloomer Club
  • WooCommerce Plugins
  • WooCommerce Tips
  • Log In
  • 0
  • Business Bloomer Club
  • WooCommerce Plugins
  • WooCommerce Tips
  • Log In
  • Search
  • Contact
  • Cart
WooCommerce Code Snippets Customer Login

WordPress: Custom Logo @ WP Login Page

Last Revised: May 2021

STAY UPDATED

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

My custom Login page: I’ve added my own logo and also made sure to link to my website and not wordpress.org

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

6 thoughts on “WordPress: Custom Logo @ WP Login Page”

  1. salah
    September 22, 2021

    Hey Rodolfo
    Thanks a lot for all the tips you share, it is just awesome!
    One question about the code snippet you shared

    return home_url( '/' );

    How do I make the return to a custom URL instead of Home_url ?

    Thanks in advance

    Reply
    1. Rodolfo Melogli
      September 27, 2021

      You can always specify the URL:

      return 'https://example.com';
      Reply
  2. Edwin Karuga
    August 18, 2021

    Thank Rodolfo, Every time I learn something from you that makes my WooCommerce experience better!

    Reply
    1. Rodolfo Melogli
      August 20, 2021

      Cheers!

      Reply
  3. fabian
    August 8, 2021

    Thank you, works as expected – WordPress 5.8

    Reply
    1. Rodolfo Melogli
      August 20, 2021

      Awesome

      Reply
Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Cancel reply

Your email address will not be published. Required fields are marked *


Search WooCommerce Tips

Popular Searches: Visual Hook Guides - Checkout Page - Cart Page - Single Product Page - Add to Cart - Emails - Shipping - Prices - Hosting

Recent Articles

  • WooCommerce: How to Stop Spam Orders on Free Products
  • WooCommerce: How to Configure Product and Order Sync
  • WooCommerce: “Beautify” Item Meta in Order Emails
  • WooCommerce: Per-Product Checkout Fees / Tariffs
  • WooCommerce: Auto-Cancel Orders After 3 Failed Payments

Latest Comments

  1. Rodolfo Melogli on WooCommerce Visual Hook Guide: Checkout Page
  2. Rodolfo Melogli on WooCommerce: Prevent Duplicate Orders
  3. Rodolfo Melogli on WooCommerce: Hide Checkout Fields if Virtual Product @ Cart

Find Out More

  • Become a WooCommerce Expert
  • Business Bloomer Club
  • WooCommerce Blog
  • WooCommerce Weekly
  • Contact

Contact Info

Ciao! I'm Rodolfo Melogli, an Italian Civil Engineer who has turned into an international WooCommerce expert. You can contact me here:

Twitter: @rmelogli

Get in touch: Contact Page

Business Bloomer © 2011-2025 - VAT IT02722220817 - Terms of Use - Privacy Policy

Cart reminder?

x