YITH Compare button shortcode – change text for icon

Hi there,

i saw the video but i can’t read the code well, could you write it here what did you do to replace the text with the icon?

Tks

Happy Friday Giuseppe,

Thanks for your reply. Sure here is the code added for this matter, which also style the button:

.custom-product-card a.compare.button {

? ? border: solid;

? ? border-width: 1px;

? ? border-radius: 50px;

? ? padding: 0 5px 0 5px;

? ? font-size:0;

    min-height: 28px;

? ? min-width: 28px;

? ? display: inline-flex;

? ? justify-content: center;

? ? align-items: center;

? ? line-height: 0;

}

/* SWHALES PRODUCT LOOP - Square List Product Archive - Show Icon for Compare CTA */

.custom-product-card a.compare.button:before {

? ? content: "\f362";

? ? font-size: 15px;

? ? font-family: 'Font Awesome 5 Free';

? ? font-weight: 900;

}
Hopefully, you can find the bottleneck :-)

I was also wondering is there a way to use an elementor button and simply add a custom class to the button which will give it the compare functionalities?

Looking forward to hearing from you,
Thanks a lot for your help,
Kind regards,
Sophie

Hello @askmagic,

Hope you are well. Would you have an update for me, please?

Waiting for your news,
Kind regards,
Sophie

Hi there,

I’m sorry for this late reply.

Please replace your CSS code with the following one and check again:

.custom-product-card a.compare.button {
border: solid;
border-width: 1px;
border-radius: 50px;
min-height: 28px;
min-width: 28px;
display: inline-block;
color: transparent;
}

/* SWHALES PRODUCT LOOP - Square List Product Archive - Show Icon for Compare CTA */

.custom-product-card a.compare.button:hover:before{
background: white;
color: #57B462;
border-color: #57B462;
}

.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;
left: 6px;
}

Hello @alessio91  Alessio Torrisi,

Thanks for your reply and investigation.

So I tried to add your code in the staging website, but I had issue with the colors, however I could find the problem so now the colors work well with the code you can see below. 

However regarding the issue on showing the icon, now I do see it directly, so this is great thank you, however:
1. the button has left and right margin/padding 
2. the icon is not inline in the middle of the button but at the bottom
3. When we hover the button, we see the "compare" text and the icon disappears.

Please review this video to see the issue in details: https://share.vidyard.com/watch/c6abqzEzkWs8kZ2n7G1ehq?

So for now I have: 

/* Square List Product Archive - Hide Text for Compare CTA + Style button */
.custom-product-card a.compare.button {
border: solid;
border-width: 1px;
border-radius: 50px;
min-height: 28px;
min-width: 28px;
display: inline-block;
color: transparent;
}

/* Square List Product Archive - 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;
left: 6px;
}

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

Could you please help me out again on the 3 points I mentioned above?

Thank you so much for your help and support,
Waiting for your news,
Kind regards,
Sophie

• This reply was modified 1 year, 6 months ago by sophie2e.

Hi there,

using this code the button is shown fine by my side.

.custom-product-card a.compare.button {border: solid;border-width: 1px;border-radius: 50px;min-height: 28px;min-width: 28px;color: transparent;}

/* SWHALES PRODUCT LOOP - Square List Product Archive - Show Icon for Compare CTA */

.custom-product-card a.compare.button:hover:before{
background: white;
color: #57B462;
border-color: #57B462;
}

.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;left: 6px;top: 50%;}

Hello Allessio,

Thank you very much for your help, we are almost there ?? For the colors, I kept my previous code as the new code was not working as expected, so it is fine for that.

And for the rest, indeed now the icon is centred but I still see the “compare” text which also make the button wider than what excepted: https://share.vidyard.com/watch/v7mTsaAdSt1HDjm2PDxDKQ?

Could you please help me hide this text?

Thanks a lot for your help,
Kind regards,
Sophie

Hello there,

I hope you’re doing well :D.

Please, replace the attached file in the following path:

