First Purchase Reward Plugin for WooCommerce

The First Purchase Reward for WooCommerce plugin is a powerful tool designed to help store owners increase sales, attract new customers, and enhance engagement by offering exclusive rewards for first-time buyers. With flexible discount options, store owners can provide percentage-based or fixed discounts, free shipping, or even free products to encourage first-time purchases. The plugin dynamically updates prices in real time based on selected product variations, ensuring a seamless shopping experience. Additionally, engaging flash notifications and customizable banners create a sense of urgency, helping to maximize conversions and build long-term customer loyalty effortlessly.

1. Download the First Purchase Reward Plugin for WooCommerce.zip file from your WooCommerce account.
2. At the WordPress Admin Panel, go to Plugins > Add New and Upload Plugin with the file you downloaded after purchase.
3. Install Now and Activate extension.

More information at: Install and Activate Plugins/Extensions.

To configure this extension, navigate to WooCommerce > Settings > First Purchase Reward. Check the Enable Plugin option, and enable notifications for the Shop and Product pages by selecting the respective checkboxes.

Go to WooCommerce > All Reward Rules and click Add New Reward Rule. Enter a rule name, check the Activate Rule checkbox, and select a discount type from the dropdown (Fixed Amount, Percentage, Free Shipping, Discounted Price, or Free Product).

Next, choose where the rule should apply—entire shop, specific categories, or selected products. If applying to categories or products, you can select multiple options as needed.

After selecting where the rule applies (Full Shop, Specific Categories, or Selected Products), choose the user roles the rule should apply to. You can select one, multiple, or all user roles, giving the admin full flexibility to manage rewards efficiently.

After selecting the user roles, the next setting is Disable Rule Automatically. To enable this, simply check the Disable Rule Automatically checkbox. Once enabled, you can set a specific date and time for when the rule should be deactivated, allowing for better control over limited-time offers.

Additionally, you can choose to activate the rule for guest users by checking the Enable for Guest Users checkbox. This allows first-time visitors who haven’t created an account to also benefit from the reward, helping to increase conversions.

Shop Page Notifications

Depending on the rules set in the backend, notifications will be displayed (if enabled by the admin) on the shop page under each product. There is also a setting to customize the notification content, text color, background color, and position, allowing for a tailored display.

Additionally, the plugin includes top and bottom bar notifications, which enable store owners to showcase general announcements and promotions, encouraging users to visit the shop and make a purchase—ultimately boosting sales. Admins can easily enable or disable these notifications and customize their position, content, and styles to match their store’s branding.

Single Product Page Notifications

If notifications are enabled, they will be displayed in multiple locations on the single product page:

Top & Bottom Notification Bars
These banners appear at the top and bottom of the page, displaying promotional messages set by the admin.

Product Page Notifications
A notification box will be shown near the product price, highlighting the reward details such as discount percentage, fixed discount, or free product offer.

Customizable Content & Styles
Admin can modify the text, colors, and styles of these notifications directly from the settings.

Flash Sale Banner
If enabled, a flash sale banner will briefly appear, creating urgency. The admin can control the banner duration (in seconds) or choose to keep it displayed continuously.

These notifications ensure that customers are fully aware of their first-purchase rewards, increasing engagement and conversions.

Single Product Page for Variable Product

For variable products, the notification first shows the lowest available price before any variation is selected. Once the user chooses a variation, the notification updates instantly to display the selected variation’s actual price, discount applied, and final price. This real-time update helps customers easily see their savings and understand how discounts work for different variations.

1. Enable Plugin

• A checkbox to activate the plugin and ensure that reward rules and notifications work.

2. Enable Notification (Product Pages & Shop Pages)

• Two checkboxes to enable discount notifications on:
  • Product Pages (individual product details pages).
  • Shop Pages (category and shop listing pages).

3. Notification Position

• Shop Page Position: Dropdown to select where the notification appears on the shop and category pages (e.g., above the product title).
• Product Page Position: Dropdown to set where notifications appear on individual product pages (e.g., below title and price).

