This blog post was inspired by Elias’ tweet.
5 ways how to fight with complexity in User Interfaces. pic.twitter.com/SS1wZraiM3
— Elias (@elias_kov) November 9, 2017
The Woocommerce checkout page is overwhelming with fields.
This can deter user’s placing orders.
It also requires personal information that is unnecessary, like a phone number.
This post will walk through the simplification of the Woocommerce checkout page using CSS and php.
First let’s analyze what we don’t want on the page.
The company name, second address, phone, create account div, check box and order notes are the points of concern.
To clean this up, all we need to do is hide the elements with some custom CSS.
Copy and paste the CSS below into the custom CSS section of your theme.
#order_comments_field { display: none;
}
#billing_phone { display: none;
}
#billing_phone_field { display: none;
}
#billing_company_field { display: none;
}
#shipping_company_field { display: none;
}
#ship-to-different-address-checkbox { display: none;
}
.create-account { display: none;
}
#billing_email_field { padding-left: 0px;
}
.woocommerce-info { display: none;
}
#billing_address_2 { display: none;
}
#shipping_address_2 { display: none;
}
/* virute theme specific */
.about_paypal { display: none;
}
.icon-arrow-up { display: none;
}
#topcontrol { display: none;
}
Hit the save button and your all set.
How To Make Phone Number Not Required On Woocommerce Checkout
You may have noticed earlier that the Phone field wasn’t required. Woocommerce out of the box comes with it required, but a little php code can eliminate that.
To begin, log into your cpanel and go to file manager.
public_html/yourdomain.com/wp-content/themes/yourtheme
and look for the functions.php and click edit.
Finally you’ll paste this code at the bottom of that code before the closing tag.
add_filter( ‘woocommerce_billing_fields’, ‘wc_npr_filter_phone’, 10, 1 );
function wc_npr_filter_phone( $address_fields ) {
$address_fields[‘billing_phone’][‘required’] = false;
return $address_fields;
}
After that the phone number will no longer be required for checkout.
I hope this was helpful.
I <3 TO Chat! Hit Me Up On Twitter & Linkedin
