Add to Cart Link

Hello!

I am using html and custom css to create a product grid layout, mostly taken from here (demo #2).

Each product includes an add to cart button, but I can't figure how to trigger the action to actually add the item to the cart. My code currently just redirects the user to the cart without adding the item. I've pasted the HTML and CSS code below. The red text portion seems to be where I need to make edits, but I haven't been able to get it to work. (The alphanumeric ID is the Product ID generated by Squarespace.) I've also tried to include "&quantity=1" to the href, but same result.

Any thoughts would be tremendously appreciated.

Cheers!

---

HTML 

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="product-grid2">
                <div class="product-image2">
                    <a href="neuroscience/adrecor-with-same-neuroscience">
                        <img class="pic-1" src="https://static1.squarespace.com/static/5f13531f921aa12e07284a88/5f14b6502a4010553e97e5f4/5f14d99e2a4010553e9c86a6/1595202048889/AdreCor+with+SAMe+-+1+-+thumbsize.png">
                        <img class="pic-2" src="https://static1.squarespace.com/static/5f13531f921aa12e07284a88/5f14b6502a4010553e97e5f4/5f14d9ae40592a3871b2d00b/1595202048189/AdreCor+with+SAMe+-+2+-+thumbsize.png">
                    </a>
                    <a class="add-to-cart" href="cart/add?id=5f14bb65534d5b34f27ddb2d">Add to cart</a>
                </div>
                <div class="product-content">
                    <h3 class="title"><a href="neuroscience/adrecor-with-same-neuroscience">AdreCor with SAMe (NeuroScience)</a></h3>
                    <span class="price">$67.00</span>
                </div>
            </div>
        </div>
    </div>
</div>
<hr>

CSS

.demo{padding:45px 0}
.product-grid2{font-family:'Open Sans',sans-serif;position:relative}
.product-grid2 .product-image2{overflow:hidden;position:relative}
.product-grid2 .product-image2 a{display:block}
.product-grid2 .product-image2 img{width:100%;height:auto;transform:scale(1.5)}
.product-image2 .pic-1{opacity:1;transition:all .5s}
.product-grid2:hover .product-image2 .pic-1{opacity:0}
.product-image2 .pic-2{width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;transition:all .5s}
.product-grid2:hover .product-image2 .pic-2{opacity:1}
.product-grid2 .social{padding:0;margin:0;position:absolute;bottom:50px;right:25px;z-index:1}
.product-grid2 .social li{margin:0 0 10px;display:block;transform:translateX(100px);transition:all .5s}
.product-grid2:hover .social li{transform:translateX(0)}
.product-grid2:hover .social li:nth-child(2){transition-delay:.15s}
.product-grid2:hover .social li:nth-child(3){transition-delay:.25s}
.product-grid2 .social li a{color:#505050;background-color:#fff;font-size:17px;line-height:45px;text-align:center;height:45px;width:45px;border-radius:50%;display:block;transition:all .3s ease 0s}
.product-grid2 .social li a:hover{color:#fff;background-color:#3498db;box-shadow:0 0 10px rgba(0,0,0,.5)}
.product-grid2 .social li a:after,.product-grid2 .social li a:before{content:attr(data-tip);color:#fff;background-color:#000;font-size:12px;line-height:22px;border-radius:3px;padding:0 5px;white-space:nowrap;opacity:0;transform:translateX(-50%);position:absolute;left:50%;top:-30px}
.product-grid2 .social li a:after{content:'';height:15px;width:15px;border-radius:0;transform:translateX(-50%) rotate(45deg);top:-22px;z-index:-1}
.product-grid2 .social li a:hover:after,.product-grid2 .social li a:hover:before{opacity:1}
.product-grid2 .add-to-cart{color:#fff;background-color:#404040;font-size:15px;text-align:center;width:100%;padding:10px 0;display:block;position:absolute;left:0;bottom:-100%;transition:all .3s}
.product-grid2 .add-to-cart:hover{background-color:#3498db;text-decoration:none}
.product-grid2:hover .add-to-cart{bottom:0}
.product-grid2 .product-new-label{background-color:#3498db;color:#fff;font-size:17px;padding:5px 10px;position:absolute;right:0;top:0;transition:all .3s}
.product-grid2:hover .product-new-label{opacity:0}
.product-grid2 .product-content{padding:20px 10px;text-align:center}
.product-grid2 .title{font-size:17px;margin:0 0 7px}
.product-grid2 .title a{color:#303030}
.product-grid2 .title a:hover{color:#3498db}
.product-grid2 .price{color:#303030;font-size:15px}
@media screen and (max-width:990px){.product-grid2{margin-bottom:30px}
}