Geek Answers Handbook

WordPress WooCommerce plugin shows a product with different sizes

I installed WooCommerce on this site. Now you can see that there are several products on the home page. Products under the heading "Games" have a size of (100X140), and when I click on them to redirect me a page with product information. At this point, it’s wonderful. Now in the house there are some products under the section "All products", the size of which differs from the lower image size.

Now I want the top section (All products) to be completely clickable so that when I click on the image it will be redirected to the corresponding product information page in the same way as the lower recognized product. I also want the partition to be fully managed by the administrator. So can someone kindly tell me how to do this? Any help and suggestions will be really noticeable. Thanks...

+4
source share
2 answers

Simply put, there is no anchor mark for the image. Here is what you need to do:

Current code

The HTML code for All Products looks like this:

<div class="best-seller-wrap"> <div class="second-img"> <div class="disount-text"> 30% OFF </div> <div class="price-text-wrap"> <h3>$34.99</h3> <p> <a href="http://modulesoft.info/projects/gamesite/?product=dishonered">Buy Now..</a> </p> </div> </div> </div>

And CSS is like this:

 #main .best-seller-wrap .second-img { background-image: url('images/best-seller-images/img-2.png'); position: relative; }

New code

All HTML Products:

 <div class="best-seller-wrap"> <div style="position: relative"> <a class="second-img" href="http://modulesoft.info/projects/gamesite/?product=dishonered"></a> <div class="disount-text"> 30% OFF </div> <div class="price-text-wrap"> <h3>$34.99</h3> <p> <a href="http://modulesoft.info/projects/gamesite/?product=dishonered">Buy Now..</a> </p> </div> </div> </div>

CSS

 #main .best-seller-wrap .second-img { background-image: url('images/best-seller-images/img-2.png'); position: relative; display: block; }

You will notice that I am applying your .second-img class to the anchor tag and adding display: block to the class:

 <a class="second-img" href="http://modulesoft.info/projects/gamesite/?product=dishonered"></a>

Also note that I am adding position: relative to the surrounding div

 <div style="position: relative">

Your image should now work as a link.

+3
source

I just looked at the site and I am not familiar with woo commerce, but the design of the two sections is completely different. Reference in the offered products:

 <a href="http://modulesoft.biz/projects/gamesite/?product=demo-product"> <span class="onsale">Sale!</span> <img width="100" height="140" src="http://modulesoft.biz/projects/gamesite/wp-content/uploads/2013/01/hitman-absolution-275x275-imadfwj4t6zqb3ja-100x140.jpeg" class="attachment-shop_catalog wp-post-image" alt="hitman-absolution-275x275-imadfwj4t6zqb3ja"> <h3>demo product</h3> <span class="price"><span class="strike-through"><span class="striked-text"> <span class="amount">23€</span></span></span> <ins><span class="amount">21€</span></ins></span> </a>

So the whole section is in the tag,

In another section:

 <div class="first-img"> <div class="disount-text">20% OFF</div> <div class="price-text-wrap"> <h3>$31.99</h3> <p><a href="http://modulesoft.info/projects/gamesite/?product=lorem-ipsum-game">Buy Now..</a></p></div> </div>

where class 'first-img' is linked in the stylesheet:

 #main .best-seller-wrap .first-img { background-image: url('images/best-seller-images/img-1.png'); position: relative; }

This is just an assumption, but if you find code that wraps a tag around the first bit of code, you must figure out how to get it to do it around another bit of code.

I just looked at the code of the main woo commerce plugin, and it looks like this layout is missing by default, if you use a theme, it can help say what it is if you find a loop that generates the code but cannot process it by posting it above.

+1
source

More articles:


All Articles