Herein contains adjustments to checkout screen

  • If anyone is looking for a way to adjust the checkout screen, this is my css code to do that. It will make the column for billing/shipping narrower and widen the order review column. As well, it fixes the width of a few columns in the name and address.

    It only does this on desktop, not mobile. Enjoy. I’ve just noticed that when scrolling down the div floats so I need to adjust that width in another edit.

    @media (min-width: 768px) {

    /* change layout of checkout screen. Narrow the billing/shipping details and widen the order details
    /* plus fix the width of a few columns in the name and address */

    h3#order_review_heading {
    float:left;
    }
    div.woocommerce-billing-fields > p.form-row-first {
    width:47% !important;
    margin-right:5% !important;
    }
    div.woocommerce-billing-fields > p.form-row-last {
    width:47% !important;
    margin-right:0% !important;
    }

    form > div#customer_details {
    width: 41%;
    margin-right: 2%;

    }
    #order_review {
    width:57%;
    }
    }

Viewing 1 replies (of 1 total)
  • Thread Starter Corbett Enders

    (@cenders)

    I’m using this code in the functions.php to remove the sticky checkout.

    add_action( ‘wp_enqueue_scripts’, ‘jk_remove_sticky_checkout’, 99 );

    function jk_remove_sticky_checkout() {
    wp_dequeue_script( ‘storefront-sticky-payment’ );
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Herein contains adjustments to checkout screen’ is closed to new replies.