Variations/Add 到购物车的 Woocommerce Jumpy 重新渲染

Question

我的带有变体的 WooCommerce 购物车运行正常（可以 select 尺寸并添加到购物车，重定向到购物车）但有一些显示问题。

每当您点击新尺码时，整个“添加到购物车”按钮区域都会重新加载，并使页面底部重新呈现并跳到各处。我已经尝试了一些 CSS 来将显示框保持在最小高度，但没有成功。

有什么想法吗？

这是一个 link 产品，您可以在其中看到跳动：http://theshoeboxrva.com.php53-22.ord1-1.websitetestlink.com/shop/carla

Answer 1

当您更改变体时，Woocommerce（在其核心 js 文件中）有上下滑动动画。这触发了变化。您已将此添加到您的 style.css

.single_variation_wrap {
    display: block !important;
}

而 woocommerce 有一个 display:none 属性 div，当你 select 变体 display:block.

时它会改变

您通过强制该元素的可见性覆盖了他们的样式，但 jquery 无论如何都会发生变化。

如果您不想升级 woocommerce，您可以在 add-to-cart-variation.js 文件中找到它并禁用它，但我不推荐它，因为如果您升级，您将丢失这些更改。

Answer 2

旧线程，但如果它对我有用的人有帮助：

.woocommerce-variation.single_variation {
    height: 0px;
}

Answer 3

两个提供的答案中都有一些错误信息，可能是因为版本更改，我使用的是 WooCommerce 3.5.3。

1. 不是.single_variation_wrap，而是.woocommerce-variation class 通过 WooCommerce js 获取 display: none。这很重要，因为添加到购物车按钮不受影响，因此始终可见。
2. .woocommerce-variation.single_variation 的设置高度可以作为解决方案的一部分，但单独会导致价格和库存数量被放置在添加到购物车按钮的顶部。

如果没有 selected 变体，我会完美地隐藏“添加到购物车”按钮，但没有 js 是不可能的。我的解决方案（测试了一种变体属性）：

1. 通过给它 0 高度来中和 js 元素的可见性（如 superhenke 建议）。
2. 为“添加到购物车”按钮提供足够的顶边距以固定位置。

3. 变体颜色背景 selection 按钮绘制用户的 关注一下。

   .woocommerce-variation.single_variation { 高度：0； }

   .woocommerce-变体-添加到购物车{ 边距顶部：85px； }

   .单品div.producttable.variationsselect{ 背景：#f1f1bf； }