Support » Plugin: YITH WooCommerce Compare » YITH Compare button shortcode – change text for icon

  • Resolved sophie2e

    (@sophie2e)


    Happy Monday Team YITH Compare,

    Hope you are well. I need your help with the YITH Compare button shortcode. I would like to change the text “Compare” for the Font Awesome icon fa-right-left (unicode f362). I tried to follow the process that one of your team members gave me to replace the text of another button but for some reason, it is not working as expected 😅 Could you please help me figure it out so the icon is always shown?

    I shot this video to explain the issue in detail, please let me know if it is clear enough: https://share.vidyard.com/watch/n9VgGa5K1iuHYqXJahLLmz?

    Looking forward to hearing from you,
    Thank you very much for your help,
    Best regards,
    Sophie

    The page I need help with: [log in to see the link]

Viewing 10 replies - 16 through 25 (of 25 total)
  • Thread Starter sophie2e

    (@sophie2e)

    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

    Thread Starter sophie2e

    (@sophie2e)

    Hello Team YITH,

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

    Thanks for your help,
    Kind regards,
    Sophie

    Plugin Support Alessio Torrisi

    (@alessio91)

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

    Thread Starter sophie2e

    (@sophie2e)

    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

    Thread Starter sophie2e

    (@sophie2e)

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

    }

    Plugin Support Facundo Arano

    (@aranofacundo)

    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.

    Thread Starter sophie2e

    (@sophie2e)

    Hello @aranofacundo ,

    Does not work either, it changed nothing.

    what else can I try?

    Waiting for your news,
    Kind regards,
    Sophie

    Thread Starter sophie2e

    (@sophie2e)

    Any update?

    Thread Starter sophie2e

    (@sophie2e)

    Hello team YITH,

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

    Kind regards,
    Sophie

    Thread Starter sophie2e

    (@sophie2e)

    Got solution here: https://wordpress.org/support/topic/icon-elementor-yith-compare-button/#post-17164217

    • This reply was modified 4 months ago by sophie2e.
Viewing 10 replies - 16 through 25 (of 25 total)
  • You must be logged in to reply to this topic.