View Product Page

Create a new notification

When installing the plugin for the first time, this is what your ‘Notifications’ tab looks like:

No notifications yet

An empty page with a button to create your first notification. By clicking on this button, a popup will appear that lets you choose the notification type.

Popup create new notification

There are 7 notifications types included in this plugin by default:

  1. Simple: A Basic notification – no special added options.
  2. Coupon: A notification designed to share a coupon.
  3. TestimonialsShow testimonials of your site.
  4. Real order: Show a notification based on real orders.
  5. Dummy order: Show a notification based on dummy orders.
  6. CounterShow how many people are checking out the same item.
  7. Social – Follow usShow a notification referring to social media.

The following chapters explain how to create each notification type.

Simple notification

Step 1 – Add a new notification

Click button add new

By clicking on the “+ Add notification” button a popup will open and we will select the notification we want to create. In this case, we want to add a ‘Simple’ notification for ‘free shipping’.

Select notifiction - simple

Step 2 – Notification name

The name you give in here, is for admin use only. The customer will not see this name, this is simply the title you give to the notification, it is a mandatory field.

Name of notification

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.

Content simple - text

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.

Content simple - image

  • Upload image: choose a custom image that you want to show.
  • Image position: Decide to show it above, left, right or under the text.
  • Image alignment: Decide the alignment, top/bottom/left/right or center.

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

Step 5 – Button options

For this notification we decide to add a button, to ‘Read more’ about the conditions of the free shipping.

content simple - button

  • Button text: The text you want to show on the button.
  • Button colors: Set several colors for the button.
  • Border radius (px): Decide to have square or rounded edges (0 for square).
  • Button URL: Add the URL you can redirect the customer to, 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.

Simple style

  • 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): Decide to have 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 7 – Display options

The ‘Display options’ allow us to override the default options we have set, with regards to displaying the notification.

simple display options position

  • 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

simple display options display

  • 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, only logged in users.
  • Additional geolocation filter: Decide to hide or show notifications to users from certain countries.

Override geolocation in notification

  • Notification visibility on pages: Decide to show the notification on all pages or only specific pages.
  • Notification visibility on product pages: Either show on all product pages, specific product pages or specific product categories.
    • Decide to show or hide the notification on selected products or categories.

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. 

Step 8 – Final result

On the frontend, the notification would look like this:

Example simple notification

Coupon notification

Step 1 – Add a new notification

Click button add new

By clicking on the “+ Add notification” button a popup will open and we will select the notification we want to create. In this case, we want to add a ‘Coupon’ notification for a ‘summer sale’.

Select notifiction - coupon

Step 2 – Notification name

The name you give in here, is for admin use only. The customer will not see this name, this is simply the title you give to the notification, it is a mandatory field.

Name of notification

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.

coupon content text

  • Notification text: You can use the available placeholder %couponcode%.
  • Coupon code: Here you can insert the WooCommerce coupon code that you have previously created.

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.

coupon content image

  • Upload image: choose a custom image that you want to show.
  • Image position: Decide to show it above, left, right or under the text.
  • Image alignment: Depending on the position, decide the horizontal/vertical 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 here.

Step 5 – Button options

For this notification we decide to add a button, to copy the code directly.

coupon content button

  • Button text: The text you want to show on the button.
  • Button colors: Set several colors for the button.
  • Border radius (px): Decide to have 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.
    • Apply the code automatically: The code is automatically applied on the cart page.
    • Redirect the user to a specific page: Add the URL you can redirect the customer to, when clicking on the button. For example a conditions page.

Step 6 – Style

Moving on to the ‘Style’ tab where we can manage the colors, padding, background etc. of the notification.

Simple style

  • 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): Decide to have 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 7 – Display options

The ‘Display options’ allow us to override the default options we have set, with regards to displaying the notification.

simple display options position

  • 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

simple display options display

  • 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, only logged in users.
  • Additional geolocation filter: Decide to hide or show notifications to users from certain countries.

Override geolocation in notification

  • Notification visibility on pages: Decide to show the notification on all pages or only specific pages.
  • Notification visibility on product pages: Either show on all product pages, specific product pages or specific product categories.
    • Decide to show or hide the notification on selected products or categories.

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. 

Step 8 – Final result

On the frontend, the notification would look like this:

example coupon notification

 

Testimonials notification

Step 1 – Add a new notification

Click button add new

