[Resolved] Replace add to cart text on mobile with icon

Home Forums Support Replace add to cart text on mobile with icon

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1478076
    nik9

    Hello

    Is there a way to replace (only on mobile) the text „add to cart“ from the add to cart banner from a single product page which is shown after a user scrolls down with a icon?

    On mobile, this text takes to much space and the customer dont see the full productname. So this is why we had the idea to replace this text with a icon but ONLY on mobile. Tablet and desktop have enought space to display the content.

    Cheers

    #1478165
    David
    Staff
    Customer Support

    Hi there,

    you could do something like this:

    @media(max-width: 769px) {
        .woocommerce .inside-add-to-cart-panel button.button.alt {
            font-size: 0;
        }
    
        .woocommerce .inside-add-to-cart-panel button.button.alt:before {
            content: url('url_to_icon_image');
            font-size: 16px;
        }
    }

    Simply update the url_to_icon_image – note the image cannot be styled eg. resized when using the content property – so the original image needs to be the exact size you require.

    #1478169
    nik9

    Hi david,

    Can we use icons from font awesome? This icons should have the right size.

    Content: '\f217'; Does not work.

    Cheers

    #1478190
    nik9

    Update:

    I was able to fix it. I have also to use the css propertie: font-family: "Font Awesome 5 Free";

    Thanks 🙂

    #1478236
    David
    Staff
    Customer Support

    Glad to hear you got that resolved 🙂

    #1501681
    nik9

    Hello David,

    We just noticed that on some devices the icon is not shown. https://ibb.co/y0mdJQt

    Do I forget something here?

    @media(max-width: 769px) {
        .woocommerce .inside-add-to-cart-panel button.button.alt {
            font-size: 0;
        }
    }
    
        .woocommerce .inside-add-to-cart-panel button.button.alt:before {
            content: '\f217';
    	font-family: "Font Awesome 5 Free";
            font-size: 16px;
        }
    }
    #1501863
    Leo
    Staff
    Customer Support

    Tough to tell without seeing the site in question but looks like you might have some extra brackets in your CSS?

    Try comparing your CSS with David CSS here:
    https://generatepress.com/forums/topic/replace-add-to-cart-text-on-mobile-with-icon/#post-1478165

    #1503285
    nik9

    Hello Leo,

    The difference is taht we use a font awesome icon instead of a url content: url('url_to_icon_image');.

    Or what do you mean? 🙂

    Cheers

    #1503619
    David
    Staff
    Customer Support

    Try increasing the media query size from 769px to 828px ( or greater ) some of the newer iphones have a higher resolution.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.