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插件顯示不同大小的特色產品

回答

相關問題