Checkout Without Distraction

Hide the site header and footer on the checkout page.

PHP
/**
 * Snippet Name:     Checkout Without Distraction
 * Snippet Author:   coding-bunny.com
 * Description:      Hide the site header and footer on the checkout page.
 */
 
/* Remove Header on Checkout */
function cb_remove_header_on_checkout() {
    // Check if we're on the checkout page and not on the "order received" endpoint
    if ( is_checkout() && ! is_wc_endpoint_url( 'order-received' ) ) {
        // Output the CSS to hide the header only on the checkout page
        ?>
        <style>
            header {
                display: none; /* Hide the header on checkout page */
            }
        </style>
        <?php
    }
}
add_action( 'wp_head', 'cb_remove_header_on_checkout' );

/* Remove Footer on Checkout */
function cb_remove_footer_from_checkout() {
    // Check if we're on the checkout page and not on the "order received" endpoint
    if ( is_checkout() && ! is_wc_endpoint_url( 'order-received' ) ) {
        // Output the CSS to hide the footer only on the checkout page
        ?>
        <style>
            footer {
                display: none; /* Hide the footer on checkout page */
            }
        </style>
        <?php
    }
}
add_action( 'wp_head', 'cb_remove_footer_from_checkout' );

How To Implement This Solution?

Leave a Reply