Spin Wheel Design

The Wheel Design section in Spin Rewards for WooCommerce lets you fully customize the look, feel, and behavior of your spin wheel.
These settings give you the creative freedom to adjust speed, text, colors, pointers, and background effects helping you create a visually engaging and branded spin-to-win experience for your customers.

Available Options

• Wheel Behavior
  • Wheel Speed Spin: Control how fast the wheel spins (1–8). Higher values make the spin faster. (Pro feature for 5–8)
  • Wheel Time Duration (Pro): Set how long the wheel spins before stopping (in seconds).
  • Wheel Size (Pro): Adjust the overall wheel size relative to its container.
  • Display Currency (Pro): Choose whether to display currency as symbols (₹, $, €) or codes (INR, USD, EUR).
• Wheel Text
  • Adjust Wheel Text Size (Pro): Set the font size for text displayed on the wheel segments.
  • Wheel Font Family (Pro): Select your preferred font for the spin wheel text.
  • Wheel Text Color (Pro): Choose a color for the text displayed on wheel segments.
• Pointer Customization
  • Wheel Pointer Position: Choose where the pointer appears center (Free) or top, bottom, left, right (Pro).
  • Wheel Pointer Color: Set the color of the pointer.
  • Wheel Pointer Type: Select between a colored pointer or a custom image pointer (Pro).
  • Wheel Pointer Cutout Color: Adjust the secondary (cutout) color when the pointer type is “Color.”
  • Wheel Pointer Image (Pro): Upload a custom image to use as the pointer.
• Wheel Appearance
  • Wheel Center Color: Choose the color for the wheel’s center hub.
  • Wheel Border Color (Pro): Customize the border color of the wheel.
  • Wheel Dot Color (Pro): Define the color of small dots around the wheel.
• Background Design
  • Background Image: Select between the default image or a custom background.
  • Custom Background Image: Upload your own image to use as the popup background.
  • Background Blend Mode: Set how the background color interacts with the background image.
  • Background Color: Choose a solid background color if no image is used.
  • Text Color: Set the general text color used outside the wheel area.
  • Background Effects (Pro): Add fun animated effects such as Balloons, Snowflakes, Hearts, or Falling Leaves to enhance visual appeal.
• Button Customization
  • Spin Button Text: Customize the text displayed on the spin button.
  • Spin Button Text Size (Pro): Adjust the font size of the spin button label.
  • Spin Button Border Radius (Pro): Define the roundness of the spin button’s corners.
  • Spin Button Text Color: Choose the color of the spin button text.
  • Spin Button Background Color: Select the normal background color of the spin button.
  • Spin Button Hover Color: Set the background color when hovering over the button.
• Close Button Options (Pro)
  • Show Close Button: Enable to display a close button under the wheel popup.
  • Close Button Text: Define the label for the close button (e.g., Close Now).
  • Close Button Font Size: Adjust the size of the close button text.
  • Close Button Text Color: Choose the default text color of the close button.
  • Close Button Hover Color: Select the color when hovering over the close button.

How to Configure

1. Go to WordPress Dashboard → WooCommerce → Spin Rewards → Wheel Design.
2. Adjust wheel speed, colors, fonts, and background options to match your store branding.
3. Click Save Changes to apply your design.

Your spin wheel will now display with your selected design, animations, and color scheme — creating a fun, interactive, and visually consistent experience for your customers.