Develop WooCommerce

The official WooCommerce development blog

WooCommerce Gutenberg Products Block 1.1.0 release notes — June 6, 2018

WooCommerce Gutenberg Products Block 1.1.0 release notes

WooCommerce Gutenberg Products Block 1.1.0 is now available. This is the latest version of our feature plugin that adds a multi-purpose Products block to the Gutenberg editor. If you’re not familiar with the Products block feature plugin or the work we’ve been doing to get WooCommerce ready for Gutenberg here is an in-depth article all about it.

The full changelog is below.

* Feature - Add "Best Selling" and "Top Rated" product scopes.
* Fix - Only enqueue scripts and styles in the site backend.
* Fix - Remove focus checks deprecated in latest Gutenberg version.
* Fix - Added keys to some elements to prevent React warnings.
* Enhancement - Added custom API endpoint for more accurate block previews with orderby.
* Performance - Refactored the way the attribute select works to prevent many concurrent API requests on sites with many attributes.

Make sure you are updated to the latest version of Gutenberg then download the latest version here or venture over to Dashboard → Updates to update your plugins from WordPress.

If you spot any bugs or issues please log them in detail on Github.

WC 3.3 Image size improvements — December 11, 2017

WC 3.3 Image size improvements

Let’s face it, product images are a vital driving force behind sales. Combine that with thousands of WooCommerce-enabled themes out there and it can become difficult to have product images that look good out-of-the-box on all of them. WooCommerce 3.3 aims to improve that with some changes to image size settings and the rendering of images.

WooCommerce 3.3 introduces new image cropping settings. Store owners can now control the width and height of their main images, as well as the cropping with visual cues as to what the images might look like on the frontend. Apart from that we are also giving themes with explicit WooCommerce support more control over image settings to ensure that product images look good out of the box.

Theme Support

In the past, theme authors had to make updates to settings directly via update_option calls to change the settings in the DB. This resulted in store owners experiencing issues where they would change image settings in the admin area just to have it revert back to what the theme updates it to on each page load. With WooCommerce 3.3 theme authors can now declare image sizes via the add_theme_support function. Declaring image sizes this way will take priority over any other settings and also hide the image settings section in the admin area.

add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 150,
'single_image_width' => 322,
) );

Thumbnail Cropping

A new thumbnail cropping section in the customizer will allow store owners to select one of three cropping ration settings with visual cues:

  • 1:1 (Square scropping)
  • Custom (Store owner can enter a custom aspect ratio)
  • Uncropped (Preserve single image aspect ratio)

Image sizes are then calculated based on the cropping option selected and the image width. It is important to note that Single Product Images are uncropped and not affected by the cropping settings.

Automatic Thumbnail Resizing

Apart from the new theme support and cropping settings, we have also introduced automatic thumbnail resizing. In the past when you changed a product image WordPress would not actually resize the image and you had to install a plugin like Regenerate Thumbnails in order to have WordPress resize the images for you. In WooCommerce 3.3 we have now added on-the-fly thumbnail resizing as well as background thumbnail resizing.

How this works is when you change your image settings WooCommerce will kick off a background process that automatically resizes all your images for you to the correct new sizes. While the images are being resized or if for some reason the resizing did not run or complete, we’ve added on-the-fly resizing to the frontend, ensuring that your images will always look great to your customers.

The on-the-fly resizing also plays an important part in ensuring that you have a great experience when visually editing your site through the customizer. If your theme adds support for it you can play around with different image sizes and cropping settings from within the customizer and see the results instantly.

These changes are already in the master branch and will be going out with the WooCommerce 3.3 release in January 2018.

If you have any thoughts or feedback you would like to share, feel free to leave them in the comments.

WC 3.3 will look great on all the themes! — December 9, 2017

WC 3.3 will look great on all the themes!

It used to be that you had to find specific WooCommerce-compatible themes for your store. In the upcoming release we have made big improvements in how WooCommerce handles themes that were previously unsupported, so now you can run WooCommerce with any theme!

On themes that don’t formally declare WooCommerce support the templates will render inside the content. This keeps everything looking natural on the site while ensuring everything still works great. Here are some before and after examples using themes that do not formally declare WooCommerce compatibility:

In order to make sure everything looks as nice as possible and so customers can see products well on themes with narrow content areas, lightbox and zoom will automatically be enabled for themes that don’t formally support WooCommerce. If your theme currently declares WooCommerce support the theme will still have full control over whether lightbox and zoom are enabled on products.

One thing that you will notice is that the product reviews area is not present on these themes. In our testing the CSS used by most themes that do not support WooCommerce did not work well with WooCommerce’s CSS for review styles. These themes will use the regular comments form. Themes that declare WooCommerce support will still use the review template.

Column and row settings

We’ve also added the ability to select the number of rows and columns displayed in the shop to the customizer. Everything updates dynamically so you can preview how your shop will look while changing the settings. The width of the columns will automatically increase or decrease depending on your settings, so everything should look nice and fill the available area. This feature is available on all themes.

Theme developers can set the minimum, maximum, and default settings for the columns and rows when declaring WooCommerce support:

