We are pleased to announce the release of WooCommerce 7.7.0. This release should be backwards compatible with the previous version.
This release contains:
- 448 commits from 55 contributors in WooCommerce Core.
- 19 commits from 10 contributors in WooCommerce Blocks.
As always, we recommend creating a backup of your site and making sure that your theme and any other plugins are compatible before updating. You can check out this update guide for more information.
What’s new in 7.7.0?
Multichannel Marketing
Multichannel Marketing is out of beta and it is now the default experience when you visit the Marketing page.
Updated Shopper Notices
In this release, we introduce new components and styling for buyer notices, featuring Snackbar lists and Notice banners with shared components. These new styles give a uniform look and feel across all WooCommerce Blocks.
In addition to this, if your store uses either the Cart Block or Checkout Block on the main cart and checkout pages, these styles will also transfer to all other WooCommerce notices, e.g. the ones in the “My Account” area. These new styles should take precedence over any existing theme styles due to the new markup and CSS being applied.
The basic HTML structure of the new notices is as follows:
<div class="wc-block-components-notice-banner is-error">
<svg />
<div class="wc-block-components-notice-banner__content">MESSAGE</div>
</div>
There are different styles based on the notice status which include error, success, info, default, warning.
If you’re not using the Cart or Checkout Blocks (if you’re still using the shortcode based cart and checkout for example), existing notices rendered by WooCommerce will not be affected.
Here’s a preview of how each type of notice looks:
Themes that use customised notices will not have their styles respected after this update. The new notices use new CSS class-names and markup, so any existing styles will not apply. We’ve avoided using legacy class names to avoid conflicts and to ensure that there is consistent styling across all notice types.
Themes can target the new selectors after this release, in which case the main CSS selector is .wc-block-components-notice-banner.
Documentation is available:
Styling options for product blocks
Product SKU, Product Price, and Product Image now support more styling options in terms of color, dimension, and typography and have support for Global Styles.
New blocks
- Product Reviews block: Displays the reviews for a given product. It can be inserted inside the Single Product template.
Client-side postcode validation in the Checkout block
In this release, we included a change that performs postcode validation on the client-side. This change improves the performance of the Checkout process for the shopper. Previously the postcode was only validated on the server. There was a delay before the user saw an error if they entered an invalid postcode. This new experience not only reduces the load on your server but allows the shopper to work through the checkout form more quickly!
We still perform server-side validation of the postcode, but this is done when the checkout form is submitted rather than when the value changes.
Add to Cart button styling improvements
We have made some improvements to the Add to cart button, providing greater customization options for online stores. It’s now possible to choose between Fill and Outline styles for the button and adjust its width to 25%, 50%, 75%, or 100% of the parent container. In addition, we’ve introduced a variety of typography controls, including Font Family, Appearance, Line height, Letter spacing, Decoration, and Letter case.
These improvements aim to provide greater control over the look and feel of the Add to cart button, ensuring it seamlessly integrates with the store’s design.
Mini Cart Block Improvements
It’s now possible to customize all buttons of the Mini Cart, including changing their color and background as well as changing the style from outline to filled. In addition to that, the Mini Cart block got a new setting to customize how it renders in the Cart and Checkout pages (Hide or Remove), which will allow to change its behavior depending on the desired header style.
Provide a way to switch to the blockified Single Product Template
We have added a button “Upgrade to Blockified Single Product template” to the Single Product template. By clicking on this button, the classic template is upgraded to the new Blockified Single Product template.
This new template allows customizations of the product page with blocks, giving more flexibility and creativity in showcasing the products.
Actions and Filters
Three new filters are added
| Filter | Description |
| This filter enables the exclusion of the most recent access time from being logged for REST API calls.[Source] |
wc_help_tip | Filter the help tip.[Source] |
woocommerce_add_message | Filter wc_print_notice output [Source] |
Template Changes
The following files have template changes:
- plugins/woocommerce/templates/checkout/form-pay.php
- plugins/woocommerce/templates/checkout/payment.php
- plugins/woocommerce/templates/loop/no-products-found.php
- plugins/woocommerce/templates/myaccount/downloads.php
- plugins/woocommerce/templates/myaccount/form-add-payment-method.php
- plugins/woocommerce/templates/myaccount/orders.php
- plugins/woocommerce/templates/myaccount/payment-methods.php
- plugins/woocommerce/templates/order/order-details.php
Much 💜 to all the contributors
Finally a big thanks to everyone in the community who has contributed via issue reports, fixes, translation, testing, supporting other users, or simply spreading the word.
WooCommerce Core
WooCommerce Blocks
Leave a Reply