如何将WooCommerce商品详情页左侧图片设置为sticky粘性定位

首先排查以下几个sticky生效的必要前提，再对应调整代码：

• 检查你当前主题中.storefront-full-width-content.single-product div.product容器的overflow属性，不能设置为overflow: hidden、overflow: auto或overflow: scroll，如果有对应规则删除即可，这是sticky失效最常见的原因
• 确认上述父容器的高度大于图片gallery容器的高度，父容器高度需要包含右侧商品介绍、参数、评价等全部内容的总高度，才能给粘性定位留出滚动空间
• 检查当前CSS规则是否被主题默认样式覆盖，可以提升选择器优先级，或补充必要属性避免被遮挡

调整后的CSS代码如下：

.storefront-full-width-content.single-product div.product .woocommerce-product-gallery {
    width: 42.130435%;
    margin-right: 1.347826%;
    padding-left: 20px;
    position: sticky !important;
    top: 15px;
    z-index: 10; /* 避免被页面其他固定元素遮挡 */
    align-self: flex-start; /* 若父容器是flex布局，加这个属性避免sticky失效 */
}

如果你的主题商品容器是浮动布局而非flex布局，删除align-self属性即可。修改后清除浏览器缓存刷新页面就能看到粘性效果。

内容的提问来源于stack exchange，提问作者muhammad taimoor