By clicking on the “+ Add notification” button a popup will open and we will select the notification we want to create. In this case, we want to add a ‘Testimonial’ notification to show customers opinions.

Select notifiction - testimonials

Step 2 – Notification name

The name you give in here, is for admin use only. The customer will not see this name, this is simply the title you give to the notification, it is a mandatory field.

Name of notification

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.

testimonial content text

  • Notification text: You can use the available placeholders %testimonialname%, %testimonialtext%, %stars%. The actual testimonial text, is written in the ‘Testimonials‘ tab (step 4).
  • 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 see 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 start to create testimonials.

testimonials write testimonial

  • Testimonial name: Name of the dummy customer.
  • Avatar: Decide to show the default avatar, or upload a custom avatar.
  • 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 avatar position and alignment, check this page here.

write testimonial text

  • Testimonial text: the actual custom 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 show within the notification.
  • Save / Delete: After editing the options,  you can save or delete the testimonial.

testimonials overview

The testimonials that you add here will be shown randomly.

Step 5 – Style

Moving on to the ‘Style’ tab where we can manage the colors, padding, background etc. of the notification.

testimonials style

  • 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): Decide to have 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 regards to displaying the notification.

Tetimonials display options (1)

  • 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

testimonial display options, display

  • 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, only logged in users.
  • Additional geolocation filter: Decide to hide or show notifications to users from certain countries.

Override geolocation in notification

  • Notification visibility on pages: Decide to show the notification on all pages or only specific pages.
  • Notification visibility on product pages: Either show on all product pages, specific product pages or specific product categories.
    • Decide to show or hide the notification on selected products or categories.

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. 

Step 7 – Final result

On the frontend, the notification would look like this:

Example testimonial

Real order notification

Step 1 – Add a new notification

Click button add new

By clicking on the “+ Add notification” button a popup will open and we will select the notification we want to create. In this case, we want to add a ‘Real order’ notification to show purchases made by real customers.

Select notifiction - real order

Step 2 – Notification name

The name you give in here, is for admin use only. The customer will not see this name, this is simply the title you give to the notification, it is a mandatory field.

Name of notification

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.

real order content text

  • Notification text: 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

Now we decide to add or not add an image to the notification.

real order content image options

  • Notification image: Decide to show no image, the product image or upload a custom image.
  • Image position: Decide to show it above, left, right or under the text.
  • Image alignment: Depending on the position, decide the horizontal/vertical 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 here.

Step 5 – Products to show

Now we can decide when we want to show the notification and which products it can or cannot include.

real orders products to show

  • Promote orders made in the last: Show orders made in the past xx days/hours.
  • Promote orders with status: Decide which orders you want to show.
  • Hide out of stock products: If an order has been made for a product that is now out of stock, the notification will not be shown.

real orders - exclude products

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

real orders style

  • 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): Decide to have 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 (eg. red).

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, with regards to displaying the notification.

real orders display options - position

  • 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

Real order display options

  • 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, only logged in users.
  • Additional geolocation filter: Decide to hide or show notifications to users from certain countries.

Override geolocation in notification

  • Notification visibility on pages: Decide to show the notification on all pages or only specific pages.
  • Notification visibility on product pages: Either show on all product pages, specific product pages or specific product categories.
    • Decide to show or hide the notification on selected products or categories.

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. 

Step 8 – Final result

On the frontend, the notification would look like this:

Frontend example

Dummy order notification

Step 1 – Add a new notification

Click button add new

By clicking on the “+ Add notification” button a popup will open and we will select the notification we want to create. In this case, we want to add a ‘Dummy order’ notification to show dummy purchases made by dummy customers.

Select notifiction - dummy order

Step 2 – Notification name

The name you give in here, is for admin use only. The customer will not see this name, this is simply the title you give to the notification, it is a mandatory field.

Name of notification

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.

real order content text

  • Notification text: You can 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

Now we decide to add or not add an image to the notification.

real order content image options

  • Notification image: Decide to show no image, the product image or upload a custom image.
  • Image position: Decide to show it above, left, right or under the text.
  • Image alignment: Depending on the position, decide the horizontal/vertical 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 here.

Step 5 – Products to show

Now we can decide when we want to show the notification and which products it can or cannot include.

dummy order product to show

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

show or hide out of stock and categories for dummy

  • Hide out of stock products: If an order has been made for a product that is now out of stock, the notification will not be shown.
  • 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.

