php – WordPress WooCommerce插件展示了不同大小的特色产品

发布时间：2020-12-13 17:15:21 所属栏目：PHP教程来源：网络整理

导读：我在 this站点安装了 WooCommerce.现在您可以看到主页中有几个产品.游戏部分下的产品尺寸为(100X140),当我点击它们时,它会重定向产品详细信息页面.到那时,没关系.现在在家中有一些产品在所有产品部分下面,其尺寸与底部图像尺寸不同. 现在我希望顶部(所有产品

我在 this站点安装了 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>

还要注意我正在添加位置：相对于周围的div

<div style="position: relative">

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!