Order Form for WooCommerce supports responsive design

Order Form for WooCommerce version 1.7.0 has just been released. It adds support for responsive CSS to better fit order forms on small screens.

I’ve been asked for some time why I didn’t make the order forms more mobile-responsive. My view has long been that responsive design is the domain of themes, and plugins can best help by keeping out of the way rather than adding their own CSS to the mix. The CSS for Order Form for WooCommerce has been kept fairly minimal so that it doesn’t get in the way.

But I’ve now relented, and added responsive design support.

An order form as it appears on iPhone
An order form as it appears on iPhone

The order forms are still HTML tables — this is the most suitable format for order forms on the desktop, so there has been no change there. On smaller screens, however, there is now some responsive CSS that disassembles the tables so that they can be viewed more easily.

For web builders who would rather not have this CSS interfere with their theme’s CSS, firstly be assured that the new CSS only applies to the tables in the order forms. Secondly, you can easily turn it off via three different methods:

If you prefer to build the form with divs / list items / etc. rather than tables, you can still do that by overriding the form template. I’ve seen a rather nifty implementation of this from the Netherlands!

You can update to the latest version from your WordPress plugin admin page. Here’s the full changelog for Order Form for WooCommerce.