Style Settings

Style settings allow you to customize the visual appearance of the wishlist functionality to match your store’s branding and design. These settings control colors, icons, and custom styling throughout the plugin.

Button Styling

Button text color

Type: Color Picker
Purpose: Sets the text color for wishlist buttons (only applies when display type is “button”)

Default Value: #ffffff (white)
Usage: Choose colors that contrast well with the button background
Accessibility: Ensure sufficient contrast ratio for readability
Examples: White (#ffffff), Dark blue (#1a365d), Black (#000000)

Button background color

Type: Color Picker
Purpose: Sets the background color for wishlist buttons (only applies when display type is “button”)

Default Value: #ff4a4a (red)
Branding: Match your store’s primary or accent colors
Psychology: Red suggests love/favorites, but any brand color works
Examples: Brand red (#ff4a4a), Pink (#e91e63), Blue (#2196f3)

Link Styling

Link color

Type: Color Picker
Purpose: Sets the color for wishlist text links (only applies when display type is “text”)

Default Value: #222 (dark gray)
Theme Integration: Should complement your theme’s link colors
Visibility: Ensure the color stands out from regular text
Examples: Theme blue (#007cba), Dark gray (#333), Brand color

Image Customization

Default image for products without image

Type: Text Field (URL)
Purpose: Specifies a custom placeholder image for products that don’t have featured images

Default: Uses plugin’s built-in placeholder image
Custom URL: Enter full image URL (https://yoursite.com/image.jpg)
Recommended Size: 200×200 pixels, square aspect ratio
Use Case: Maintain consistent branding even for products without images

Delete icon

Type: Text Field (URL)
Purpose: Custom icon for removing products from wishlist on the wishlist page

Default: Uses plugin’s built-in delete/trash icon
Recommended Size: 60×60 pixels for optimal display
Design Tip: Use consistent style with your site’s other icons
Common Icons: X mark, trash can, minus sign, remove symbol

Heart Icon Settings

Disable wishlist icon

Type: Checkbox
Purpose: Completely removes heart icons from wishlist buttons and links

Checked: No icons displayed, text/buttons only
Unchecked (Default): Heart icons shown next to text
Use Case: Minimalist design, text-only approach, or custom icon integration

Add to wishlist icon

Type: Text Field (URL)
Purpose: Custom icon shown when product is not yet in the wishlist

Default: Gray heart icon (indicating empty/available)
Design Consistency: Should visually indicate “empty” or “available to add”
Color Suggestion: Gray, outline, or muted colors work well
Size: Small icons (16-24px) work best for inline display

View wishlist icon

Type: Text Field (URL)
Purpose: Custom icon shown when product is already in the wishlist

Default: Red/filled heart icon (indicating saved/filled)
Design Consistency: Should visually indicate “saved” or “filled”
Color Suggestion: Red, solid, or bright colors show completion
Visual Pairing: Should clearly contrast with the “add” icon

Custom CSS

Type: Textarea
Purpose: Add custom CSS styles to override or enhance the plugin’s default styling

Advanced Customization: This field allows you to write custom CSS to fine-tune the appearance of wishlist elements. CSS knowledge required.

Example Usage:



.woowish_heart { width: 20px; height: 20px; }

.woowish_btn { border-radius: 10px; }

#woowish_table { font-size: 14px; }

Safety: Test changes on staging site first
Scope: Affects all wishlist elements site-wide

Style Configuration Examples

Brand-Matched Styling

Button Text: White (#ffffff)
Button Background: Brand color (e.g., #e91e63)
Link Color: Brand color (e.g., #e91e63)
Icons: Custom branded heart icons
Best for: Consistent brand experience

Subtle Integration

Button Text: Dark gray (#333)
Button Background: Light gray (#f5f5f5)
Link Color: Medium gray (#666)
Icons: Minimal outline icons
Best for: Clean, unobtrusive design

High Contrast

Button Text: White (#ffffff)
Button Background: Bright red (#ff0000)
Link Color: Bright blue (#0066cc)
Icons: Bold, solid icons
Best for: Maximum visibility and accessibility

Design Best Practices

Color Harmony

Choose colors that complement your existing theme. Use your brand’s color palette for consistency across the user experience.

Accessibility

Ensure sufficient color contrast for text readability. Test with users who have visual impairments or use accessibility tools to validate your choices.

Mobile Responsiveness

Test your styling on various screen sizes. Icons and buttons should remain usable on small screens while maintaining visual appeal on larger displays.

CSS Override Warning: Custom CSS can override theme styles and may need updates when the plugin or theme is updated. Document your customizations for future reference.