Develop WooCommerce

The official WooCommerce development blog

WooCommerce 3.2 Beta is here! — August 30, 2017

WooCommerce 3.2 Beta is here!

Today we’re pleased to announce that WooCommerce 3.2 is available for beta testing! You can download it here.

Release highlights

3.2 is our second minor release this year. There should be no breaking changes, new functionality should exist in a backwards-compatible manner, and updating from 3.1 or 3.0 should be a hassle free! Here is what to look out for in the update.

New: Adding and removing coupons from orders

Up until now, coupons have been deeply coupled with the cart making reuse (and testing) extremely difficult. In 3.2 we’ve refactored the cart and coupon classes to improve this.

Due to these changes, we were able to implement a new admin feature – the ability to apply coupons (and remove coupons) from placed orders.

2017-08-23 13.52.08 2

This was a popular feature request on the ideas board. To use it, simply edit an order, click the “apply coupon” button and enter a coupon code. The rest will be done automatically.

You can read more about these changes here.

SelectWoo; better enhanced select boxes

screen-shot-2017-08-08-at-1-06-34-pm.png

In order to improve accessibility (particularly in screen readers) we’ve forked Select2 into a custom version called SelectWoo. This is used for things like state/country select boxes and extensively in the admin area.

We’ve also rolled SelectWoo out in 2 new areas; for the fields in the shipping calculator on the frontend, and for layered nav when using “or” type queries.

You can read more about SelectWoo here.

Pre-update extension version checks

WooCommerce 3.2 adds support for a new plugin header (text added to your plugins readme.txt) to determine which version of WooCommerce a plugin is tested up to. This header is named WC tested up to.

Before minor and major updates, WooCommerce will check these versions and display either an inline warning, or modal window warning (for major updates) to advise the user.

Screen Shot 2017-08-25 at 1.35.46 PM

You can read more about this feature, including instructions on what headers to add to plugins, here.

Subscription management improvements

In order to make it easier for customers who use a large number of extensions on their sites we have added some new filters to allow you to filter your WooCommerce.com extensions by installed/activated/download/update available etc. along with notification icons in the both then Extension menu item, as well as the ​​​My Subscriptions tab, making it easier for you to see when your WooCommerce.com extensions have updates available.

A new ‘share by’ label for shared subscriptions has also been included, which is part of a bigger project being worked on for the sharing of multi-site subscriptions bought on WooCommerce.com.

A dedicated products shortcode

We’ve unified the product shortcodes into one single, consolidated products shortcode which supports the options of all legacy product shortcodes. This replaces [product_category][featured_products][sale_products][best_selling_products][recent_products][product_attribute], and [top_rated_products].

You can read more about the new shortcode here.

Everything else…

Other features include:

  • Like the search helpers introduced in 3.1, we’ve done the same for products. You can see our usage wiki here.
  • We’ve simplified the ability to resend order details to customers by including one option to “resend”.
  • We’ve added store street address, city and postal code to settings for use by plugins. This is a minor change, but a feature nevertheless, and something important to extensions.
  • Wrapping values in quotes now let’s you use commas in the product CSV importer. This is an enhancement.
  • If a fatal error occurs, WooCommerce will catch and log it to be viewed in WC > Status > Logs. This can be useful in debugging.
  • We added drag and drop sorting on the grouped product field to control display order of products.
  • The product category filter on the products screen has been AJAXified for faster loading.
  • Added a new option to control the maximum depth of categories shown in the product category widget.
  • Allowed sorting options to be shown when viewing search results. This defaults to sorting by relevance.

On top of the new features, there are a variety of minor tweaks, new hooks, and fixes in this minor release. We won’t go into detail here, but you can see the full list of changes in the readme if you’re interested!

Template file changes

