YITH Compare button shortcode – change text for icon

Hello Team YITH,

Hope you are well. I updated your plugin on my staging website but still have the issue. Would you have an update for me?

Waiting for your news,
Thanks a lot for your help,
Kind regards,
Sophie

Hello Team YITH,

Hope you are well. Do you have any update please?

Thanks for your help,
Kind regards,
Sophie

Hi there,

please add following CSS code in the site.

.custom-product-card a.compare.button:before {
content: "\f362";
font-family: 'Font Awesome 5 Free';
}

Hello Alessio, it is already in the rules you gave previously so it is already on the website:

.custom-product-card a.compare.button:before {
content: “\f362”;
font-family: ‘Font Awesome 5 Free’;
font-weight: 600;
display: inherit;
color: #fff;
opacity: 1;
z-index: 99;
filter: none;
top: 50%;
position:initial;
}

I am still stuck with the issue that we don’t see the icons at all anymore, but the button is the right size:?https://ibb.co/4Fv69Ps

Here is again the recap of the code so far:
On the button in Elementor editor in Custom CSS settings:

/* Style Colors Compare CTA */
.custom-product-card a.compare.button {
border-color: #8FD297;
background-color: #8FD297;
}
.custom-product-card a.compare.button:hover{
background-color: white;
border-color: #57B462;
}
.custom-product-card a.compare.button:hover:before {
color:#57B462;
}

In the Child Theme CSS:



/*  Style button / .custom-product-card a.compare.button { border: solid; border-width: 1px; border-radius: 50px; min-height: 28px; min-width: 28px; padding: 3px 0px 0px 1px; color: transparent; } / SWHALES PRODUCT LOOP - Square List Product Archive - Hide text "Added" for Compare CTA once product added to wishlist */
.custom-product-card a.compare.button.added:before {
display:none;
}
.custom-product-card a.compare.button.added:after {
color:white;
margin-left: 0;
}

/* Show Icon for Compare CTA */
.custom-product-card a.compare.button:before {
content: “\f362”;
font-family: ‘Font Awesome 5 Free’;
font-weight: 600;
display: inherit;
color: #fff;
opacity: 1;
z-index: 99;
filter: none;
top: 50%;
position:initial;
}

Do you understand what is wrong, why we don’t see the icon?

Thanks for your help,
Waiting for your news,
Kind regards,
Sophie

And I forgot but we also have this function in theme.php:

if( !function_exists(‘yith_woocompare_return_empty_string_on_shop’) ) {
function yith_woocompare_return_empty_string_on_shop($text)
{
if (is_shop()) {
$text = ”;
}
return $text;
}

add_filter('yith_woocompare_compare_added_label', 'yith_woocompare_return_empty_string_on_shop');

}

Hi there,

Please, try adding the following CSS code to force showing the icon in the button:

.custom-product-card a.compare.button::before {
  content: "\f362" !important;
  font-family: "Font Awesome 5 Free" !important;
}

Let us know if this helped you.

Hello @aranofacundo ,

Does not work either, it changed nothing.

what else can I try?

Waiting for your news,
Kind regards,
Sophie

Any update?

Hello team YITH,

Hope you’re well. Could I have an update please ? Waiting for your news.

Kind regards,
Sophie

Got solution here: https://www.ads-software.com/support/topic/icon-elementor-yith-compare-button/#post-17164217

• This reply was modified 1 year ago by sophie2e.