Develop WC

The official WooCommerce development blog

The New WooCommerce Product Image Gallery — September 7, 2016

The New WooCommerce Product Image Gallery

A couple of weeks ago we posted about an experiment we were working on to improve the product galleries in WooCommerce, particularly the mobile experience.

We laid out options to have a lightbox, a magnification/zoom, or both and included a poll to get your feedback. After 442 votes, the results of that poll look like this;

  • Lightbox – 18.55%
  • Zoom/Magnification – 51.81%
  • Both – 29.64%

What do these results show us?

  1. The majority of folks (81.45% – ‘both’ voters + ‘zoom’ voters) like the zoom/magnification feature
  2. A significant number of people (48.19% – ‘lightbox’ voters + ‘both’ voters) feel that we need to continue including a lightbox

Based on these results and internal discussions we’ve decided to include both a lightbox and a zoom/magnifier. To do this we’ll use the popular Photoswipe script for lightbox functionality alongside our own Flexslider which handles the carousel/swiping on mobile. Zoom is our script of choice for zooming.

How does it look

A little something like this;

photoswipe

And on mobile;

photoswipe-handheld

The (extra) nice thing about the mobile experience (which isn’t possible to capture in a desktop browser), is that you can tap/pinch to zoom once the lightbox is open which makes it feel very ‘native’. You also get to see the full size image, regardless of what size your thumbails display at.

Can I play with it?

You sure can. Just check out the add/product-galleries branch on github. There are a few styling tweaks to work through, and variation images don’t work yet. But you’ll get a very good idea of how things work.

Once again, a note to theme authors

Shamelessly copy/pasted from the previous post;

This change involves template changes to templates/single-product/product-image.phpand templates/single-product/product-thumbnails.php as well as the addition of some new scripts and a little css. If you dequeue WooCommerce styles in your theme and roll your own, you’ll need to add some css to support the new gallery.

Let us know what you think!🙂

A new product gallery coming to 2.7. Maybe. — August 18, 2016

A new product gallery coming to 2.7. Maybe.

The product image galleries in WooCommerce basically haven’t changed since version 1. The layout is fine, but the lightbox functionality is looking more than a little tired.

Most importantly the experience on smaller handheld devices is terrible. We’d like to replace the lightbox functionality entirely with a carousel/zoom combination which will provide a lightweight, intuitive experience for both desktop and handheld devices.

Why?

Just so we’re on the same page as to exactly how terrible our current implementation is for small screens check this out;

That’s right, the image that appears in the lightbox is actually smaller than the image displayed in the page itself.

Of course we could just disable the lightbox for small screens, but without a carousel it wouldn’t be possible to see the additional images at a size any larger than the small thumbnails. We need another solution.

How do we propose to address this?

I think we can agree that the lightbox is pointless on small screens. What works very nicely is a carousel with touch support to easily swipe between images. Something like this:

carousel-mobile

I don’t expect many WooCommerce users to be opposed to this change. What I’d really like you to consider is how our galleries behave on desktop.

Desktop

We’ve agreed that a carousel is better for mobile. I happen to like the carousel for navigating the gallery on desktop as well. We’re already loading the script for mobile so it makes sense to use it on desktop too.

The question then becomes; How do we provide the ability to see the image in greater detail? There are a couple of potential answers to that question each with it’s own pros/cons.

Lightbox

The pros of using a lightbox are that it is familiar. It’s what we have currently.

But that’s about it.

The cons are several

  • Lightbox scripts are fairly hefty and include a lot of functionality that we don’t really need
  • Generally require additional assets (css) on top of the js
  • Given we’ve agreed that a carousel is the way to go for gallery navigation, it’s somewhat counter intuitive to have that method of navigation in addition to lightbox gallery navigation

Zoom/magnification

Zooming in on the main product image as you hover over it is an alternative option. Here’s how that would look;

carousel-desktop-zoom

The pros

  • It provides a very intuitive overall experience. You click the thumbnail you want to look at then simply hover over the main image for more detail.
  • It’s lightweight. Including CSS, PrettyPhoto (our current lightbox script) weighs in at 30kb. The zoom script is 6kb. That’s an 80% decrease!
  • It’s consistent – the desktop / mobile experience mirror one another.

