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

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nik9]

Hi david,

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

Content: '\f217'; Does not work.

Cheers

[nik9]

Update:

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

Thanks 🙂

[David]

Glad to hear you got that resolved 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts