Setting a custom add to wishlist button

Note: This section only applies to the full version of the plugin.

The plugin allows you to use a standard button element or a heart icon as the add to wishlist button for your store. Alternatively you can create an entirely customized button using your own custom html. This allows you to use exactly the kind of button you want rather than restricting you to a pre-defined set of buttons for your store.

To create a completely customized add to wishlist button all you need to do is add the html code for the button to the custom html textarea of the display type plugin setting as seen in the screenshot above. Make sure the custom html textarea is selected (shown by the blue background and border around it), then save your settings and you are done.

Requirement

The only requirement to using a custom html element as the add to wishlist button is that you add the class nmgr-add-to-wishlist-button to it. Without this the button cannot be used to add products to the wishlist.

Options

To optionally show the default icon animation on your custom button when products are added to the wishlist, add the class nmgr-animate to the button element.

Examples

Let’s say you simply want to change the add to wishlist button text to ‘add me’ and you don’t want to do this via the plugin filter nmgr_add_to_wishlist_button_text, simply use the code below:

<button class="nmgr-add-to-wishlist-button">Add me</button>

You want your custom button to show the icon animation when a product is added to the wishlist:

<button class="nmgr-add-to-wishlist-button nmgr-animate">Add me</button>

You want to use a anchor element as the add to wishlist button:

<a href="#" class="nmgr-add-to-wishlist-button">Add me</a>

You want to use an image called button.jpg as the add to wishlist button and the url of this image is https://example.com/img/button.jpg and you want to show the default icon animation on the image when a product is added to the wishlist:

<img src="https://example.com/img/button.jpg" class="nmgr-add-to-wishlist-button nmgr-animate">