wp-content/plugins/yith-woocommerce-compare/includes/

In this way you can add a new parameter in the shortcode that allow you to override the button text. You can add an empty space in order to not show the compare text on a specific shortocde.

You need to override the shortcode and add the following:

[yith_compare_button button_text=’ ‘]

In this way, you will not see the “compare” and only show the icon with the CSS rule provided by my colleague Alessio.

Please, try it and let me know.

Have a good day.

Happy Tuesday @crodriguez1991,

Thank you very much for your precious help. I followed your steps and tweaked a bit the padding with CSS so now it looks great when no action has been made on the button, but:

1. when we hover the button, the icon does not seems to be shown, not sure if it is because of the color, we want the green color on it so we can see it when the button is hovered: https://ibb.co/CQkvkX8
Could you please tell me how to change the color of the icon in this situation?

2. when we click on the button, and add the item to the compare list. Then, we do see the tick icon which is great but we also see the text “added”: https://ibb.co/r6H1ZtH
Could you help me out to hide the “added” text, while keeping the tick icon?

Thanks a million time for your help, support and time,
I really appreciate it,
Waiting for your news,
Regards,
Sophie

Hello there,

I hope you’re doing well :D.

Try to add the following CSS rule on Appearance > Customize > Additional CSS

.custom-product-card a.compare.button:hover:before {
color:#8FD297;
}

About the added label, you can try to use the following code in the functions.php of your active theme:

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');
}

Please, try it and let me know.

Have a good day.

Hello @crodriguez1991,

Hope you are doing well too ??

So we are very close ?? All good for the colour now ??

The last thing is that indeed I do not see the text anymore, but I do not see the tick icon either anymore (like we did previously: https://ibb.co/r6H1ZtH ), It’s been replaced by the “add to compare list” icon and there is an empty space on the right making the button not round anymore: https://ibb.co/2hzx5rn .

Can you help me hide the add to list icon so we see the tick icon (added to list icon)?

Thank you very much for your help,
Have a very good day,
Kind regards,
Sophie

Hello there,

I hope you’re doing well :D.

Try with the following CSS rule

a.compare.button.added:before {
  display:none;
}
a.compare.button.added:after {
    color:white;
}
a.compare.button.added {
    padding: 5px 4px 0px 0px;
}

Please, try it and let me know.

Have a good day.

Hello @crodriguez1991,

I am good, thank you ?? How are you today?

I finish to report all the bugs with Elementor so I could updates all plugins and theme on the staging website and switch back to my theme. But for some reason, I have quite some bugs still with this YITH compare shortcode :/ I am really sorry about that, I still need your help :/

Here are the issues:
1. Initially, the icon is not well centered: https://ibb.co/9yN4z0C
but if I inspect the code, again it is: https://ibb.co/sFRQt1F

2. Once the product is added: indeed I do not see the text and the size is good, but I do not see the icon either that the code is inspected or not:
https://ibb.co/6ZnswHp
https://ibb.co/9yN4z0C

Could you please help me out again?

Below is a recap of all the code added/modifications added so far:

Is is the code we added so far:

1. On the theme – Custom CSS – Appearance > Customize > Additional CS:
/* Hide Text for Compare CTA + 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;
}
/* 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%;
}

2. In the widget in loop item, we use the shortcode [yith_compare_button button_text=’ ‘] and on the widget > Settings > Custom CSS >

/* 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;
}

3. Then we also replaced the code in wp-content/plugins/yith-woocommerce-compare/includes/ with the one you gave.

4. We also added custom code in the 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’);
}

Thanks a million time for your precious help,
Kind regards,
Sophie

Please, remove this section of CSS rule

.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%;
}

and add the following CSS rule

.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;
}

Please, try it and let me know.

Have a good day.

Happy Monday @crodriguez1991 , hope you are doing great ??

So I replaced the code but now I am back with the issue that we don’t see the icons at all anymore, but the button is the right size: https://ibb.co/4Fv69Ps

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