如何将我的产品名称和价格从缩略图下方移动到Avada&WooCommerce中的滚动内容？

时间：2018-12-01 作者：Ben Blue

我希望我将商店页面上每个Woocommerce产品图像下的产品信息（名称、价格）移动到仅通过特色图像滚动显示（而不是当前滚动显示信息）的位置很肯定这将需要定制CSS和JS，我对此很满意，我只是希望有任何关于方法/提示等的指针可以从哪里开始。

首先是当前视图下面的屏幕截图，然后是我想要创建的具有此功能的其他站点（我也意识到这一点reference site 不是WordPress。但我看这是可行的！）

我正在使用Avada theme, 它有滚动选项，但我看不到可以进行此自定义的选项。Avada\'s Featured Image Rollover options page

谢谢如果我需要澄清，请告诉我！

包含以下产品信息的当前页面current page with product info below


悬停处于活动状态且结果信息可见的参考页reference page with active hover info

1 个回复
SO网友:Jaisemon Jacob

将以下代码添加到css

.product-details {
    position: absolute;
    top: 15px;
    z-index: 999;
    display: none;
}

.product:hover .product-details {
    display: block;
}

标签： theme-development   customization   woocommerce-offtopic   javascript   小码农  

相关推荐

如何将Bootstrap Tour JavaScript添加到WordPress管理面板仪表板小部件

我正在开发一个主题，想知道如何将引导程序教程脚本添加到自定义仪表板小部件中。基本上，我想将引导程序巡更脚本包含到管理面板中，这样我就可以编写一个自定义仪表板小部件，然后将巡更脚本链接到该小部件。