Accessible Formatting for WooCommerce Sale Prices

Strikethrough pricing is a visual way to show that a product is on sale. But, this formatting is not accessible to site visitors using a screen reader. With a few lines of code, we can improve the default WooCommerce sale price formatting for anyone using a screen reader to access our website.

This code snippet is all thanks to the excellent advice from Amber Hinds of Equalize Digital. For more information on best practices for screen reader text, watch this meetup recording by Nick Croft.

The Code Recipe

Adding the Recipe to Your Website

You can add this recipe to your site by creating a custom plugin or using the Code Snippets plugin available for free in the WordPress repository. We have a post on how to create a customizations plugin on our partner website, Paid Memberships Pro.

Note that this recipe requires theme support for the CSS class sr-only. If your theme does not have built-in support for this selector, add the following custom CSS to your child theme, a customizations stylesheet, or your WordPress site’s Additional CSS customizer settings:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

Default image

Kim Coleman

Hi! I'm Kim Coleman, an internet entrepreneur from Reading, Pennsylvania. I've been working with WordPress for over 15 years. In 2011, I founded Paid Memberships Pro, a complete plugin for Recurring Subscriptions and Content Restriction with 100k active sites. I'm currently working on our new product, Sitewide Sales.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.