Develop WooCommerce

The official WooCommerce development blog

Adding support for WooCommerce 2.7’s new gallery feature to your theme — February 28, 2017

Adding support for WooCommerce 2.7’s new gallery feature to your theme

As you know we’ve redesigned the product gallery feature in WooCommerce to deliver a richer experience in 2.7.

This is a significant frontend change that can be broken down in to three separate new features;

  • Image zoom / magnification
  • Lightbox
  • Slider

To enable each of these features in your theme you must declare support using add_theme_support() like so;

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}

This allows you the flexibility to pick and choose exactly which features you want to include/exclude in your theme or at your store.

Styling

If your theme disables WooCommerce core styles you will also need to provide a layout for the new gallery. The classes you’ll want to work with are;

  • .woocommerce-product-gallery – The gallery wrapper. This wrapper will also include a class that indicates how many columns thumbnails should be arranged into, e.g. .woocommerce-product-gallery--columns-4
    • .woocommerce-product-gallery__wrapper – The slider wrapper
      • .woocommerce-product-gallery__image – The figure that contains the image itself, which is wrapped in an anchor
  • .woocommerce-product-gallery__trigger – This is the link that triggers the lightbox functionality
  • .flex-control-thumbs – If you’re using the slider functionality the Flexslider script creates the thumbnails in a ol with this class

A note on the column class; If you anticipate that your users might want to change the columns using the woocommerce_product_thumbnails_columns filter, you might also want to include styles for other column layouts besides the default.

If you’re interested you can find the sass we use in Storefront to style the new gallery layout here.

That’s it! Go forth and add support for WooCommerce 2.7’s gallery feature to your themes!

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

WooCommerce 2.6.14 security/fix release notes — February 3, 2017

WooCommerce 2.6.14 security/fix release notes

The WooCommerce 2.6.14 fix release is now available. You can download it from WordPress.org or as an automatic update in your administration panel.

~23 commits made it into this release fixing several issues and hardening the code in the API. The full changelog for 2.6.14 is below.

* Fix - Ensure product exists in wc_update_product_stock.
* Fix - Send emails using the site language.
* Fix - Remove tilde typo.
* Fix - Fixed notice in get_rating_count.
* Tweak - Define arg and return data types, added extra descriptions, and correctly cast IDs in the Rest API.
* Tweak - Handle custom error data in WC_REST_Exception.
* Tweak - Display conflicted product ID when using a duplicate SKU via the API.
* Localisation - Add Finnish defaults to the installer.

If you spot any further issues, please report them to us in detail on GitHub so the development team can review – comments on this post are closed.