WooCommerce 2.3 Handsome Hippo

WooCommerce 2.3 – Users and Developers

WooCommerce 2.3 aka “Handsome Hippo” has arrived on the market.

This update primarily targets front-end editing experience with lots of changes made to the default way that elements appear. Additionally, simple steps in any product purchase experience have been streamlined for end users (ie. checking out).

But wait! Before you update your website, check out what is new to see if this is right for you or your clients’ websites.

WooCommerce 2.3 for website owners

Want to position the benefits of the newest update to your client? Want to update on your own site? As the website owner, here are the changes in WooCommerce 2.3 to get you excited.

Improved button look

The most immediately obvious improvement in WooCommerce 2.3 is the look of the buttons. Going with modern flat design as the backbone, the new buttons are flat and more attractive to the modern web.

WooCommerce 2.3 Handsome Hippo

It is important to note that button styling will not be affected if you are using custom styling on the current buttons in 2.2.

For example, our Capture theme is styled to support WooCommerce and style the buttons to look like the rest of the theme and theme colors. With our other themes, where WooCommerce is supported but buttons have no new styling, they will inherit the new styling of the buttons in WooCommerce 2.3.

Either way, the new buttons look good and will be a welcome new addition to the plugin.

New colors and plugin

The next major change to the workflow of WooCommerce with Handsome Hippo is the migration of certain customizations to separate plugins. This means that to get some of the customization that you previously had built in to the plugin, you will have to get the new free plugins.

WooCommerce 2.3 new colors

Here are the new plugins for WooCommerce 2.3 and how to download them:

You will notice in the above screenshot that color management is handled in the WordPress customizer and that the increment button is missing (this should be next to the increment and add to cart). This may affect some of the styling on your website. You may want to get with your developer if you are unsure about how these changes may affect your website.

Geolocation


Geolocation technology is also included to streamline the customer experience.

Here is an official note on geolocation from the development team at WooThemes:

We’ve included a new Geolocation class and changed the way taxes are displayed to customers on the frontend. Customers will now see taxes based on their address, and you have the option to enable their location to be geolocated when they visit your store.

This update to geolocation does two things for your customer.

  1. Allows to calculate taxes automatically when they enter their address in the checkout
  2. Additionally, geolocation can be used with location services to automatically determine where the customer is viewing to provide more immediate feedback

Check with your web host about browser caching to see if you can use features like this comfortably as you may run into errors.

Checkout and Cart interface on WooCommerce 2.3

The checkout and cart display also received an overhaul. You will still need to verify the page that each section references, but the display looks a bit more modern on 2.3.

Cart WooCommerce 2.3

The “Proceed to Checkout” button and text are a bit more clean to match modern standards.

Checkout page woocommerce 2.3

The checkout page has a stripped down feel and the coupon code entry space is cleaner. This should help to improve conversion as it is a less cluttered and more open interface. You will still need to do your part and optimize your checkout page a bit to maximize conversion, but the steps WooThemes have taken are welcome.

For Developers

Business owners and end users don’t get to have all of the fun. Here are some changes you can expect as a developer using WooCommerce 2.3, “Handsome Hippo.”

Webhooks

For working with external sites or other API, as a developer you may be using webhooks as certain triggers occur on the website. From certain dates to the initiation of a sale, you may need to communicate with an external service.

To make this more welcome to developers, WooCommerce 2.3 has a setting tab specifically for Webhooks, which can be found under WooCommerce > Settings.
Blue_Shell_Shirt_-_Your_Business_Website

Increment buttons and Color

While this was mentioned above as an end user, it should be noted here that WooCommerce 2.3 separates color changes and increment buttons to separate plugins that you will have to install.

This may affect some of the styling, but will not affect button styling if it was already custom styled on your or your client’s website.

What to do before upgrading to WooCommerce 2.3

Check with your developers and check your styling to see if any of the new front end changes could affect the layout of your site and break any functionality.

While a few updates have already gone out — at time of posting, WooCommerce is already at 2.3.4 — these are more technical fixes that affect smaller user cases. For the most part, you should be safe to upgrade your website to 2.3.

Have any questions? Let us know in the comments below.

We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure

2 thoughts on “WooCommerce 2.3 – Users and Developers”

  1. Hello, I am trying to change the color scheme on the WooCommerce icons that appear depending upon the action taken… add a coupon and the icon changes to a circle with a checkmark in the center. (In your example above, the circle with the checkmark is green and it says “Cart updated next to it.). Add the wrong coupon and the icon changes to a circle with an exclamation point in the center… etc. The icon that I want to change is the “note” icon that you have depicted above that looks like a little note. In your example, it’s blue and it says “Have a coupon?” next to it. Do you know the CSS that I would need in order to change that note’s color?

Leave a Comment

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