Woocommerce Jumpy Rerendering of Variations /添加到购物车

Question

我的WooCommerce购物车有各种变化功能正常（可以选择尺寸并添加到购物车，重定向到购物车），但有一些显示问题。

每当您点击一个新尺寸时，整个“添加到购物车”按钮区域将重新加载并使页面底部重新渲染并跳转到整个地方。我尝试了一些CSS来保持显示盒的最小高度没有运气。

有什么想法吗？

这是指向您可以看到跳跃的产品的链接：http://theshoeboxrva.com.php53-22.ord1-1.websitetestlink.com/shop/carla

Answer 1

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

.single_variation_wrap {
    display: block !important;
}

对于该div，woocommerce有display:none属性，当您选择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 类通过WooCommerce js获得display: none。这很重要，因为“添加到购物车”按钮不受影响，因此始终可见。
2. 设置高度.woocommerce-variation.single_variation可以作为解决方案的一部分，但仅此一项将导致价格和库存量置于“添加到购物车”按钮的顶部。

当未选择变体时，我会完全隐藏“添加到购物车”按钮，但是如果没有js，这是不可能的。我的解决方案（已测试一种变体属性）：

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

3. 变化选择按钮的彩色背景以绘制用户的 注意它。

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

   .woocommerce-variation-add-to-cart { 页边距：85px; }

   。单一产品div.product表。变体选择{ 背景：＃f1f1bf; }