WordPress WooCommerce插件展示了不同尺寸的特色产品 - WordPress WooCommerce plugin show featured product with a different size

我已经在这个网站上安装了WooCommerce。现在你可以在主页上看到一些产品。游戏部分下的产品尺寸为（100X140），当我点击它们时，会重定向到产品详细信息页面。就这一点而言，一切都很好。现在在家里的"所有产品"部分下有一些产品，它们的尺寸与底部图像的尺寸不同。

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

简单地说，图像没有锚标记。以下是您需要做的：

当前代码

所有产品的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">

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

我刚看了一下网站，对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>

在样式表中链接类"first-img"的位置：

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

这只是一个猜测，但如果你找到了将a标记包裹在第一段代码周围的代码，你应该能够弄清楚如何让它包裹在另一段代码周围。

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