WooCommerce Spin to Win

• The admin creates and manages the spin campaigns in the admin panel. 
• The attributes of the spin wheel are managed by the admin.   
• Segments of the spin wheel are created and managed by the admin. 
• The admin sets the positions of the segments on a spin wheel. 
• the admin can specify the number of times when the customers spin the lucky wheel with the email address.
• For a segment, the Gravity or probability of appearing must be set by the admin. 
• The admin has to manage the layout of the spin wheel. 
• A trigger option for a spin wheel is present in the admin-specified pages for the customer.
• On clicking the trigger, the spin wheel shall pop up for the customers.
• The Report section includes the report and statistics for each spin campaign. 
• On winning the spin, the customer will receive a coupon code, which can be availed while making a purchase.
• Customers will get coupon data on the e-mail as well as on the spin to win the section. 
• The admin will get notifications, whenever the user wins a coupon using the spin to win wheel.
• Those segments of the spin to win wheel will get deleted automatically and the coupons get expired.
• The admin can configure endpoints by using the admin panel.

The user will get a zip file that needs to be uploaded in the “Add New” menu option in the WordPress admin panel.

For this login to WordPress Admin Panel and in the Dashboard hover your mouse over the “Plugins” menu option select the “Add New” option.

After this, the user will see an option on the top of the page that is “Upload Plugin”, click the option to upload the zip file.

On clicking the “Upload Plugin” option, the user will see a “Choose File” button. Click on the button to browse for the zip file as per the image below.

After browsing the file, click on the “Install Now” button so as to install the plugin as per the snapshot.

Once the user installs the plugin, a message “Plugin installed successfully” displays and an “Activate Plugin” is visible to activate the plugin.

The user needs to click on the “Activate Plugin” button to activate the plugin.

On installing the WooCommerce Spin to Win plugin successfully, the admin can navigate to Spin to Win > Add Spin Campaign so as to add spin campaigns.

The admin can configure the following fields: 

Spin Campaign Name: The admin adds the name of the Spin Campaign.

Scheduled: Can be chosen as Yes or No by the admin. If set as Yes, the admin needs to set the start and the end dates.

Start Date: The admin sets the Start date of the Spin Campaign.

End Date: The End date of the Spin Campaign is set by the admin. 

Status: The admin sets the status as Enable or Disable. 

Priority: The admin sets the priority. The higher the value, the higher is the priority. 

Customer Spin time: Here the admin enters How many times can the customers spin the lucky wheel with the email address.

On saving the details, a success message,” Added Spin Campaign Successfully” shall display as shown in the image below. 

Also, some additional tabs for spin wheel configuration will appear, as shown in the image below, once the Spin Campaign is created. 

Under the Spin to Win sub menu option, which is present under the Spin to Win tab, the admin will find a Spin Campaign List.

To create a Spin Wheel and set its configurations, the admin needs to click on the ‘Edit‘ option of the respective Spin Campaign.

For instance, in the image below, the admin chooses to ‘Edit‘ the Mega Spin Contest campaign. 

As the admin clicks on the ‘Edit’ option of the ‘Mega Spin Contest,’ an Edit Spin Campaign opens up displaying the tabs such as Spin wheel Form, Segment List, Add Segment, etc

Now, let us discuss the configurations set under each tab, separately. 

Form

The admin needs to configure the Welcome and Result Forms of the spin wheel under the Form tab.

Welcome Form

Under Welcome Form, the admin will configure fields such as Heading, Description, Background Color 1 and 2, Text Color, etc. 

The admin will configure the fields of the Welcome Form as under:

Heading: The heading which displays on the Welcome Form. 

Description: The description that will display on the Welcome Form. 

Background Color 1 and 2: The admin sets Background colors 1 and 2. 

Text color: The color of the text. 

Enable Customer’s Email Validation: The admin may set this as Yes or No. 

Customer’s Name Label: If set as Yes, the admin sets the Label for the customer’s name.

Customer’s Email Address Label: Label for the customer’s Email Address.

Button:

• Label: The Label of the button. 
• Background Color: The background color of the button.
• Text Color: The text color of the button. 

Show Progress Meter: The admin may enable or disable the progress meter. 

Progress:

• Meter Color: Color of the Progress Meter. 
  
• Label: Label of the progress meter. 
• Percentage: The percentage that will display along with the progress meter. 

Result Form

Under Result Form, the admin will configure the fields such as Coupon Background Color, Coupon Text Color, Button Text color, Button Label, etc. 

 

The following fields are to be set by the admin under the Result Form:

Background Color 1 and 2: The admin sets the background color 1 and 2 for the resulting form. 

Text Color: The color of the text. 

Button:

• Label: The label of the button. 
• Background Color: The background color. 
• Text Color: The color of the text. 

