By clicking on the “Add notification“ button, a popup will open allowing us to select the notification we want to create. In this case, we want to add a Simple notification for ‘free shipping’.
Step 2 – Notification name
The name you add here is for admin view only. The customer will not see this name, this is simply the title you give to the notification and it is a mandatory field.
Step 3 – Notification content
First, we start by adding the text of the notification from the ‘Content’ tab. As you can see in the example below, you can edit the font, the size, etc.
Notification text: from the available editor you can add the text that will be shown in the notification.
On the right side, you see a preview of the notification you are creating in real time. It changes dynamically as you are editing the notification.
Step 4 – Image options
Now we decide to add a custom image to the notification, by enabling the “Add image” option.
Upload image: choose an image to upload.
Image position: select the position of the image based on the text (above it, to the left, to the right or under it).
Image alignment: based on the image position, you can configure its alignment.
In this example, we choose to show an image on the top left side.
For more information on the image position and alignment, check this page.
Step 5 – Button options
Now we decide to add a button to ‘Read more’ about the conditions of the free shipping. You have to activate the dedicated option.
Button text: add the label you want to show on the button.
Button colors: set the colors for the button text and background.
Border radius (px): decide to have square or rounded edges (0 for square).
Button URL: add the URL to which you can redirect the customer when clicking on the button.
Step 6 – Style
Moving on to the ‘Style‘ tab where we can manage the colors, padding, background, etc. of the notification.
Width (px): width of the notification.
Background colors: default color, and color on hover state.
Add background image: decide to show and upload a custom image as a background, instead of a color.
Border radius (px): choose to add square or rounded edges (0 for square).
Padding (px): set the amount of space around the content.
Shadow: sdd a shadow color to the notification.
Again, on the right-hand side, you can see the changes you apply directly in the preview.
Step 7 – Display options
The ‘Display options‘ allow us to override the default options we have set in the general Display settings, regarding how the notification is displayed to the user in the frontend page.
Override default position: enable this option if you want to override the default position of the notification.
Select a position: decide in which position on the page the notification pops up:
Top left
Top right
Bottom left
Bottom right
Override default display options: enable to override the default display options for the notification.
Show this notification to: you can choose which users can see the notification. You can choose to all users, only guest users, or only logged-in users.
Additional geolocation filter: decide to hide or show notifications to users from certain countries.
For example, we want to show this notification to users from Spain, even though these users do not see notifications by default because we have excluded that country in the general “Display Options” settings.
Notification visibility on pages: decide to show the notification on all pages or show/hide it only on specific pages.
Notification visibility on product pages: either show it on all product pages, or decide to show/hide the notification on selected products or categories.
Step 8 – Final result
On the frontend, the notification would look like this:
By clicking on the “Add notification“ button, a popup will open allowing us to select the notification we want to create. In this case, we want to add a Coupon notification for a ‘Season sale’.
Step 2 – Notification name
The name you add here is for admin view only. The customer will not see this name, this is simply the title you give to the notification and it is a mandatory field.
Step 3 – Notification content
First, we start by adding the text of the notification from the ‘Content’ tab. As you can see in the example below, you can edit the font, the size, etc.
Notification text: from the available editor you can add the text that will be shown in the notification. You can use the placeholder %couponcode%
Coupon code: from this option you can insert the coupon code that you have previously created from the WooCommerce default settings: Marketing > Coupons.
On the right side, you see a preview of the notification you are creating in real time. It changes dynamically as you are editing the notification.
Step 4 – Image options
Next we decide to add a custom image to the notification, by enabling the “Add image” option.
Upload image: choose an image to upload.
Image position: select the position of the image based on the text (above it, to the left, to the right or under it).
Image alignment: based on the image position, you can configure its alignment.
In this example, we choose to show an image above the text in the center.
For more information on the image position and alignment, check this page.
Step 5 – Button options
Now we decide to add a button to allow users to copy the coupon code directly from it. You have to activate the dedicated option.
Button text: add the label you want to show on the button.
Button colors: set the colors for the button text and background.
Border radius (px): choose to add square or rounded edges (0 for square).
Button action: decide what happens when the customer clicks on the button:
Copy the code: the code is copied, they only have to paste it in the dedicated ‘coupon code’ field at checkout.
Apply the code automatically: the code is automatically applied on the cart page.
Redirect the user to a specific page: add the URL to redirect the customer when clicking on the button. For example, a discount conditions page.
Step 6 – Style
Moving on to the ‘Style’ tab where we can manage the colors, padding, background, etc. of the notification.
Width (px): width of the notification.
Background colors: default color, and color on hover state.
Add background image: decide to show and upload a custom image as a background, instead of a color.
Border radius (px): choose to have square or rounded edges (0 for square).
Padding (px): set the amount of space around the content.
Shadow: add a shadow color to the notification.
Again, on the right-hand side, you can see the changes you apply directly in the preview.
Step 7 – Display options
The ‘Display options‘ allow us to override the default options we have set in the general Display settings, regarding how the notification is displayed to the user in the frontend page.
Override default position: enable this option if you want to override the default position of the notification.
Select a position: decide in which position on the page the notification pops up:
Top left
Top right
Bottom left
Bottom right
Override default display options: enable to override the default display options for the notification.
Show this notification to: you can choose which users can see the notification. You can choose to all users, only guest users, or only logged-in users.
Additional geolocation filter: decide to hide or show notifications to users from certain countries.
For example, we want to show this notification to users from Spain, even though these users do not see notifications by default because we have excluded that country in the general “Display Options” settings.
Notification visibility on pages: decide to show the notification on all pages or show/hide it only on specific pages.
Notification visibility on product pages: either show it on all product pages, or decide to show/hide the notification on selected products or categories.
Step 8 – Final result
On the frontend, the notification would look like this:
By clicking on the “Add notification“ button, a popup will open allowing us to select the notification we want to create. In this case, we want to add a Testimonials notification when users are visiting the product page for ‘Espadrilla’.
Step 2 – Notification name
The name you add here is for admin view only. The customer will not see this name, this is simply the title you give to the notification and it is a mandatory field.
Step 3 – Notification content
First, we start by adding the text of the notification from the ‘Content’ tab. As you can see in the example below, you can edit the font, the size, etc.
Notification text: from the available editor you can add the text that will be shown in the notification. You can use the available placeholders:%testimonialname%, %testimonialtext%, %stars%.
Please, note: The actual testimonial text is written in the ‘Testimonials‘ tab (Step 4). In the example from the preview above, the text in the editor is used to show “Jin Xi Li says:”
Add link: you can add a link to redirect customers that click on the notification. If you add a link the mouse will change to a ‘hand’ icon on hover, so the customer sees that he can click on it.
On the right side, you see a preview of the notification you are creating in real time. It changes dynamically as you are editing the notification.
Step 4 – Testimonial options
Now, we can start to create testimonials.
When you click on the ‘Create new’ button, you will be able to edit the following options:
Testimonial name: name of the dummy customer.
Avatar: show the default avatar or upload a custom one.
Avatar position: decide to show it above, left, right or under the text.
Avatar alignment: depending on the position, decide the horizontal/vertical alignment.
In this example, we choose to show a custom avatar left from text on top.
For more information on the image position and alignment, check this page.
Testimonial text: add here the testimonial text that will be shown within the notification. You can also decide to copy-paste real testimonials here.
Rating: add a number of stars as a rating, that is shown within the notification.
Save / Delete: after editing the options, you can save or delete the testimonial.
The testimonials that you create will be shown randomly, they do not follow any order.
Step 5 – Style
Moving on to the ‘Style’ tab where we can manage the colors, padding, background, etc. of the notification.
Width (px): width of the notification.
Background colors: default color, and color on hover state.
Add background image: decide to show and upload a custom image as a background, instead of a color.
Border radius (px): choose to add square or rounded edges (0 for square).
Padding (px): set the amount of space around the content.
Shadow: add a shadow color to the notification.
Again, on the right-hand side, you can see the changes you apply directly in the preview.
Step 6 – Display options
The ‘Display options’ allow us to override the default options we have set, with regard to displaying the notification.
Override default position: enable this option if you want to override the default position of the notification.
Select a position: decide in which position on the page the notification pops up:
Top left
Top right
Bottom left
Bottom right
Override default display options: enable to override the default display options for the notification.
Show this notification to: you can choose which users can see the notification. You can choose to all users, only guest users, or only logged-in users.
Additional geolocation filter: decide to hide or show notifications to users from certain countries.
For example, we want to show this notification to users from Spain, even though these users do not see notifications by default because we have excluded that country in the general “Display Options” settings.
Notification visibility on pages: decide to show the notification on all pages or show/hide it only on specific pages.
Notification visibility on product pages: either show it on all product pages, or decide to show/hide the notification on selected products or categories.
In this case, we want to hide the Testimonials in the Shop and Cart pages, and show it only in the page of our product “Espadrillas”.
Step 7 – Final result
On the frontend, the notification would look like this:
By clicking on the “Add notification“ button, a popup will open allowing us to select the notification we want to create. In this case, we want to add a Real order notification.
Step 2 – Notification name
The name you add here is for admin view only. The customer will not see this name, this is simply the title you give to the notification and it is a mandatory field.
Step 3 – Notification content
First, we start by adding the text of the notification from the ‘Content’ tab. As you can see in the example below, you can edit the font, the size, etc.
Notification text: from the available editor you can add the text that will be shown in the notification. You can use the available placeholders: %customername%, %customerlocation%, %productname%, %timeago%.
On the right side, you see a preview of the notification you are creating in real time. It changes dynamically as you are editing the notification.
Step 4 – Image options
Next we decide to add a image to the notification, by enabling the “Add image” option.
Notification image: you can choose no image, the product image or upload a custom image.
Image position: select the position of the image based on the text (above it, to the left, to the right or under it).
Image alignment: based on the image position, you can configure its alignment.
Notification links to: when clicking on the notification, it redirects to:
Nothing – no link: the notification is not clickable.
The product page: redirect to the product page.
A custom link: add a custom URL to redirect the customer
In this example, we choose to show an image on the top left side.
For more information on the image position and alignment, check this page.
Step 5 – Products to show
We can decide which orders will be included in this notification from the ‘Products to show’ tab.
Promote orders made in the last: set which orders to show based on how long ago they were place. You can show orders made in the past xx days or hours.
Promote orders with status: you can configure which orders to show depending on the status.
Hide out of stock products: when activated, it will hide orders made from products that are now out of stock.
Exclude products: decide to exclude products and/or categories from showing in the notification.
Products to exclude
Categories to exclude
In this example, we will exclude the notification in the “Sneaker” product and “Accessories” category.
Step 6 – Style
Moving on to the ‘Style’ tab where we can manage the colors, padding, background, etc. of the notification.
Width (px): width of the notification.
Background colors: default color, and color on hover state.
Add background image: decide to show and upload a custom image as a background, instead of a color.
Border radius (px): choose to add square or rounded edges (0 for square).
Padding (px): set the amount of space around the content.
Shadow: add a shadow color to the notification
Again, on the right-hand side, you can see the changes you apply directly in the preview.
Step 7 – Display options
The ‘Display options‘ allow us to override the default options we have set in the general Display settings, regarding how the notification is displayed to the user in the frontend page.
Override default position: enable this option if you want to override the default position of the notification.
Select a position: decide in which position on the page the notification pops up:
Top left
Top right
Bottom left
Bottom right
Override default display options: Enable to override the default display options for the notification.
Show this notification to: You can choose which users can see the notification. You can choose to all users, only guest users, or only logged-in users.
Additional geolocation filter: Decide to hide or show notifications to users from certain countries.
For example, we want to show this notification to users from Spain, even though these users do not see notifications by default because we have excluded that country in the general “Display Options” settings.
Notification visibility on pages: Decide to show the notification on all pages or show/hide it only on specific pages.
Notification visibility on product pages: Either show it on all product pages, or decide to show/hide the notification on selected products or categories.
Step 8 – Final result
On the frontend, the notification would look like this:
By clicking on the “Add notification“ button, a popup will open allowing us to select the notification we want to create. In this case, we want to add a Dummy order’ notification, which will show dummy purchases made by dummy customers.
Step 2 – Notification name
The name you add here is for admin view only. The customer will not see this name, this is simply the title you give to the notification and it is a mandatory field.
Step 3 – Notification content
First, we start by adding the text of the notification content. As you can see in the example below, you can edit the font, the size, etc.
Notification text: From the available editor you can add the text that will be shown in the notification. Use the available placeholders: %customername%, %customerlocation%, %productname%, %timeago%.
You can set the placeholder information in the ‘Placeholders’ tab, as explained here.
On the right side, you see a preview of the notification you are creating in real time. It changes dynamically as you are editing the notification.
Step 4 – Image options
Next we decide to add an image to the notification, by enabling the “Add image” option.
Notification image: Select from no image, the product image or upload a custom image.
Image position: Select the position of the image based on the text (above it, to the left, to the right or under it).
Image alignment: Based on the image position, you can configure its alignment.
Notification links to: When clicking on the notification, it redirects to:
Nothing – no link: The notification is not clickable.
The product page: Redirect to the product page.
A custom link: Add a custom URL to redirect the customer
In this example, we choose to show an image on the top left side.
For more information on the image position and alignment, check this page.
Step 5 – Products to show
We can decide which product orders should be included in the notification from the ‘Products to show’ tab.
Use this notification to randomly promote:
All products
On sale products
Featured products (set in WooCommerce > Products).
Recent products (latest added products).
Select specific products (select which products to show).
Select specific product categories (select which product categories to show).
Hide out of stock products: When activated, it will hide orders made from products that are now out of stock.
Exclude products: Decide to exclude products and/or categories from showing in notifications.
Products to exclude
Categories to exclude
Step 6 – Style
Moving on to the ‘Style’ tab where we can manage the colors, padding, background, etc. of the notification.
Width (px): Width of the notification.
Background colors: Default color, and color on hover state.
Add background image: Decide to show and upload a custom image as a background, instead of a color.
Border radius (px): Choose to add square or rounded edges (0 for square).
Padding (px): Set the amount of space around the content.
Shadow: Add a shadow color to the notification.
Again, on the right-hand side, you can see the changes you apply directly in the preview.
Step 7 – Display options
The ‘Display options‘ allow us to override the default options we have set in the general Display settings, regarding how the notification is displayed to the user in the frontend page.
Override default position: Enable this option if you want to override the default position of the notification.
Select a position: Decide in which position on the page the notification pops up:
Top left
Top right
Bottom left
Bottom right
Override default display options: Enable to override the default display options for the notification.
Show this notification to: You can choose which users can see the notification. You can choose to all users, only guest users, or only logged-in users.
Additional geolocation filter: Decide to hide or show notifications to users from certain countries.
For example, we want to show this notification to users from Spain, even though these users do not see notifications by default because we have excluded that country in the general “Display Options” settings.
Notification visibility on pages: Decide to show the notification on all pages or show/hide it only on specific pages.
Notification visibility on product pages: Either show it on all product pages, or decide to show/hide the notification on selected products or categories.
Step 8 – Final result
On the frontend, the notification would look like this:
By clicking on the “Add notification“ button, a popup will open allowing us to select the notification we want to create. In this case, we want to add a ‘Counter’ notification to show the number of people that have purchased or are watching a certain product.
Step 2 – Notification name
The name you add here is for admin view only. The customer will not see this name, this is simply the title you give to the notification and it is a mandatory field.
Step 3 – Notification content
First, we start by adding the text of the notification content. As you can see in the example below, you can edit the font, size, etc.
Notification text: from the available editor you can add the text that will be shown in the notification. You can use the placeholders: %productname% and %number%.
You can set the placeholder information in the ‘Placeholders’ tab, as explained here.
We decide we want to use the %number% placeholder, to show how many people are watching the product.
On the right side, you see a preview of the notification you are creating in real time. It changes dynamically as you are editing the notification.
Step 4 – Image options
Next, we decide to add an image to the notification, by enabling the “Add image” option.
Notification image: select from no image, the product image or upload a custom image.
Image position: select the position of the image based on the text (above it, to the left, to the right or under it).
Image alignment: based on the image position, you can configure its alignment.
Notification links to: when clicking on the notification, it redirects to:
Nothing – no link: the notification is not clickable.
The product page: redirect to the product page.
A custom link: add a custom URL to redirect the customer
In this example, we choose to show an image on the top left side.
For more information on the image position and alignment, check this page.
Step 5 – Products to show
We can decide which products should be included in the notification from the ‘Products to show’ tab.
Use this notification to randomly promote:
All products
On sale products
Featured products (set in WooCommerce > Products).
Recent products (latest added products).
Select specific products (select which products to show).
Select specific product categories (select which product categories to show).
In this example, we select a ‘Specific product to show’, which is the hotel room. This means that the counter notification is only applied to this product.
Hide out of stock products: when activated, it will hide orders made from products that are now out of stock.
Exclude products: decide to exclude products and/or categories from showing in notifications.
Products to exclude
Categories to exclude
Step 6 – Style
Moving on to the ‘Style’ tab where we can manage the colors, padding, background, etc. of the notification.
Width (px): width of the notification.
Background colors: default color, and color on hover state.
Add background image: decide to show and upload a custom image as a background, instead of a color.
Border radius (px): choose to add square or rounded edges (0 for square).
Padding (px): set the amount of space around the content.
Shadow: add a shadow color to the notification.
Again, on the right-hand side, you can see the changes you apply directly in the preview.
Step 7 – Display options
The ‘Display options‘ allow us to override the default options we have set in the general Display settings, regarding how the notification is displayed to the user in the frontend page.
Override default position: decide to change the default position of the notification.
Select a position: decide where on the page to show the notification:
Top left
Top right
Bottom left
Bottom right
Override default display options: decide to change the default display options for the notification.
Show this notification to: show it to all users, only guest users, or only logged-in users.
Additional geolocation filter: decide to hide or show notifications to users from certain countries.
For example, we want to show this notification to users from Spain, even though these users do not see notifications by default because we have excluded that country in the general “Display Options” settings.
Notification visibility on pages: decide to show the notification on all pages or show/hide it only on specific pages.
Notification visibility on product pages: either show it on all product pages, or decide to show/hide the notification on selected products pages or categories.
Step 8 – Final result
On the frontend, the counter notification would look like this:
By clicking on the “Add notification“ button, a popup will open allowing us to select the notification we want to create. In this case, we want to add a Social – Follow us notification.
Step 2 – Notification name
The name you add here is for admin view only. The customer will not see this name, this is simply the title you give to the notification and it is a mandatory field.
Step 3 – Notification content
First, we start by adding the text of the notification from the ‘Content’ tab. As you can see in the example below, you can edit the font, the size, etc.
Notification text: from the available editor you can add the text that will be shown in the notification.
On the right side, you see a preview of the notification you are creating in real time. It changes dynamically as you are editing the notification.
Step 4 – Image options
Now we can decide whether to add a custom image to the notification, by enabling the “Add image” option.
Upload image: choose an image to upload.
Image position: select the position of the image based on the text (above it, to the left, to the right or under it).
Image alignment: based on the image position, you can configure its alignment.
In this example, we choose to not show an image.
For more information on the image position and alignment, check this page.
Step 4 – Socials
From the ‘Socials’ tab we can decide to add social media channels to the notification. You can decide which social media to show or not by using the toggle button.
By default, the plugin includes:
Facebook
X (Twitter)
Instagram
YouTube
TikTok
LinkedIn
You can also add a custom social icon, for example if the social media channel of your choice is not available.
Show Custom Icon: enable to show a custom icon.
Set custom URL: enter here the URL that redirects the user when clicking on the custom icon.
Upload icon: upload the custom icon.
The icons are shown in grey, when hovering over them you’ll see it in color.
Step 5 – Style
Moving on to the ‘Style’ tab where we can manage the colors, padding, background, etc. of the notification.
Width (px): width of the notification.
Background colors: default color, and color on hover state.
Add background image: decide to show and upload a custom image as a background, instead of a color.
Border radius (px): choose to add square or rounded edges (0 for square).
Padding (px): decide the amount of space around the content.
Shadow: add a shadow color to the notification.
Again, on the right-hand side, you can see the changes you apply directly in the preview.
Step 6 – Display options
The ‘Display options’ allow us to override the default options we have set, with regard to displaying the notification.
Override default position: enable this option if you want to override the default position of the notification.
Select a position: decide in which position on the page the notification pops up:
Top left
Top right
Bottom left
Bottom right
Override default display options: enable to override the default display options for the notification.
Show this notification to: you can choose which users can see the notification. You can choose to all users, only guest users, or only logged-in users.
Additional geolocation filter: decide to hide or show notifications to users from certain countries.
For example, we want to show this notification to users from Spain, although by default, these users do not see notifications. Because in the general ‘Display options’ settings, we have excluded that country.
Notification visibility on pages: decide to show the notification on all pages or show/hide it only on specific pages.
Notification visibility on product pages: either show it on all product pages, or decide to show/hide the notification on selected products or categories.
Step 7 – Final result
On the frontend, the notification would look like this:
