Develop WooCommerce

The official WooCommerce development blog

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.

WooCommerce 3.1 Beta has landed — May 31, 2017

WooCommerce 3.1 Beta has landed

Today we’re pleased to announce that WooCommerce 3.1 is available for beta testing!

You can download WC 3.1 Beta 1 here.

Release highlights

You may have noticed that it’s only been a couple of months since 3.0 was launched; with our move to SemVer we’re aiming to do smaller, more rapid releases with an improved effort to maintain backwards compatibility and add new features incrementally.

Since 3.1 is a minor release, there should be no breaking changes and functionality added in a backwards-compatible manner. Updating from 3.0 therefore should be a breeze.

Here’s what’s new in 3.1.

Built in product CSV Import/Export

We believe that new users should be able to move their data in and out of WooCommerce quickly and easily, so we’ve worked on a new built-in import/export solution!

Our new importer supports:

  • Importing all core product data.
  • String-based custom meta data can be imported using the meta: prefix.
  • Extensions can add columns and props of their own or to support more advanced data.
  • Merging data can be done by ID or SKU.
  • All product types can be imported from one CSV, including variations.

The exporter has support for:

  • Choose which pieces of information you’d like to export.
  • Export by product type.
  • Exporting custom meta data is possible via a checkbox option.

Both tools use AJAX to prevent timeouts by exporting and importing in multiple batches, and both can be started from the main Products screen.

Here is a preview of the exporter in action:

 

And here is the importer importing some data:

 

The recent CRUD additions in WooCommerce core made building this import/export solution much simpler that it could have been using the WordPress meta approach. If you’re a developer and you’ve not yet used the new system you may want to check it out.

We look forward to hearing feedback about this new functionality!

Inline “terms and conditions” on checkout

In previous versions, defining a checkout terms page would add a mandatory checkbox to the checkout, as well as a link to the terms page.

In 3.1 we’ve enhanced this to show the terms page inline, so the user is kept on the checkout and can scroll through the content if desired.

Inline terms

Search helpers: WC_Order_Query class

For developers, we’ve added some new search helpers for orders to allow you to query orders by multiple props. Usage is explained here.

As an example, you could query all orders from a specific date range for users named John with the following code:

$orders = wc_get_orders( array(
    'billing_first_name' => 'John',
    'date_paid' => '2016-01-01...2016-12-31`,
) );

Magic!

Manage your WooCommerce.com extension subscriptions in WooCommerce core

In an effort to improve the user experience for updating extensions purchased from WooCommerce.com, the “helper” (the code responsible for validating subscriptions and checking for updates) has been merged into WooCommerce core.

It’s lightweight and will be added to the already existing “extensions” screen in admin, and should really help our customers ensure that their premium plugins are kept up to date with new functionality.

Checkout pay for order page improvements

In 3.0.x, when going to pay for an order assigned to a customer you’re presented with a pretty unfriendly “invalid order” message. We’ve improved this in 3.1. Now, you’ll either see a useful message if the order is not yours, or you’ll see a login form if not yet logged in.

Login form for payment

oembed for short descriptions

Does what it says; oembeds (e.g. to show videos) were previously non-functional when used in the product short description. With 3.1 they are supported!

Bulk update for variation stock statuses

A small improvement to help update variations in bulk; you can now set all stock statuses at once.

Bulk status update

Customer profile “copy billing” button

A small improvement when updating users manually in admin; you can now use the “Copy from billing address” button to populate the shipping address from the billing address in one click.

Copy from billing

Wizard improvements

A few improvements in our setup wizard:

  1. A domestic shipping zone will be automatically created for your defined base country to make setting up shipping a little more streamlined.
  2. If using a non-WooCommerce theme, you’ll have the option to one-click install the Storefront theme if you want it.
  3. If you’re in the US you’ll get the option to install the WooCommerce Services extension which provides, amogst other things, USPS rates and shipping labels.

Everything else…

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 changes in 3.1

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.1:

  • cart/cart-empty.php – Added a wc_empty_cart_message function to handle the message displayed in a hookable manner.
  • cart/cart-shipping.php – Added a variable so shipping calculator is only shown on the first row when showing multiple packages.
  • cart/mini-cart.php – CRUD support.
  • checkout/terms.php – Support added for inline term display.
  • single-product/product-image.php – Added data-caption support.
  • single-product/product-thumbnails.php – Added data-caption support.
  • single-product/rating.php – Using new wc_get_rating_html function.
  • single-product/review-rating.php – Using new wc_get_rating_html function.

Deprecated functions and methods in 3.1

The following functions are deprecated (not removed) in 3.1:

  • WC_Order_Data_Store_CPT::get_orders – Use wc_get_orders and the new search helpers.
  • WC_Order_Item_Meta – This class was actually deprecated in 3.0.0 but a notice was not added. wc_display_item_meta should be used instead.

Release schedule and testing

We’re hoping to keep WooCommerce 3.1 in beta for the next 2 weeks.

Being fairly small in scope we’re expecting to do fixes for new features, but we’re not expecting to break extensions or backwards compatibility (since this is a minor release, not a major one). If you’re a developer you should still check extensions and themes to be safe of course!

If all goes well, Release Candidate 1 will be tagged on June 14th 2017 and will remain in RC for a further 2 weeks until June 28th 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.1, you’ll find it on the development branch on translate.wordpress.org.

Thanks to all of our testers and contributors.

WooCommerce 2.7 beta 3 — February 17, 2017
WooCommerce 2.7 beta 2 — February 9, 2017
WC 2.7 extension compatibility examples #3 – Bookings — February 6, 2017

WC 2.7 extension compatibility examples #3 – Bookings

Bookings is a complex extension which extends WooCommerce product types to add it’s own ‘Booking’ product type. Due to this, it’s a good example to CRUDify and implement data stores, both new concepts in 2.7.

Upon reviewing the current class, it’s obvious there is some room for refactoring due to the class for example rendering HTML. Ideally this should be avoided to keep the focus of the class data-only. The ideal structure is:

  • Bookings class – extends WC_Product and handles booking product data getters and setters.
  • Bookings data store – extends the core data stores to handle the storing of the booking class data to the database.
  • Functions/Display classes to handle HTML output.

Additionally, the extension needs to continue to be compatible with current 2.6.x versions of WooCommerce.

In testing, the extension actually works fine under 2.7, albeit with some notices such as:

Declaration of WC_Product_Booking::get_price() should be compatible with WC_Product::get_price($context = 'view')

These could have simply been patched on a case by case basis, but for Bookings we’ve chosen to fully CRUDify it which I’ll demonstrate in this post.

Continue reading