function my_custom_woocommerce_theme_support() {
	add_theme_support( 'woocommerce', array(
		// . . .
		// thumbnail_image_width, single_image_width, etc.

		// Product grid theme settings
		'product_grid'          => array(
			'default_rows'    => 3,
			'min_rows'        => 2,
			'max_rows'        => 8,
			
			'default_columns' => 4,
			'min_columns'     => 2,
			'max_columns'     => 5,
		),
	) );
}

add_action( 'after_setup_theme', 'my_custom_woocommerce_theme_support' );

Testing and feedback

These changes are merged into our master branch on GitHub if you want to try things out. If all goes well, they will be part of 3.3 release in January.

Thoughts and feedback welcome in the comments.

WC 3.3 New Webhooks CRUD — December 8, 2017

WC 3.3 New Webhooks CRUD

We have been talking a lot about CRUD since 3.0.0, and the reason is because we want move certain features from the WordPress post database table to new database tables. This improves the performance and scalability of those features. Starting with 3.3.0, our webhooks will not use the posts and comments database tables anymore, and we finally have our first feature migrated to custom tables!

New Webhooks CRUD

Webhooks are a feature that 3rd party developers do not use often or heavily customize, so this make it easy to start moving all of the necessary data for webhooks to a new table.

With CRUD it is now easier to manipulate webhooks too:

// Creating a new webhook.
$webhook = new WC_Webhook();
$webhook->set_user_id( 1 ); // User ID used while generating the webhook payload.
$webhook->set_topic( 'order.created' ); // Event used to trigger a webhook.
$webhook->set_secret( 'secret' ); // Secret to validate webhook when received.
$webhook->set_delivery_url( 'https://webhook-handler.com' ); // URL where webhook should be sent.
$webhook->set_status( 'active' ); // Webhook status.
$webhook->save();

// Updating webhook:
$webhook = wc_get_webhook( $webhook_id );
$webhook->set_status( 'disabled' );
$webhook->save();

// Deleting webhook:
$webhook = wc_get_webhook( $webhook_id );
$webhook->delete( true );

Webhook delivery logs

Delivery logs have been moved from the WordPress comments table to our logging system, which allows more options for handling them instead of having to access the webhook logs in the admin interface.

Note: Because of this change all REST API endpoints for webhook delivery logs are now deprecated and will always return as empty. This is because logs now can be saved in the database, as files, or anything else.

Use your favorite message queue tool to process webhooks

It is now possible to write custom code to process webhooks. We used to only have options to deliver a webhook as soon as it is triggered or by WP CRON, but that may not be good for everyone. Until we have a third option with our “event queue” you may want to use Redis, Amazon SQS or something else.

It’s possible to override the delivery like so:

remove_action( 'woocommerce_webhook_process_delivery', 'wc_webhook_process_delivery', 10 );

/**
 * Custom process webhook delivery.
 *
 * @param WC_Webhook $webhook Webhook instance.
 * @param array      $arg     Delivery arguments.
 */
function my_custom_wc_webhook_process_delivery( $webhook, $arg ) {
	// Your custom code here.
	// Just do not forget to trigger webhook with later:
	// $webhook->deliver( $arg )
	// Or get the webhook payload as JSON and send with your own delivery method:
	// wp_json_encode( $webhook->build_payload( $arg ) )
	// Note that custom delivery methods will require extra code to log deliveries with $webhook->log_delivery( $delivery_id, $request, $response, $duration )
}
add_action( 'woocommerce_webhook_process_delivery', 'my_custom_wc_webhook_process_delivery', 10, 2 );

And that’s all folks 👋.

WC 3.3 Download Logging Feature — December 7, 2017

WC 3.3 Download Logging Feature

WooCommerce 3.3 will include a new download logging/reporting feature to track who downloads what from your store (when selling digital products). The issue relating to this was initially logged here.

This feature was contributed by @procifer during his trial (Automattic is hiring!). The pull requests for this can be found here and here. They add the following:

  • A new WC_Customer_Download_Log class supporting data stores to store logs to a custom table in the database.
  • Revised how download ids are generated to no longer rely on md5 hashes of filenames. This means each download has a unique ID which can be tracked.
  • A new report which lists downloads made by customers, along with information such as IP address.
  • Permission checks utilise the download log/tracking functions to make them more robust.

Visually, when viewing a download permission inside an order you’ll see a new link to the reports:

Edit order ‹ Local WordPress Dev — WordPress 2017-11-22 12-36-56.png

When this is clicked you’ll go off to the reporting section to see logs filtered to this permission ID:

Reports ‹ Local WordPress Dev — WordPress 2017-11-22 12-38-54.png

You’ll notice we track the following per download:

  • Timestamp of download event
  • Product/file that was downloaded, from what ID
  • Logged in user name
  • IP Address

The Reports > Orders > Customer downloads section allows you to filter logs by any of these properties.

Reports ‹ Local WordPress Dev — WordPress 2017-11-22 12-41-58.png

Thats it 🙂 Just a small enhancement we hope you’ll find useful.