How To Make The Whole Product Item Card Clickable

I have a Product Card like this: As you can see there is a hyperlink named Buy at the end of card. But rather than this link, I need to make the whole card clickable with a anothe

Solution 1:

Put your whole div inside a tag.

<ahref=""><divclass="item"><divclass="card border-0 position-relative"><divclass=""><imgsrc=""class="card-img-top"alt=""></div><divclass="stars position-absolute"><formid="starRate"action=""data-id=""><labelclass="star star-5 storeRate"></label><labelclass="star star-4 storeRate"></label><labelclass="star star-3 storeRate"></label><labelclass="star star-2 storeRate"></label><labelclass="star star-1 storeRate"></label></form></div><divclass="card-body text-center"><h5class="card-title">
                    Title
                </h5><divclass="price"><p>{{ digits2persian(number_format(($newest->prd_price))) }} Dollar</p><p>{{ digits2persian(number_format(($newest->prd_sale_price))) }} Dollar</p></div><ahref=""class="btn bg-Gray-shop btn-Hover">Buy</a></div></div></a>

Solution 2:

Add link just after the card and close before buy now. that will fixed your problem.

The parsers effectively treat an start tag inside an open a element as implicitly terminating the open element before starting a new one.

So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.

<divclass="item"><divclass="card border-0 position-relative"><ahref="#"><divclass=""><imgsrc=""class="card-img-top"alt=""></div><divclass="stars position-absolute"><formid="starRate"action=""data-id=""><labelclass="star star-5 storeRate"></label><labelclass="star star-4 storeRate"></label><labelclass="star star-3 storeRate"></label><labelclass="star star-2 storeRate"></label><labelclass="star star-1 storeRate"></label></form></div><divclass="card-body text-center"><h5class="card-title">
          Title
        </h5><divclass="price"><p>{{ digits2persian(number_format(($newest->prd_price))) }} Dollar</p><p>{{ digits2persian(number_format(($newest->prd_sale_price))) }} Dollar</p></div></a><ahref=""class="btn bg-Gray-shop btn-Hover">Buy</a></div></div>