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
By enabling this option, you can show “add to wishlist” button in your WooCommerce products’ listings
2. Button position in Product Lists
You can also set different positions for your wishlist button on product lists on your store page.
- On Image – Top Left
- On Image – Top Right
- Before “Add to cart” button
- After “Add to Cart” button
- Use Shortcode
If you don’t want to show the wishlist button on your product lists, you can disable the “Show add to wishlist in listings” option.
3. Show “Add to Wishlist” in Gutenberg
Enable this option if you want to feature this button in Gutenberg Listings.
4. Button position in Gutenberg listings
The Add to wishlist button will be displayed in all Gutenberg lists by activating this option.
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
Here you can choose from the three types of buttons below:
- Icon only
- Text only
- Icon and text
6. Default button style
Enable this feature if you want the button appearance to match your theme automatically.
7. Button icon
You can choose your button icon in 3 options :
- Heart Icon
- Save Icon
- Your Custom Icon (.svg)
8. Icon style
If you wish to change the style of your wishlist icon in Listings, you can personalize your wishlist icon here.
9. Button color
Here you can change button colors as you wish. Options are for Background Colors and Border Colors.
10. Button sizes
You can change the icon font size and button line height using these options here.
11. Button Tooltip
Using this feature, a tooltip box will appear when you hover on “Add to Wishlist” button.
You can also customize this tooltip style.
