Develop WooCommerce

The official WooCommerce development blog

October 17th: Dev chat #12 — October 10, 2017

October 17th: Dev chat #12

The next chat will be on October 17th at 16:00 UTC in the #core channel of the WooCommerce Community Slack. If you don’t already have access to the group, you can request an invite at the bottom of the WooCommerce developers page.

Here is the agenda:

If you have anything to propose for the agenda or related to the above, please leave a comment below.

See you there!

Important update: WooCommerce 3.2 will now be released October 11th. — September 19, 2017

Important update: WooCommerce 3.2 will now be released October 11th.

We have a small number of remaining open issues that need to be fixed before we can tag and send out the release candidate (RC) for WooCommerce 3.2. When we ship an RC it means we think we’re done, so it is important that all known issues are fixed before that happens. To ensure a successful release and give everyone time to test we have pushed back the RC and the release of WooCommerce 3.2 by one week. Here is the new release schedule:

Release candidate: September 27th 2017
WooCommerce 3.2: October 11th 2017

You can read more about WooCommerce 3.2 and the exciting new features we have planned here.

September 26th: Dev chat #11

The next chat will be on September 26th at 16:00 UTC in the #core channel of the WooCommerce Community Slack. If you don’t already have access to the group, you can request an invite at the bottom of the WooCommerce developers page.

Here is the agenda:

  • 3.2 release candidate
  • WooCommerce minimum supported PHP version

If you have anything to propose for the agenda or related to the above, please leave a comment below.

See you there!

New version check in WooCommerce 3.2 — August 28, 2017

New version check in WooCommerce 3.2

WooCommerce 3.2 will be released with a new version check feature. If you have active plugins that have not declared compatibility with the latest version of WooCommerce a variety of helpful warnings display when you try and upgrade WooCommerce. These messages will advise you about how you can safely upgrade in a way that prevents plugin errors that lead to broken features and store downtime. WooCommerce will also prevent itself auto-updating if there are incompatible plugins.

You have to already be on WooCommerce 3.2 to get this feature, so the first time you may see these sorts of messages will be when upgrading to WooCommerce 3.3.

Adding version check support to your plugins

The feature works by checking the active plugins’ headers to determine compatibility with WooCommerce. This requires the cooperation of the plugin development community. If you are a plugin developer it is simple and straightforward to add support for the version check to your plugins. There are just two new headers you need to add:

/*
 * Plugin Name: WooCommerce Barter Gateway
 * Plugin URI: https://wordpress.org/plugins/woocommerce-gateway-barter/
 * Description: Take payments by bartering crops and livestock.
 * Author: WooCommerce
 * Author URI: https://woocommerce.com/
 * Version: 3.0.7
 * Text Domain: woocommerce-gateway-barter
 * Domain Path: /languages
 * WC requires at least: 3.0.0
 * WC tested up to: 3.2.0
 */

There are some great benefits to adding the headers and keeping them current:

  • You will have to field less complaints from users that the new WooCommerce version broke your plugin. They will have clear warnings about the dangers of upgrading when the plugin is incompatible. This should reduce your support load when new versions of WooCommerce are released.
  • You will not have to rush updates to your plugin. If a user upgrades WooCommerce and your plugin breaks you are under a lot of pressure to release an update fast. If the user waits until a compatible version of the plugin is released before updating WooCommerce you do not have this problem.
  • Users will trust your plugin more. By adding the header you are letting the user know that the plugin has been tested, works with their version of WooCommerce, and is actively maintained to be compatible with WooCommerce.

The headers should be updated after each major (4.0.0) and minor (3.2.0) WooCommerce release. They do not have to be updated after patch releases (3.2.1). You should ideally have these headers in your plugins by WooCommerce version 3.3.0 to get the benefits.

August 29th: Dev Chat #10 — August 25, 2017

August 29th: Dev Chat #10

The next chat will be on August 29th at 16:00 UTC in the #core channel of the WooCommerce Community Slack. If you don’t already have access to the group, you can request an invite at the bottom of the WooCommerce developers page.

Here is the agenda:

  • 3.2 beta
  • Coupon & cart improvements
  • Extensions version check
  • SelectWoo beta 2
  • Roadmap

If you have anything to propose for the agenda or related to the above, please leave a comment below.

See you there!

p.s. if you missed something in the last dev chat, you can recap our summary here.

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.