4. Discount Type Notifications

These settings allow the admin to customize the notification messages for different types of discounts. The messages use placeholders to dynamically insert discount values.

• Fixed Discount Type Notification:
  • Message format: “Congratulations! You can get a discount of {fixed_discount}.”
  • Uses {fixed_discount} for the fixed discount value, {final_price} for the discounted price, and {actual_product_price} for the original price.
• Percentage Discount Type Notification:
  • Message format: “Congratulations! You can get a discount of {percentage_discount}.”
  • Uses {percentage_discount} for the discount percentage.
• Discounted Price Type Notification:
  • Message format: “Congratulations! You can get a discount and the price is {discount_price}.”
  • Uses {discount_price} for the final price after discount.
• Free Product Type Notification:
  • Message format: “You can get {free_product_name} as a free product if you buy this.”
  • Uses {free_product_name} to display the name of the free product.
• Free Shipping Type Notification:
  • Message format: “You can get this product with no shipping charges.”
  • Used for free shipping offers.

Customization Options:

1. Text Color
   • Allows admins to set the text color for notifications.
   • Example: White (#ffffff).
2. Background Color
   • Defines the background color of the notification box.
   • Example: Black (#000000).
3. Font Size
   • Sets the font size of the notification text.
   • Example: 14px.
4. Border Color
   • Determines the border color for the notification box.
   • Example: Black (#000000).
5. Border Radius
   • Sets the rounded corners of the notification box.
   • Example: 0px 0px 0px 0px (no rounded corners).
6. Left Border Width
   • Specifies the width of the left border for the notification.
   • Example: 5px.
7. Left Border Color
   • Allows customization of the left border color.
   • Example: Black (#000000)

Customization Options:

1. Text Color
   • Sets the text color for both top and bottom bar notifications.
   • Example: White (#ffffff).
2. Background Color
   • Defines the background color of the notification bars.
   • Example: Black (#000000).
3. Font Size
   • Specifies the font size for the notification text.
4. Border Color
   • Sets the border color for both the top and bottom notification bars.
   • Example: Black (#000000).
5. Adjust Top Bar Notification Position
   • Allows setting the distance of the top notification bar from the top of the page.
   • Example: 0px (default position).
6. Adjust Bottom Bar Notification Position
   • Allows setting the distance of the bottom notification bar from the bottom of the page.
   • Example: 0px (default position).
7. Enable Notification Top Bar
   • A checkbox to enable or disable the top bar notification.
8. Top Notification Message
   • Customizable message displayed at the top of the website.
   • Example:”Now you can get free shipping, discount price, free product, percentage, and fixed discount types.”
9. Enable Notification Bottom Bar
   • A checkbox to enable or disable the bottom bar notification.
10. Bottom Notification Message
    • Customizable message displayed at the bottom of the website.
    • Example:”Congratulations! You can get free shipping, discount price, free product, percentage, and fixed discount types.”

Customization Options:

1. Enable Notification Flash Sale
   • Checkbox to enable or disable the flash sale notification.
2. Flash Sale Banner
   • Field to enter the URL of an image to be used as the flash sale banner.
3. Flash Message Width
   • Defines the width of the flash message.
   • Example: 45%.
4. Close Icon Color
   • Sets the color of the close (X) icon.
   • Example: White (#ffffff).
5. Close Icon Background Color
   • Sets the background color of the close icon.
   • Example: Black (#000000).
6. Close Icon Position (Top to Bottom)
   • Adjusts the vertical position of the close icon.
   • Example: 9.
7. Close Icon Position (Right to Left)
   • Adjusts the horizontal position of the close icon.
   • Example: 10.
8. Close Icon Font Size
   • Defines the font size of the close icon.
   • Example: 20px.
9. Hide Flash Sale
   • Sets the number of seconds before the flash sale notification automatically disappears.
   • Example: 5 seconds.