php - WordPress WooCommerce 插件显示不同尺寸的特色产品

Question

我已经安装了WooCommerce在 this地点。现在您可以看到主页上有几个产品。特色游戏部分下的产品尺寸为 (100X140)，当我单击它们时，将重定向到产品详细信息页面。到那一点就好了。现在在首页的“所有产品”部分下有一些产品的尺寸与底部图像尺寸不同。

现在我想让顶部部分(所有产品)完全可点击，这样当点击图片时它会重定向到相应的产品详细信息页面，就像底部的特色产品一样。我还希望管理员可以完全管理该部分。那么有人可以告诉我该怎么做吗？任何帮助和建议都将非常感激。谢谢...

Answer 1

简单地说，图像没有 anchor 标记。这是您需要做的:

当前代码

所有产品 HTML 代码如下所示:

<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>

CSS 是这样的:

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

新代码

所有产品 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;
}

您会注意到我将您的 .second-img 类应用到 anchor 标记并将 display: block 添加到该类:

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

另请注意，我将 position: relative 添加到周围的 div

<div style="position: relative">

您的整个图像现在应该作为一个链接。