How do I stop these variation boxes from moving once selected

[weena]

Please see the sticky bar at the top of this page:

When I select the size the box moves down and I can’t work out why? How can I get it to stay in the same position?

Thanks!

[lasjorg]

I feel like some feature has been enabled but not given the content needed. The below HTML is added to the DOM on selection, but the elements are empty.

<div class="single_variation_wrap">
	<div class="woocommerce-variation single_variation" style="">
	<div class="woocommerce-variation-description"></div>
	<div class="woocommerce-variation-price"></div>
	<div class="woocommerce-variation-availability"></div>
</div>

This CSS is used with it and seems to be what is pushing everything down.

.woocommerce div.product .woocommerce-variation-price {
  margin-bottom: 30px;
}

The proper solution would be to figure out what is supposed to be inside the elements and if that feature is not wanted to disable it if possible. Seem like something to do with variations of the product, but that’s all I got.

Otherwise, you can try adding this CSS and make sure it is loaded correctly in the cascade (custom CSS should be loaded correctly as the last CSS).

.woocommerce div.product .woocommerce-variation-price {
   margin-bottom: 0px !important;
}

[weena]

That’s worked perfectly thank you so much!!!