WordPress WooCommerce 插件显示不同尺寸的特色产品答案

【问题标题】：WordPress WooCommerce plugin show featured product with a different sizeWordPress WooCommerce 插件显示不同尺寸的特色产品
【发布时间】：2013-02-13 06:16:38
【问题描述】：

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

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

【问题讨论】：

我也面临同样的问题...任何帮助请:)
我不确定我是否理解，您的问题是关于如何更改图像大小、使项目可点击或管理自定义内容？它基本上归结为控制输出的主题文件，我的猜测是 index.php 或 front-page.php

标签： php wordpress woocommerce

【解决方案1】：

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

当前代码

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

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

【讨论】：

【解决方案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>

样式表中链接“first-img”类的位置：

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

这只是一个猜测，但是如果您找到将 a 标签包裹在第一段代码周围的代码，您应该能够弄清楚如何让它围绕另一段代码执行此操作。

我刚刚查看了基本 woo 商务插件的代码，看起来默认情况下该布局不存在，如果您使用的是主题，如果您发现生成代码但无法解决的循环将其发布在上面。

【讨论】：