如何使用 AVADA 在 WooCommerce 网站上制作产品页面画廊 STICKY？答案

【问题标题】：How to make the Product Page Gallery STICKY on a WooCommerce site with AVADA?如何使用 AVADA 在 WooCommerce 网站上制作产品页面画廊 STICKY？
【发布时间】：2021-10-04 07:51:58
【问题描述】：

我有一个使用 Avada 主题构建的 WooCommerce 网站。我试图让图片库在产品页面上具有“粘性”。 这个想法是让图片库在右侧列的简短产品描述/添加到购物车部分旁边向下滚动，这往往会更长。

我在this article here 上看到了一行代码，它帮助制定了 Avada 主题的代码（我使用的是 Avada 的图片库而不是 WooCommerce 的）：

.avada-product-gallery {
position: sticky!important;
top: 0!important;
}

如果我错了，请纠正我，但根据我从链接文章中得到的信息，上面的这行代码可以工作，但需要 overflow:visible 在画廊所在的主体或更大的容器上。

我现在正在学习编码，所以我对这个主题有点怀疑 - 就鱼而言。我试图追溯我必须添加overflow: visible!important 的容器，但它阻止了我，所以我有点迷失在这样的代码中：

XXXXXXXXXX .XXXXX {
overflow: visible!important;
}

我给你一个我想更改的产品页面示例，看看是否有人可以帮助我识别我必须在代码上引用的容器以更改溢出显示： https://architectoutlet.com/shop/gifts/gifts-for-science-lovers/ti-asia-blue/

我想出.flex-viewpoint .product { ?? .Fusion-row .product {?? avada-single-product-gallery-wrapper avada-product-images-global avada-product-images-thumbnails-left ??

我全神贯注，乐于学习，所以欢迎任何关于此事的提示！

谢谢

向所有人致以最诚挚的问候:)

【问题讨论】：

标签： css woocommerce gallery sticky

【解决方案1】：

您可以添加自己的自定义 javascript

.avada-product-gallery 是您的产品页面图库类

jQuery(window).bind("load", function() {
   var width = jQuery(window).width();
   if (width > 767) {
   jQuery(".avada-product-gallery").stick_in_parent({offset_top:60});
  }
});

经过测试，它从我的角度工作。提前致谢

【讨论】：

嗨，Savan，感谢您的关注。我已经使用代码片段添加了您的代码，如下所示： function wpb_hook_javascript() { ?>
在哪里可以添加脚本？你可以在页脚添加javascript吗？ @MalevichG
您好 Savan，是的，我可以，但是您发送给我的代码似乎不起作用