Attention theme authors. Frontend changes ahead in WooCommerce 2.3.

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_responsive has 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? ๐Ÿ™‚


Keep yourself in the loop!

Sign up for the WooCommerce developer newsletter:
Hidden
Hidden
Hidden


17 responses to “Attention theme authors. Frontend changes ahead in WooCommerce 2.3.”

  1. Rafael Angeline Avatar
    Rafael Angeline

    Hi!

    Do you guys have an estimative of when will it be avaliable to public download?! This way I can alocate my team properly to migrate to this new version.

    Kind Regards.

  2. Hey Rafael. You’d be able to download the latest working copy here – https://github.com/woothemes/woocommerce

    When the Beta Release is ready, we’ll post about it here.

    1. Rafael Angeline Avatar
      Rafael Angeline

      Thank you Bryce!

      Well, it’s better already prepare to do some work hehehe

      Kind Regards.

  3. Hey Bryce,

    Any timeframe for the final release ?

    1. jameskoster Avatar
      jameskoster

      Nothing definitive. We’ll say Q1 2015 for now ๐Ÿ™‚

  4. WooCommerce now loads dashicons for the animated loading graphic used by blockUI

    Can you explain this further or screenshot what you mean? Is this the only Dashicon used? And it’s front-end? Seems a wasted font load if so. I’d think SVG would be better if possible. unless I’m thinking of the wrong thing.

    1. jameskoster Avatar
      jameskoster

      Frontend and backend. We use a couple of the arrow icons on the frontend as well. You might be right that it’s not the best use of resources, could switch to svg if we don’t peruse any other icons during the design tweaks.

  5. I have a question regarding your statement:

    “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?”

    I’ve only built a single theme, based on the design for my husband’s website. It was my first crack at it, and I’m not sure I did everything properly.

    For the CSS styles, I essentially copied the entire contents of the woocommerce.css file and pasted it at the end of my own styles.css file and just made adjustments as necessary to fit my overall theme design. Is that the bad practice you speak of? ๐Ÿ™‚ If so, how can I fix it?

    I’ve also copied certain template files and placed them in a ‘woocommerce’ folder in my theme folder to overwrite woocommerce plugin template files, again, to better fit my theme design. Is this also bad practice?

    I don’t pretend to be the best at theme development, or even code, but I do want to be sure I’m doing the best I can at doing it properly.

    1. Anyone? ๐Ÿ™

    2. Mike Jolley Avatar
      Mike Jolley

      I believe James was mostly referring to commercial themes which add/override styles rather than defining their own CSS and de-enqueueing ours.

      This doc shows hows to de-enqueue our styles completely http://docs.woothemes.com/document/disable-the-default-stylesheet/

      1. Thanks Mike! Still a newb. ๐Ÿ™‚

    3. jameskoster Avatar
      jameskoster

      As long as you dequeued the WooCommerce core css (no point loading it twice) this is not bad practise. You should still check your site though as some elements have moved and your selectors might need a tweak.

  6. Why not just put a conditional on your front-end JS for 3.8 so spinners are not destroyed for all? Here’s working code I just added, but I’d rather have it be part of Woo because it’s woo stuff. Much better than an extra “plugin.” https://gist.github.com/dovy/03bb1e04d5c3585a71c2

  7. Hi i am developed a theme and want to release , i don’t want after just release my theme u release your plugin its effect my sales , please tell me r u going to release it in feb ?
    and how i know and access it before it release Many thanks

    Please Reply as soon as possible

    1. Yes it will be released in feb.

  8. Christian Thibault Avatar
    Christian Thibault

    What would be the proper way to customize a theme. All I find online is copying the template files to the theme or the child theme, but when you update WC, you modify the structure of the theme, and most customization is gone.

  9. Hmm, a lot of changes. It took me 1 hour to figure out why quantity buttons (plus, minus) are missing. I also checked the StoreFront demo theme from WooThemes and it looks like using the old version. Please update your demos so we can preview (and check) changes easily.

    Thanks.

Leave a Reply

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