real orders style

  • 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): Decide to have 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 (eg. red).

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, with regards to displaying the notification.

real orders display options - position

  • 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

Real order display options

  • 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, only logged in users.
  • Additional geolocation filter: Decide to hide or show notifications to users from certain countries.

Override geolocation in notification

  • Notification visibility on pages: Decide to show the notification on all pages or only specific pages.
  • Notification visibility on product pages: Either show on all product pages, specific product pages or specific product categories.
    • Decide to show or hide the notification on selected products or categories.

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. 

Step 8 – Final result

On the frontend, the notification would look like this:

Frontend example dummy order

Counter notification

Step 1 – Add a new notification

Click button add new

By clicking on the “+ Add notification” button a popup will open and we will select the notification we want to create. In this case, we want to add a ‘Counter’ notification to show a number of people that have purchased, or are watching a certain product.

Select notifiction - counter

Step 2 – Notification name

The name you give in here, is for admin use only. The customer will not see this name, this is simply the title you give to the notification, it is a mandatory field.

Name of notification

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.

counter concept text

  • Notification text: You can use the available placeholders %productname% and %number%. 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.

We decide we want to use the %number% placeholder, to show how many people are watching the product.

Step 4 – Image options

Now we decide to add or not add an image to the notification.

real order content image options

  • Notification image: Decide to show no image, the product image or upload a custom image.
  • Image position: Decide to show it above, left, right or under the text.
  • Image alignment: Decide the alignment, top/bottom/left/right or center.
  • 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 here.

Step 5 – Products to show

Now we can decide when we want to show the notification and which products it can or cannot include.

dummy order product to show

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 on this product.

show or hide out of stock and categories for dummy

  • Hide out of stock products: If an order has been made for a product that is now out of stock, the notification will not be shown.
  • 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.

counter style tab

  • 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): Decide to have 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 (eg. turquoise).

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, with regards to displaying the notification.

real orders display options - position

  • 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

Real order display options

  • 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, only logged in users.
  • Additional geolocation filter: Decide to hide or show notifications to users from certain countries.

Override geolocation in notification

  • Notification visibility on pages: Decide to show the notification on all pages or only specific pages.
  • Notification visibility on product pages: Either show on all product pages, specific product pages or specific product categories.
    • Decide to show or hide the notification on selected products or categories.

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. 

Step 8 – Final result

On the frontend, the notification would look like this:

Example counter frontend

Social – Follow Us notification

Step 1 – Add a new notification

Click button add new

By clicking on the “+ Add notification” button a popup will open and we will select the notification we want to create. In this case, we want to add a ‘Social – Follow us’ notification to show a our Social Media channels and ask people to follow us.

Select notifiction - social

Step 2 – Notification name

The name you give in here, is for admin use only. The customer will not see this name, this is simply the title you give to the notification, it is a mandatory field.

Name of notification

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.

Social content text

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.

social notification add image

  • Upload image: choose a custom image that you want to show.
  • Image position: Decide to show it above, left, right or under the text.
  • Image alignment: Decide the alignment, top/bottom/left/right or center.

In this example we choose to not show an image.

For more information on the image position and alignment, check this page here.

Step 4 – Socials

From the ‘Socials’ tab we can decide to add social media channels to the notification. You can simply decide to show, or not show them by using the toggle.

By default the plugin includes:

  • Facebook
  • Twitter
  • Instagram
  • YouTube
  • TikTok
  • LinkedIn

socials add socials

  • Specific social media URL: Add the specific url.
  • Specific social media icon: Decide to use the default icon or upload a custom icon.

Example of socials on hover

The icons are shown in grey, when hovering over them you’ll see it in color.

You can also add a custom social icon, for example, if the social media channel of your choice is not available.

socials custom icon

Step 5 – Style

Moving on to the ‘Style’ tab where we can manage the colors, padding, background etc. of the notification.

socials style tab

  • 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): Decide to have 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 regards to displaying the notification.

Socials display options - position

  • 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

socials display options - display

  • 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, only logged in users.
  • Additional geolocation filter: Decide to hide or show notifications to users from certain countries.

Override geolocation in notification

  • Notification visibility on pages: Decide to show the notification on all pages or only specific pages.
  • Notification visibility on product pages: Either show on all product pages, specific product pages or specific product categories.
    • Decide to show or hide the notification on selected products or categories.

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. 

Step 7 – Final result

On the frontend, the notification would look like this:

socials frontend example