The Handsome Hippo is strutting along nicely and the release is beginning to take shape. As the name suggests the main focus for this release is UI and UX beautification which will result in some significant changes to the frontend design.
Depending on how your theme integrates with WooCommerce, this could have a big impact on your product so we strongly recommend that you begin testing/playing with the bleeding WooCommerce version ASAP.
In this post I’ll list many of the changes we’re making, but keep in mind that it’s not final. More things might change before release so please keep up to date. Check early and check often!
For themes that provide a deep integration with WooCommerce (IE remove our CSS in favour of enqueueing their own) things will be simpler. But you may still wish to add some styles for new / tweaked elements.
For themes that simply overwrite our bundled CSS (please stop doing this, guys) and/or template files, things could be more complicated. You will need to work through your theme accordingly paying close attention to all details.
The list
- All design elements now feature a ‘flat’ design ensuring WooCommerce provides a modern aesthetic that blends nicely with many theme styles. Check:
- Messages
- Buttons
- Tabs
- Demo store notice
- Sale flashes
- Price Slider widget
- Payment box at checkout
- Frontend style settings (allowing folks to change button colors etc) have been removed in favour of a separate plugin. If your theme interacted or relied on these settings keep an eye out for the upcoming plugin.
- The increment and decrement buttons attached to quantity inputs have been removed now that support of
input type="number"is more widespread. A separate plugin will be released for folks who want to add this back in. - The ‘Proceed to checkout’ button on the cart has been moved and is now located beneath the cart totals. Obviously this is a crucial design element so if your theme overwrites any cart template files please double check this. We’ve tried to make this change as backwards compatible as possible, though.
- In the cart widget, it is now possible to remove products.
- WooCommerce now loads dashicons for the animated loading graphic used by blockUI. Feel free to utilise this without enqueueing it separately.
- Some tables have been made responsive such as the orders table on the my-account page. If you want to add style for this to your theme, activate Twenty Twelve and check the core CSS used to achieve responsive tables. The class
.shop_table_responsivehas been added for this purpose.
Hopefully this gives you guys a heads up on what’s happening on the frontend of WooCommerce 2.3. I highly recommend that any theme authors start looking at this as early as possible, even before we enter the beta stage.
As I said earlier, themes that simply overwrite our own CSS will be most affected by these changes. To re-iterate, this is a bad practise that we do not recommend. Why not make the switch and do things properly now? 🙂
Leave a Reply