fbpx

How to customize the woocommerce checkout page for free

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Do you want to customize the woocommerce checkout page?

In this video, I’ll show you how to customize the woocommerce checkout page for free and give a highly optimized checkout experience to your customers.

This type of checkout pages are great for selling digital products and online courses.

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

PHP

function wc_remove_checkout_fields( $fields ) {

    // Billing fields
    unset( $fields['billing']['billing_company'] );
	unset( $fields['billing']['billing_country'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
	unset( $fields['billing']['billing_last_name'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );

    // Shipping fields
    unset( $fields['shipping']['shipping_company'] );
	unset( $fields['shipping']['shipping_country'] );
    unset( $fields['shipping']['shipping_phone'] );
    unset( $fields['shipping']['shipping_state'] );
    unset( $fields['shipping']['shipping_first_name'] );
    unset( $fields['shipping']['shipping_last_name'] );
    unset( $fields['shipping']['shipping_address_1'] );
    unset( $fields['shipping']['shipping_address_2'] );
    unset( $fields['shipping']['shipping_city'] );
    unset( $fields['shipping']['shipping_postcode'] );

    // Order fields
    unset( $fields['order']['order_comments'] );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields)
 {
 $fields['billing']['billing_first_name']['label'] = 'Name';
 return $fields;
 }

CSS

@media screen and (min-width: 768px){
.wcf-embed-checkout-form .woocommerce-checkout .col2-set, .wcf-embed-checkout-form .woocommerce-checkout .wcf-col2-set{
	width:100%;
}
.wcf-embed-checkout-form-two-column .woocommerce-checkout .wcf-order-wrap{
	width:100%;
	padding:0;
}
}
.wcf-embed-checkout-form .woocommerce form .woocommerce-billing-fields__field-wrapper .form-row-first{
	width:100%;
}
.woocommerce-additional-fields{
	display:none;
}

Recommendations

Hosting: GreenGeeks

Theme and plugins used

You may also like

Recent Posts

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
website design illustration

Learn The Exact Steps I Follow To Create WordPress Websites

Easily create WordPress websites for yourself and others following my 2 hrs FREE WordPress Training (Video).