1. Home
  2. Docs
  3. MC Wishlist Doc
  4. Wishlist Button
  5. Product Lists

Product Lists

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.

Was this article helpful to you? Yes No

How can we help?