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