Coupon Background Color: The background color of the coupon code.

Coupon Text Color: The text color of the coupon code.

Spin Wheel Welcome Form:

The admin will have to set the fields such as Pin Image, Background color, Background Image, Background Image Repeat Property, Show Pins, etc. 

The Spin Wheel Welcome Form can be configured as follows:

Pin Image: The admin sets the image of the Pin. 

Background Color: The Background Color of the pin image. 

Backgorund Image: The image that will display in the background. 

Background Image Repeat Property: The admin may set this as repeat. 

Show Pins: The admin may enable the Show Pins field. 

Pins Color: The color of the Pins is set by the admin. 

Pin Stroke Color: The stroke color of the Pin is set by the admin. 

Show Inner Wheel: The admin enables the Show Inner Wheel field. 

Inner Radius: The inner radius is set by the admin. 

Inner Circle Color: The color of the inner circle is set by the admin. 

Stroke Color: The color of the stroke is set by the admin. 

Segment Font Size: The font size of the segment is set by the admin. 

Text Direction: The direction of the text. 

Text Orientation: The orientation of the segment text. 

Spin Wheel Colors Form:

Under Spin Wheel Colors Form, the admin configures the following fields:

Segment Background Color: The Background color of the segment. 

Segment Text Color: The text color of the segment. 

Spin Wheel Result Form:

The following fields are to be set under Spin Wheel Result Form:

Result Segment:

• Background Color: The background color of the result segment. 
• Segment Text Color: The text color of the segment. 

Remaining Segment:

• Background Color: The background color of the remaining segment. 
• Text Color: the text color of the remaining segment. 

Further, the Segment List tab displays a list of segments that the admin creates for the spin wheel.

The admin can Add a New segment and even Edit any existing segment present in the list as shown in the image below. 

Next is the Layout Configuration tab, under which the admin needs to configure the following fields:

View: The admin sets this as either a Sidebar Slide or a Pop Up Dialog.

Popup Position: The admin sets the position of the spin wheel popup.

Spin Wheel Trigger Button Position: The position of the Spin wheel Trigger button. 

Popup Trigger Button Position: The position of the popup trigger button.

Under the Trigger Settings tab, the admin will have to configure the Visibility Form and the Spin Button Form.

Visibility Form:

The Visibility Form includes the following fields which the admin needs to configure: 

Spin Wheel Visibility: The admin sets the pages on which the Spin to win Trigger shall display.

Add Logo: The admin may add a logo for the popup.

Spin Button Form:

The Spin Button Form includes the following fields which the admin needs to configure: 

• Spin to Win Image: The image of the Spin to Win trigger. 
• Show Button: The admin may set this as Yes or No.
• Background Color: The background color of the Spin button.
• Text Color: The color of the text.
• Button Label: The label of the button. 

As soon as the customers win the spin and receive a coupon code, they can avail of the discount coupon on a purchase. 

The Reports tab displays a statistical view and a tabular representation which includes the details such as Name, Username, Email, Location, Orders, Money Spent, Last Orders, Actions, and Coupon Code, as shown in the image below. 

The admin can even make use of the filters for viewing the reports of Spin Winner/ Losser/ All User by selecting the desired user from the dropdown. 

In the frontend, the customers will have to login to a site in order to Spin the Wheel in the usual way. 

The Guest Users will have to register themselves first, so as to avail the discount offers that the Spin to Win Wheel inlays.

A login customer will find the Spin to Win trigger present on the pages which the admin sets while configuring the module. 

For instance, if the admin has configured the My Account page, the trigger will display as shown in the image below. 

 

On clicking the trigger present in the My Account page, a Spin to Win Wheel shall appear as shown in the image below.

A Spin to Win Wheel and its segments display along with their associated offer labels. 

A Welcome Form, also appears along with the Spin to Win Wheel as shown below. 

Note:

• One customer can use the spin wheel just one time for one spin campaign with his/her registered email id.

Spinning the Wheel: Win-Case

On winning the spin, the spin wheel shall change its color displaying the win state. 

Also, a coupon code will display as the customer wins the spin as shown in the image below. 

Thereafter, the customer can proceed to shopping and avail the coupon code while making a purchase. 

The customer adds desired products to cart so as to make a purchase.

Against the Apply coupon tab, the customer needs to add the won coupon code as shown in the image below. 

A success message, “Coupon code applied successfully”shall display on top of the Cart Page. 

Also, under Cart Totals, the Coupon applied will display as shown in the image below. 

Once the coupon is availed, the customer can Proceed to Checkout and Place the Order. 

The customer will have to add the Billing details, choose the Payment Method and Place the Order. 

On placing the Order, the customer can check the order details in the Order Received page as shown in the image below. 

The order details also display the discount which is applicable on the products which the customer purchases.