Sale Flash Pro

The Sale Flash Pro extension for WooCommerce by Kestrel gives you control over how you showcase discounts on your online store.

Requirements

↑ Back to top
  • WooCommerce 3.5+
  • PHP 5.4+

Installation

↑ Back to top
  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.

Setup and configuration

↑ Back to top

On the General tab of the WooCommerce settings screen you will find the following options:

WooCommerce Sale Flash Pro settings

Sale Flash Type

↑ Back to top

This option allows you to choose whether to display the discount as a percentage (eg. “25% off”) or a total (eg. £2.50 off).

WooCommerce product displaying the discounted amount
Display the discount as an amount
WooCommerce product displaying the discount as a percentage
Display the discount as a percentage

Sale Flash Price

↑ Back to top

This option allows you to display the regular price (or not).

Product list including the regular and sale prices
Product list including the regular price

Enable for variations

↑ Back to top

This option allows you to display the sale flash on variable products. It will display the most attractive discount. So if one of your variations is reduced by 25% whilst the other is only reduced by 20% it would display “up to 25% off”.

Variable product with the most attractive discount.
Variable product with the most attractive discount.

Customize the design

↑ Back to top

Sales Flash Pro has been designed to provide flexibility in styling through CSS. The plugin will adopt the styles of your active theme by default, but you can customize it to achieve the desired design by applying custom styles using Cascading Style Sheets (CSS).

1. Identify the HTML elements

Using your browser’s developer tools, inspect the elements you want to modify. Identify the HTML structure, classes, or IDs associated with the elements you wish to customize. You can find a detailed instruction depending on what browser you are using on this link

2. Add custom CSS

Now that you’ve identified the elements, it’s time to add custom CSS rules to your WordPress theme. Here’s an example of how you can do this:

.onsale {
  font-size: 15px;
  color: #2196F3;
  border-radius: 30px;
  border: solid 3px;
}

3. Apply the CSS

Add the custom CSS to your WordPress theme through the theme customizer:

  • Log in to your WordPress admin dashboard.
  • Navigate to “Appearance” and select “Customize.
  • Locate the “Additional CSS” Section.
  • Paste the CSS here and save the changes (Publish button).
Sale product with custom styles in the sale ribbon
Sale flash with custom styles

FAQ

↑ Back to top

How can I change the Sale ribbon? It says 25% off!

↑ Back to top

You can use the Loco Translate plugin to modify this text and others. Just create a translation of the Sale Flash Pro for your current language.

Translate the Sale Flash Pro texts with Loco Translate
Translate the Sale Flash Pro texts with Loco Translate

Can I change the sale flash for grouped and variation products?

↑ Back to top

No, these kinds of products are children of a parent product. Thus, the sale flashes are handled by their parents.

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.