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.
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:
- there’s a new setting for enabling the responsive CSS (defaults to on)
- there’s a new shortcode attribute, responsivecss, which you can apply to individual forms
- there’s a new filter hook, orderform_woocommerce_responsive_css, for finer control
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.