4

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

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

4

2 回答 2

3

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

当前代码

All Products 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">

您的整个图像现在应该可以用作链接。

于 2013-02-15T16:42:45.470 回答
1

我只是看了一下网站，我对 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€&lt;/span></span></span> <ins><span class="amount">21€&lt;/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 商务插件的代码，看起来默认情况下该布局不存在，如果您使用的是主题，如果您找到生成的循环，可能有助于说明它是什么代码但无法将其发布在上面。

于 2013-02-15T14:46:41.150 回答