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

Home Forums Support change the add to cart button to an icon when viewing it from a mobile

  • This topic has 2 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1227769
    WALTER

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

    current view
    null

    I would like it to look like this on the phone
    expectation

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

    in pc

    #1227890
    Tom
    Lead Developer
    Lead Developer

    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.

    #1227893
    David
    Staff
    Customer Support

    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;
        }
    }
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.