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

我已经安装WooCommerce在this的网站。现在你可以看到主页上有几个产品。特色游戏部分下的产品尺寸为（100X140），当我点击它们将重定向我的产品详细信息页面。到那一点，没关系。现在在家里，所有产品的部分产品的尺寸与底部图像尺寸不同。WordPress的WooCommerce插件显示不同大小的特色产品

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

来源

2013-02-13 NewUser

我也面临同样的问题...任何帮助请:) – 2013-02-13 06:17:34

我不知道我明白，您的问题是关于如何更改图像大小，使项目可点击或管理自定义内容？它基本上归结为控制输出的主题文件，我的猜测是index.php或front-page.php – LobsterMan 2013-02-14 18:11:01

我刚看了一下这个网站，我不熟悉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>

，其中类的第一IMG“的链接样式表：

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

这只是一个猜测，但如果你发现代码围绕第一个bi t代码你应该能够弄清楚如何让它围绕另一部分代码做到这一点。

我只是看了一下基本的woo commerce插件的代码，它看起来像那个布局不是默认的，如果你使用的主题可能有助于说出那是什么，如果你发现生成代码的循环，但无法将其发布在上面。

来源

2013-02-15 14:46:41 Totoro

简而言之，图像没有锚标签。这里有您需要做什么：

目前代码

的所有产品的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-15 16:42:45 SeanWM

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

回答

相关问题