[Support request] how to make add to cart button display on desktop

Home Forums Support [Support request] how to make add to cart button display on desktop

Home Forums Support how to make add to cart button display on desktop

  • This topic has 3 replies, 2 voices, and was last updated 1 month ago by Fernando.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2278725
    Nicholas

    how to make “add to cart” buttons display on desktop permanently like in the mobile version, please see video in private info section

    thanks

    #2278881
    Fernando
    Customer Support

    Hi Nicholas,

    In Appearance > Customize > Additional CSS, you’ll find this code:

    /* Transform add to cart and pricing on hover */
    @media (min-width: 769px) {
    	.woocommerce ul.products li.product a.button {
    		transform: translateY(0);
    		width: 100%;
    		opacity: 0;
    		transition: all 0.4s;
    	}
    
    	.woocommerce ul.products li.product:hover a.button,
    	.woocommerce ul.products li.product:hover .price {
    		transform: translateY(calc(-100% - 10px));
    		opacity: 1;
    	}
    
    	.woocommerce ul.products li.product .price {
    		opacity: 1;
    		transition: all 0.4s;
    	}
    
    	.woocommerce ul.products li.product:hover .price {
    		opacity: 0;
    		transform: translateY(calc(-100% - 10px));
    	}
    }

    If you remove this code, the Add to cart button should appear “permanently” on desktop and tablet as it does in mobile.

    Hope this clarifies!

    #2279387
    Nicholas

    thanks a mill!

    #2279972
    Fernando
    Customer Support

    You’re welcome Nicholas!

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