CODEWITHSUNDEEP
phpwordpresswoocommerce
NewUser
NewUser

Reputation: 13333

WordPress WooCommerce plugin show featured product with a different size

I have installed WooCommerce in this site. Now you can see there are couple of products in the home page. The products under the section featured Games are size in (100X140) and when I will click them that will redirect me the product details page. To that point it's fine. Now in the home there are some products under section All Products which are of different in size from the bottom image size.

Now I want the top section (All Products) to be made fully clickable so that when the image is clicked it will redirect to the corresponding product details page just like the bottom featured product. I also want the section to be fully manageable from the admin. So can someone kindly tell me how to do this? Any help and suggestions will be really appreciable. Thanks...

Upvotes: 4

Views: 4186

Answers (2)

SeanWM
SeanWM

Reputation: 16989

Simply put, there's no anchor tag for the image. Here's what you need to do:

Current Code

The All Products HTML code 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 the CSS like this:

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

New Code

All products HTML:

<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'll notice that I'm applying your .second-img class to an anchor tag and adding display: block to the class:

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

Also notice that I'm adding position: relative to the surrounding div

<div style="position: relative">

Your entire image should now work as a link.

Upvotes: 3

Totoro
Totoro

Reputation: 1294

I just had a look at the site and I am not familiar with woo commerce but The design of the two sections are completely different. The link in featured products is:

<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 an a tag,

The other section has:

<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 style sheet:

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

This is just a guess but if you find the code that wraps the a tag around the first bit of code you should be able to figure out how to get it to do that around the other bit of code.

I just had a look at the code for the basic woo commerce plugin and it looks like that layout is not there by default, if you are using a theme it might help to say what that is as well, if you find the loop that generates the code but cant work it out post it above.

Upvotes: 1

Related Questions