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.

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 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 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.
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

FilterDescription

woocommerce_disable_rest_api_access_log
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

anastas10s-afk
joelclimbsthings
jorgeatorres
jonathansadowski
lsinger
xristos3490
mch0lic
Saggre
small-fishes
chihsuan
mdperez86
jgreys
lanej0
samueljseay
apenchev
kshojib
Konamiman
ecgan
tammullen
prettyboymp
alopezari
nathanss
joshuatf
gigitux
louwie17
barryhughes
nigeljamesstevenson
mujuonly
ilyasfoo
nerrad
nhance
nextdoorpanda
Luc45
ObliviousHarmony
rvola
octaedro
mattsherman
rodelgc
layoutd
moon0326
Aljullu
wcstaley
coreymckrill
rrennick
emaildano
vedanshujain
nielslange
MrJnrman
psealock
adrianduffell
peterfabian
nima-karimi

WooCommerce Blocks

sunyatasattva
gigitux
danieldudzic
tjcafferkey
wavvves
nefeline
danielwrobert
kmanijak
roykho
tarunvijwani
albarin
mikejolley
imanish003
senadir
Aljullu
thealexandrelara
opr
nielslange
tarhi-saad
nerrad
dinhtungdu


6 responses to “WooCommerce 7.7 Released”

  1. hello,
    nice release.
    don’r forget the DB update notice 😉

    1. I disagree. My sites stop selling after this update. We have to roll back and cross fingers to keep selling.

  2. Exciting, WooCommerce now has a clear edge over Shopify, Thanks to Multichannel Marketing. #LongLiveWP

  3. Thank You. Loving the way you added pictures of all the clever people who support my business. Well Done

  4. The changes committed are just fine for a new site, for old sites the changes are provoking damages to the design and in the editor, too many functions are failing in our current stores, can’t edit product description, add new images or update easily a price. No good comments for this release. The worst update ever

  5. How do I get rid of this super ugly banner that takes up 10% of my product page and never goes away?

Leave a Reply

Your email address will not be published. Required fields are marked *