The cons

  • This solution is dependent on the theme to display the product image at a reasonable size. If the image is tiny, zooming might feel a little awkward.
  • It’s different. Not sure this is necessarily a con but it’s a very important to consider for store owners. Changes like this do have the potential for disruption.

Both

I really wouldn’t want to do this, but it is of course an option to have zooming and a lightbox.

Over to you

What do you think? We’re very keen to hear feedback on this idea, in particular on the desktop behaviour.

If you’d like to actually test this functionality please check out the add-product-galleries branch on github. It goes without saying that you should only do this in a development environment.

Please vote in the poll!

A note to theme authors

This change involves template changes to templates/single-product/product-image.php and templates/single-product/product-thumbnails.php as well as the addition of two new scripts and a little css. If you dequeue WooCommerce styles in your theme and roll your own, you’d need to add some css to support the new gallery.

 

WooCommerce 2.6.4 Fix/Security Release Notes — July 26, 2016

WooCommerce 2.6.4 Fix/Security Release Notes

The WooCommerce 2.6.4 fix/security release is now available. You can download it on WordPress.org or as an automatic update in your administration panel.

~20 commits made it into this release fixing several minor issues. The main changes are as follows.

  • The REST API image upload feature has been locked down to only allow images, vs all supported WordPress MIME types.

  • There was an issue in COD where shipping method titles were missing.
  • WC_ROUNDING_PRECISION constant was removed but put back for plugin compatibility reasons.

The full changelog for 2.6.4 is below.

* Fix - Security - Only allow image MIME type upload via REST APIs.
* Fix - Shipping method title display in COD settings.
* Fix - Order date input in Edge browser.
* Fix - Ensure value is not null in variations to support empty show_option_none setting.
* Fix - get_the_title does not need escape in grouped template file.
* Fix - Ensure WC_ROUNDING_PRECISION is defined and use it as a low precision boundary in wc_get_rounding_precision().
* Fix - Response body should be a string in webhook class.
* Fix - Use h2 instead of h3 headings in profile screen.
* Dev - API - Allow Allow meta_key/value filters for products.
* Dev - CLI - Explode tags and category IDs to allow multiple comma separated values.
* Dev - add $order arg to woocommerce_admin_order_item_class and woocommerce_admin_html_order_item_class filters..

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.

WooCommerce 2.6.3 Fix/Security Release Notes — July 19, 2016

WooCommerce 2.6.3 Fix/Security Release Notes

The WooCommerce 2.6.3 fix/security release is now available. You can download it on WordPress.org or as an automatic update in your administration panel.

~104 commits made it into this release fixing several minor issues and a potential security issue. The main fixes/updates are as follows.

  • Securify reported an issue with the way captions were shown within PrettyPhoto. Due to double-escaping, captions could be treated as HTML allowing for XSS attacks. However, this would require the admin to upload a malicious image to exploit. The affected template files were patched and the version numbers bumped.

  • There was an issue with layered nav counts when used in conjunction with search.
  • We added transient based caching to the comment count functions to improve page loading speed in admin.

The full changelog for 2.6.3 is below.

* Fix - Security - Escape captions in product-thumbnail and product-image templates (template versions have been bumped).
* Fix - Fixed how we calculate shipping tax rates when using more than one tax class.
* Fix - When duplicating product variations, set title, name, and guid.
* Fix - Normalized 'read more' buttons.
* Fix - Add to cart notices for grouped products.
* Fix - Do not sanitize passwords in the settings API.
* Fix - Handle shipping zone location range conversion during update (dashes to ...).
* Fix - Always remove commas while processing flat rate costs.
* Fix - Ensures account page layout is only applied to desktop-sized displays.
* Fix - When getting layered nav counts, take search parameters into consideration.
* Fix - Free shipping show/hide javascript.
* Fix - Strip hash characters when exporting reports.
* Fix - Use permission id to revoke access to downloads to prevent removing wrong rows.
* Fix - When duplicating product variations, set title, name, and guid.
* Fix - Set more appropriate default rounding precision based on currency decimal places.
* Fix - Fix message styles for empty carts.
* Fix - Fixed the load of the WC_Email_Customer_On_Hold_Order class.
* Fix - Don't perform cart update on search submit.
* Dev - API - Added support for WP REST API with custom URL prefixes.
* Dev - API - Delete variations when deleting a variable product.
* Dev - API - Fixed how we check for product types.
* Dev - Added woocommerce_cart_id filter.
* Dev - Add shortcode name param to shortcode_atts function calls.
* Dev - Post custom data when fetching a variation via ajax.
* Dev - Include child prices in grouped_price_html filter.
* Dev - Allow filtering of variation stock quantity.
* Dev - Added $_product argument to 'woocommerce_restock_refunded_item' hook.
* Dev - Added a filter hook for the wc_ajax endpoint url.
* Tweak - Include account page link in new customer account emails.
* Tweak - Updated all URLs from WooThemes.com to WooCommerce.com.
* Tweak - Cache the result of WC_Comments::wp_count_comments() in a transient (improves performance).

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.

