WooCommerce 7.7 Released

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:

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.

image 2

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>

There are different styles based on the notice status which include errorsuccessinfodefaultwarning.

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:

An image displaying a preview of the new styling of the buyer notices.

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 SKUProduct 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.
Image showing the Product Reviews Block

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.

Screenshot showing the new Fill and Outline styles for the Add to Cart button in the block settings sidebar.

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.

A screenshot of the WooCommerce Single Product Block showing the "Upgrade to Blockified Single Product template"

Actions and Filters

Three new filters are added


This filter enables the exclusion of the most recent access time from being logged for REST API calls.[Source]

Filter the help tip.[Source]

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

Reposted from WooCommerce

If you have a care plan with 7th Circle Designs this update will be taken care of based on your plan’s schedule. If you do not have a care plan, sign up now.