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 another hyperlink. (so users won't need to click on the Buy link, they just can click wherever inside the card)
Here is the code of this Card:
<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>
So how can I made the whole card clickable without making any unwanted changes to style of cards.
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>