WordPress WooCommerce插件展示了不同大小的特色产品

Question

我在这个网站上安装了WooCommerce 。 现在您可以看到主页中有几个产品。 游戏部分下的产品尺寸为（100X140），当我点击它们时，它会重定向产品详细信息页面。 到那时，没关系。 现在在家中有一些产品在所有产品部分下面，其尺寸与底部图像尺寸不同。

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

Answer 1

简而言之，图像没有锚标记。 这是你需要做的：

现行守则

所有产品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类应用于锚标记并向该类添加display: block ：

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

还要注意我正在添加position: relative对于周围的div

<div style="position: relative">

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

Answer 2

我只是看了一下网站，我不熟悉woo commerce，但这两个部分的设计完全不同。 特色产品中的链接是：

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

所以整个部分都是一个标签，

另一部分有：

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

其中class'first-img'在样式表中链接：

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

这只是一个猜测，但是如果你找到包围第一位代码的标签的代码，你应该能够弄清楚如何让它围绕其他代码执行。

我刚看了一下基本的woo commerce插件的代码，看起来默认情况下布局不存在，如果你使用的是一个主题，它可能有助于说明那个是什么，如果你找到了生成的循环代码，但不能在上面发布它。