MoreConvert Documentation

How to Customize Wishlist Icon with Your Custom Icon Design?

If you want to replace the default Wishlist heart icon with your custom wishlist icon to better match your theme, this guide will help you achieve it.

 

Customize Wishlist Icon with Your Custom Icon #

Step 1: Override Wishlist Templates #

To replace the default icon, you may need to override the plugin’s template files. For a detailed guide on how to override templates in your child theme, please refer to our How to Customize Plugin Files Safely Using a WordPress Child Theme?. This guide explains how to safely locate, copy, and edit the necessary files.

 

Step 2: Use Filters to Customize the Icon #

If you prefer not to edit the template files directly or need a quicker solution, you can use the following filters to change the icons:

  • wlfmc_icon_html: For the state when the product is not in the wishlist.
  • wlfmc_added_icon_html: For the state when the product is already in the wishlist.

Here’s an example code snippet:

add_filter( 'wlfmc_icon_html', 'wlfmc_custom_icon_html', 10 , 2 );
function wlfmc_custom_icon_html( $icon_html, $atts ) {
return '<i class="fas fa-heart"></i>';
}
add_filter( 'wlfmc_added_icon_html', 'wlfmc_custom_added_icon_html', 10 , 2 );
function wlfmc_custom_added_icon_html( $icon_html, $atts ) {
return '<i class="fas fa-heart-o"></i>';
}

 

 

Step 3: Add Accessibility Titles to Buttons #

For better accessibility, you can add descriptive title attributes to your wishlist buttons. To do this, either customize the template files or include the titles directly in your custom icon HTML.

By following these steps, you can easily integrate your custom heart icon into the Wishlist while ensuring compatibility with your theme and improving accessibility.

 

What are your feelings?
Updated on December 24, 2024

How to Customize Wishlist Icon with Your Custom Icon Design?

If you want to replace the default Wishlist heart icon with your custom wishlist icon to better match your theme, this guide will help you achieve it.

 

Customize Wishlist Icon with Your Custom Icon #

Step 1: Override Wishlist Templates #

To replace the default icon, you may need to override the plugin’s template files. For a detailed guide on how to override templates in your child theme, please refer to our How to Customize Plugin Files Safely Using a WordPress Child Theme?. This guide explains how to safely locate, copy, and edit the necessary files.

 

Step 2: Use Filters to Customize the Icon #

If you prefer not to edit the template files directly or need a quicker solution, you can use the following filters to change the icons:

  • wlfmc_icon_html: For the state when the product is not in the wishlist.
  • wlfmc_added_icon_html: For the state when the product is already in the wishlist.

Here’s an example code snippet:

add_filter( 'wlfmc_icon_html', 'wlfmc_custom_icon_html', 10 , 2 );
function wlfmc_custom_icon_html( $icon_html, $atts ) {
return '<i class="fas fa-heart"></i>';
}
add_filter( 'wlfmc_added_icon_html', 'wlfmc_custom_added_icon_html', 10 , 2 );
function wlfmc_custom_added_icon_html( $icon_html, $atts ) {
return '<i class="fas fa-heart-o"></i>';
}

 

 

Step 3: Add Accessibility Titles to Buttons #

For better accessibility, you can add descriptive title attributes to your wishlist buttons. To do this, either customize the template files or include the titles directly in your custom icon HTML.

By following these steps, you can easily integrate your custom heart icon into the Wishlist while ensuring compatibility with your theme and improving accessibility.

 

What are your feelings?
Updated on December 24, 2024