When editing core template files we bump the version so themes know they need to update custom versions. The following files were updated in 3.2:

  • mini-cart.php – Changes to support AJAX remove from cart buttons.
  • shipping-calculator.php – Fix to state field naming and support for select2.
  • order-receipt.php – New. Moved from template function.
  • downloads.php – New table of customer downloads.
  • thankyou.php – Download displays made consistent.
  • order-downloads.php – Download displays made consistent.
  • email-downloads.php – Download displays made consistent.
  • order-details-customer.php – Download displays made consistent.
  • email-order-details.php – Download displays made consistent.
  • email-order-items.php – Download displays made consistent.
  • email-addresses.php – Download displays made consistent.
  • order-details.php – Download displays made consistent.
  • my-account/orders.php – Action buttons moved to filter.
  • form-tracking.php – Improved error handling.
  • single-product-reviews.php – Fixed invalid markup.

Deprecated functions and methods

  • Accessing internal meta keys from a CRUD object will throw a usage notice in 3.2.0.
  • WC_Query::search_post_excerpt is no longer needed or used. WordPress handles excerpt searches.
  • WC_Query::remove_posts_where is no longer needed or used. WordPress handles excerpt searches.

Release schedule and testing

We’re hoping to keep WooCommerce 3.2 in beta for the next 3 weeks. If you’re a developer please check extensions and themes are compatible to be safe.

Release Candidate 1 will be tagged on September 20th and will remain in RC for a further 2 weeks until October 4th which is our target launch date.

If you’d like to help us test, you can download the release from Github. We posted a nice little write-up on beta testing here which should get you started. Please read that and jump right in!

If you’re like to help translate 3.2, you’ll find it on the development branch on translate.wordpress.org.

Thanks to all of our testers and contributors.

selectWoo – An accessible replacement for select2 — August 8, 2017

selectWoo – An accessible replacement for select2

The select2 library makes it simple for anyone to add full-featured, good-looking dropdown menus to their site. According to Wappalyzer, at least 850,000 websites are currently using select2. WooCommerce uses it in many places to enhance the look and usability of stores.

It is an excellent and popular library for making custom dropdown menus, but one of the biggest and longest-running problems with it has been its lack of accessibility. The fancy dropdowns generated by select2 simply do not work well with screen-reading software. The WooCommerce team has a strong commitment to backwards compatibility and to making the web accessible, but the select2 library has been unmaintained since the beginning of the year. For these reasons, we have forked the select2 library and improved its accessibility in a new release we’re calling selectWoo.

selectWoo is a backwards-compatible, drop-in replacement for select2 with improved accessibility.

Getting Started

To get a copy of selectWoo, you can download the beta release here. The selectWoo JavaScript and CSS files are in the “dist” subfolder. There are two versions of each file: one called “select2” and one called “selectWoo”. Both files are the exact same, so you can use either depending on your preference.

You can use selectWoo the exact same way that you would use select2. Everything works the same; it’s just more accessible.

Converting existing select2 applications to selectWoo

If you are already using select2, all you have to do is replace the select2.js file you are currently using with the new select2.js file from selectWoo and you should be good to go. All code is backwards-compatible and everything should function the same.

selectWoo can also run in parallel with other versions of select2. This solves a common problem in WordPress where two plugins will be using different versions of select2, so one plugin breaks. If you want to take advantage of this safeguard you will have to initialize elements with $('...').selectWoo() instead of $('...').select2(). If you don’t need this feature, you can initialize dropdowns using either of the methods.

If you are using a custom CSS stylesheet for styling select2 elements, you may need to update CSS selectors that style ‘aria-selected’ elements to style ‘data-selected’ elements instead. This is due to a design flaw that had to be corrected from the original select2 library where ‘aria-selected’ attributes were not being used properly.

Call for accessibility testing

selectWoo has improved accessibility, but it is not perfect in every screen reader yet. We need your help ensuring selectWoo works great for all users.

There are two ways you can help us test selectWoo so that we can make it accessible for everyone.

  1. Go to this test page. Try out the different example pages using a screen reader and verify they work correctly in your screen-reading software.

  2. Download the WooCommerce master branch and verify dropdowns are accessible in WooCommerce. WooCommerce 3.2 has not been released yet, so do not do this on a production site. Do this on a local or staging site. selectWoo is used on the checkout page when selecting your country and state. It is also used in the WooCommerce settings pages for all of the dropdown settings.

Found an issue?

Please post any issues you find as a comment in this GitHub issue. Please include where you noticed accessibility problems, the screen-reading software you used, your operating system, and your browser.