WooCommerce 2.6.2 Fix Release Notes — June 30, 2016

WooCommerce 2.6.2 Fix Release Notes

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

~140 commits made it into this release fixing several minor issues and making some smaller tweaks. The main fixes/updates are as follows.

  • We’ve made the password reset process redirect to the form and set a cookie containing the reset token and username to prevent password tokens being leaked via the page’s referer headers.
  • Some users didn’t like the change showing ‘in stock’ when not managing stock levels. Due to this we’ve made it so ‘in stock’ in hidden when not managing stock levels, but ‘out of stock’ is shown when that status is explicitly set.
  • We’ve improved the coupon logic so that product coupons not valid for the current cart are not applied, rather than just having no discount value.
  • We’ve made some tweaks the descriptions on the zones screen, and made it so zones can match postcodes without having a country assigned to them. Also, if no locations are set on a zone, it will now be listed as being for ‘everywhere’.
  • To allow my account page tabs to be disabled without code, you can now set the endpoint value to a blank string.

The full changelog for 2.6.2 is below.

* Fix - Set max index length on woocommerce_payment_tokenmeta table for utf8mb4 support.
* Fix - is_available check for legacy shipping methods.
* Fix - wc_add_to_cart_message() when non-array is passed.
* Fix - Maximum coupon check should allow the 'maximum' value.
* Fix - Product coupon logic to avoid applying non-applicable coupons.
* Fix - Potential notices when leaving out 'default' field for shipping instances.
* Fix - wp_cache_flush after term meta migration/update.
* Fix - wc_add_to_cart_message() when non-array is passed.
* Fix - woocommerce_redirect_single_search_result type check was incorrect.
* Fix - Javascript show/hide of option in free shipping method.
* Fix - Convert ellipsis to three periods when saving postcodes.
* Fix - Prevent get_terms returning duplicates.
* Fix - Removed non-existent country (Netherlands Antilles) from https://en.wikipedia.org/wiki/ISO_3166-1.
* Fix - Grouped product range display when child is free.
* Fix - Remove discount when checking free shipping min amount.
* Fix - Prevent blocking the same element multiple times on cart page.
* Fix - Don't sync ratings right after a new comment to prevent rating sync whilst rating meta does not exist yet.
* Fix - Fix product RSS feeds when using shop base.
* Fix - woocommerce_local_pickup_methods comparison by stripping instance IDs before the check.
* Fix - During password resets, use cookie to store reset key and user login to avoid them being exposed in the URL/referer headers.
* Dev - API - Fixed variable product stock at product level.
* Dev - CLI - Introduces woocommerce_cli_get_product_variable_types filter.
* Dev - Allow notices to be grouped on checkout after certain events.
* Tweak - Made customer pay link display if order needs_payment() rather than checking pending status.
* Tweak - Zones - Wording clarifications.
* Tweak - Zones - Match zones with postcodes but no country.
* Tweak - Zones - Match zones with no regions as 'everywhere'.
* Tweak - Added view_admin_dashboard cap for disabling the admin access restriction in custom roles.
* Tweak - Revised stock display based on feedback to hide 'in stock' message if stock management is off and only show available on backorder if notifying customer.
* Tweak - Allow external product SKUs.
* Tweak - PT (Portugal) and JP (Japan) postcode formats.
* Tweak - Sort products from the [product_category] shortcode by menu order.
* Tweak - Improve wc_orders_count() performance by running a query to count only posts of the given status.
* Tweak - To allow my account page tabs to be disabled without code, you can now set the endpoint value to a blank string.

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.