The Porto Product Wishlist element allows you to display a wishlist button on your single product page. This element integrates directly with the YITH WooCommerce Wishlist plugin, and it will only appear if the plugin is installed and activated.
With full control over typography, icon styles, colors, spacing, and hover effects, the Wishlist element allows you to match your design while offering customers an easy way to save their favorite products.
Note: To use the Porto Product Wishlist, you must install Yith WooCommerce Wishlist plugin first.
How to Use the Porto Product Wishlist Element
-
Confirm YITH Wishlist Installation
- Install and activate the YITH WooCommerce Wishlist plugin.
- The Porto Wishlist element will not render without it.
-
Open Your Single Product Template
- Go to Porto > Template Builder > Single Product.
- Open your template in Elementor or WPBakery Page Builder.
-
Insert the Wishlist Element
- Drag and drop Product Wishlist from the Porto elements panel into your layout.
- Place it near the Add to Cart button or anywhere inside your product details section.
-
Customize Appearance
- Use the element options to modify label, icon, spacing, background colors, and hover effects.
-
Customize Appearance
Save and Test
- Save the template and preview your product page.
- Test adding and removing a product from the wishlist to ensure the styles apply correctly.
Element Content Options
| Option | Description |
|---|---|
| Show Label | Enable or disable the text label next to the wishlist icon. |
| Icon Size | Set the size of the wishlist (heart) icon. |
| Label Typography | Customize the label’s font family, size, weight, line height, and more. |
| Spacing | Controls the space between the icon and the label. |
| Icon Color | Sets the default icon color before it is added to the wishlist. |
| Added Color | Sets the icon color after the product has been added to the wishlist. |
| Label Color | Sets the default color for the text label. |
| Label Hover Color | Changes the label color when hovering. |
| Background Height | Controls the height of the background area behind the wishlist button. |
| Background Color | Sets the default background color of the wishlist container. |
| Background Hover Color | Sets the background color on hover. |
| Padding Options | Adjusts inner spacing around the icon and label for balanced layout and click comfort. |
Additional Tips
- Match the Add to Cart Style: For consistent UX, align the wishlist button style with your Add to Cart button.
- Use Hover Colors Wisely: Hover effects help indicate clickability; choose contrasting but brand-friendly colors.
- Mobile Optimization: Increase padding slightly for mobile so the wishlist icon is easy to tap.
- Check “Added” State: Ensure the Added Color clearly signals that the item is already saved.
- Place Strategically: Most stores position wishlist near the Add to Cart button for better conversion.
- You can edit Add To Wishlist widget's text's and other settings in Dashboard > Yith > Wishlist > Settings page.
