This section is related to the appearance of the Add to Wishlist button on your Product Lists.
You can do the same customizations to the Add to Wishlist button on the Product Lists page.
1. Show “add to Wishlist” in listings #
This setting determines whether or not the “Add to Wishlist” button will appear on your product listings.
2. Button position in Product Lists #
This setting allows you to choose where the “Add to Wishlist” button will be displayed on your product page. You can choose from various options, including:
- On Image – Top Left
- On Image – Top Right
- Before “Add to cart” button
- After “Add to Cart” button
- Use Shortcode
Choose the option that works best for your website’s design and layout.
3. Show “Add to Wishlist” in Gutenberg #
This option allows you to choose whether to display the “Add to wishlist” button on Gutenberg listings.
4. Button position in Gutenberg listings #
This option allows you to choose the position of the “Add to wishlist” button on Gutenberg listings.
Select 7 different button positions to view in the Gutenberg lists.
- On Image – Top Left
- On Image – Top Right
- After Title
- Before Price
- After Price
- Before “Add to Cart” Button
- After “Add to Cart” Button
5. Button type #
This option allows you to choose from three types of buttons:
- Icon only
- Text only
- Icon and text
6. Default button style #
If you want the wishlist button to automatically match your website’s theme, you can enable this option. This will ensure that the button appearance is consistent with your website without any additional customization.
7. Button icon
This option allows you to choose the icon for your “Add to wishlist” button. You can choose from a variety of options such as a heart, save, plus, gift, star, pin, or upload your own custom icon in SVG format.
- Heart Icon
- Save Icon
- Plus Icon
- Gift Icon
- Star Icon
- Pin Icon
- Your Custom Icon (.svg)
8. Icon style #
If you wish to change the style of your wishlist icon, you can personalize the icon style here. This customization includes: Font size, Color, and Hover color.
9. Button colors #
Here you can change the background and border colors of your “Add to wishlist” button. You can customize the colors to match your website’s theme.
10. Button sizes #
This option allows you to change the icon font size, button width and height, border radius, and margin to customize the appearance of your “Add to wishlist” button.
11. Button Tooltip #
By enabling this feature, a tooltip box will appear when you hover over the “Add to Wishlist” button. You can customize the tooltip style using Global Settings for Tooltip and Pop-up Global Appearance.
