Style Magento checkout form fields without touching the core code

Although I can change css complete restyle the checkout forms, this is not what I want to discuss today. What I want to achieve are:

  1. fix City required asterisk not showing bug
  2. change Address lines from full width to half width as City

The City required asterisk is hidden by a javascript wrongly. I found City and State/County/Province are put into one li, i.e. <li><div></div></li>. It might be something should happen on State/County/Province but happens on City. If I close li after City, and reopen it before State/County/Province, bug is fixed. By the way, I hide State/County/Province.

To show a field in full length, Magento uses
<li><label><span></span></label><input/></li>
To show a field in half length, Magento uses
<li><div><label><span></span></label><input/></div></li>

So just find the right place to insert <div> and close it for Address lines, I easily style them to the same length of City.

Leave a comment

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