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
