WooCommerce 2.3 - Users and Developers

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

Comments

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

gform.initializeOnLoaded( function() {gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery('#gform_ajax_frame_2').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;var mt = parseInt(jQuery('html').css('margin-top'), 10) + parseInt(jQuery('body').css('margin-top'), 10) + 100;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_2').offset().top - mt); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'https://slocumthemes.com/wp-content/plugins/gravityforms/images/spinner.svg', true );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_2').offset().top - mt);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;wp.a11y.speak(jQuery('#gform_confirmation_message_2').text());}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger("gform_pre_post_render", [{ formId: "2", currentPage: "current_page", abort: function() { this.preventDefault(); } }]); if (event && event.defaultPrevented) { return; } const gformWrapperDiv = document.getElementById( "gform_wrapper_2" ); if ( gformWrapperDiv ) { const visibilitySpan = document.createElement( "span" ); visibilitySpan.id = "gform_visibility_test_2"; gformWrapperDiv.insertAdjacentElement( "afterend", visibilitySpan ); } const visibilityTestDiv = document.getElementById( "gform_visibility_test_2" ); let postRenderFired = false; function triggerPostRender() { if ( postRenderFired ) { return; } postRenderFired = true; jQuery( document ).trigger( 'gform_post_render', [2, current_page] ); gform.utils.trigger( { event: 'gform/postRender', native: false, data: { formId: 2, currentPage: current_page } } ); if ( visibilityTestDiv ) { visibilityTestDiv.parentNode.removeChild( visibilityTestDiv ); } } function debounce( func, wait, immediate ) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if ( !immediate ) func.apply( context, args ); }; var callNow = immediate && !timeout; clearTimeout( timeout ); timeout = setTimeout( later, wait ); if ( callNow ) func.apply( context, args ); }; } const debouncedTriggerPostRender = debounce( function() { triggerPostRender(); }, 200 ); if ( visibilityTestDiv && visibilityTestDiv.offsetParent === null ) { const observer = new MutationObserver( ( mutations ) => { mutations.forEach( ( mutation ) => { if ( mutation.type === 'attributes' && visibilityTestDiv.offsetParent !== null ) { debouncedTriggerPostRender(); observer.disconnect(); } }); }); observer.observe( document.body, { attributes: true, childList: false, subtree: true, attributeFilter: [ 'style', 'class' ], }); } else { triggerPostRender(); } } );} );

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.

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.

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

WooCommerce Colors – Download
WooCommerce Quantity Increment – Download

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.

Allows to calculate taxes automatically when they enter their address in the checkout
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.

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

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.

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

Share Tweet Share

The only WordPress newsletter you need Join 1000's of fans and customers just like you. Always awesome and never spam.

Email*

Comments

This field is for validation purposes and should be left unchanged.

Δdocument.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );

Peggi

May 13, 2015 at 5:51 pm

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?

May 13, 2015 at 5:57 pm

Aha! Never mind… I found it! Sorry to bother you.

WooCommerce 2.3 – Users and Developers