Wordpress Woocommerce跳跃式地重新招标变体/添加到购物车

我的WooCommerce购物车功能正常（可以选择大小并添加到购物车，重定向到购物车），但存在一些显示问题

每当你点击一个新的尺寸，整个“添加到购物车”按钮区域都会重新加载，并使页面底部重新浏览和跳转。我尝试了一些CSS来保持显示框的最小高度，但没有运气

有什么想法吗

这里有一个产品链接，您可以在其中看到跳跃性：

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

.single_variation_wrap {
    display: block !important;
}

woocommerce对该div有一个

display:none

属性，当您选择

display:block

的变体时，该属性会发生变化

通过强制该元素的可见性，您已经覆盖了它们的样式，但是不管发生什么，jquery更改都会发生

---

如果你不打算升级woocommerce，你可以在

添加到购物车variation.js

文件中找到并禁用它，但我不建议这样做，因为如果你升级，你会失去这些更改。

旧线程，但如果它帮助了我的同事：

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

---

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

它不是

.single\u variation\u wrap

，而是

.woocommerce variation

类获取

display:none

通过WooCommerce js。这很重要，因为“添加到购物车”按钮不受影响，因此始终可见

设置

.woocommerce variation的高度。单个\u variation

可以作为解决方案的一部分，但单独设置将导致价格和库存量置于“添加到购物车”按钮的顶部

如果没有选择变体，我会完全隐藏AddtoCart按钮，但如果没有js，这是不可能的。我的解决方案（针对一个变体属性进行了测试）：

通过将js元素的可见性设置为0高度（如图所示）来中和js元素的可见性 超级英雄建议）

为“添加到购物车”按钮提供足够的固定位置顶部边距

变体选择按钮的颜色背景，用于绘制用户的 注意

.1.1.1.1.2.1.1.1.1.1.1.2.2.2.2.2.1.1.1.2.1.1.1.1.1.1.1.1.2.2.2.1.1.1.1.2.2.2.2.1.1.1.1.1.1.1.1.1.1.1{ 身高：0； }

.添加到购物车{ 利润上限：85px； }

.单一产品分部产品表.变体选择{ 背景#f1bf； }

---

谢谢你的跟进-我觉得JS出了问题！我假设没有办法包含某种CSS来强制它保持打开？CSS没有，动画仍然在发生。您可以尝试查看是否可以覆盖正在发生的默认幻灯片动画，但我从未尝试过这种方法。