[Resolved] change the add to cart button to an icon when viewing it from a mobile

[WALTER]

i need help to change the style of my cart button, I want to replace it with a cart icon

current view

I would like it to look like this on the phone

and on the pc I would like it to look like this

[Tom]

Hi there,

Something like this might help: https://businessbloomer.com/woocommerce-add-icon-add-cart-buttons/

However, you’ll need to find the SVG icon, or use an icon font on the site so you can use the CSS pseudo-selector.

[David]

Hi there,

first you need to add this PHP Snippet to change the Buy Button text:

add_filter( 'woocommerce_product_add_to_cart_text', 'woocommerce_custom_product_add_to_cart_text' );  
function woocommerce_custom_product_add_to_cart_text() {
    return __( 'Compra', 'woocommerce' );
}

Then add this CSS and update the background-image URL with your cart icon:

.woocommerce ul.products li.product .button:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('url_to_my_cart_image/image.png');
    margin-right: 1ch;
}
@media (max-width: 768px) {
    .woocommerce ul.products li.product .button {
        font-size: 0;
    }
}

[Author]

Posts