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.

<a href="">
  <div class="item">
    <div class="card border-0 position-relative">
            <div class="">
                <img src="" class="card-img-top" alt="">
            </div>
            <div class="stars position-absolute">
                <form id="starRate" action="" data-id="">
                    <label class="star star-5 storeRate"></label>
                    <label class="star star-4 storeRate"></label>
                    <label class="star star-3 storeRate"></label>
                    <label class="star star-2 storeRate"></label>
                    <label class="star star-1 storeRate"></label>
                </form>
            </div>
            <div class="card-body text-center">
                <h5 class="card-title">
                    Title
                </h5>
                <div class="price">
                <p>{{ digits2persian(number_format(($newest->prd_price))) }} Dollar</p>
                <p>{{ digits2persian(number_format(($newest->prd_sale_price))) }} Dollar</p>
            </div>
            <a href="" 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.

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