Variable product drop-down label vertical alignment

When you have more than one drop-down for attribute selection on product page, label of the last one always has different vertical alignment compared to preceding ones. Please take a look at this pic – https://prnt.sc/sesq34

Hello,

Please make the full backup of your site and check how it looks on a default theme to detect if our theme causes the problem.

Best Regards

Storefront theme has different layout – https://prnt.sc/sf81ec
So there’s no way to check. But I checked your Woodmart demo page – https://woodmart.xtemos.com/shop/accessories/wooden-bow-tie-man/
All label containers except last one have 20px bottom padding. This causes misalignment of label element of last container.
See pic – https://prnt.sc/sf8btc
This is not an issue in your demo layout, but this leads to misalignment with other layouts.

Hmm, looks like my previous statement is not true. Actually in your demo all the table rows have the same height and all row except last one have 20 px bottom padding.
But in my case last row has bigger height than previous ones and lacks padding as well. It’s size is equal size + padding of previous ones.
See the pic to better understand, here’s my site – https://prnt.sc/sf97tq and here’s your demo – https://prnt.sc/sf9n0y

This is what causes the issue but I have no idea from where this last table row height increase does come.

Hello,

Please provide the site admin access to the private area as well as the page URL with the problem.

Best Regards

Here they are:

Hello,

This is the way it looks like on the layout with a big image https://prnt.sc/sfzsao

In addition, the drop-down has been customized, deactivate the customization and will check again.

Best Regards

This is the way it looks like on the layout with a big image

So you suppose to change the layout? SOrry, but this is not an answer.
As for customisation I don’t get what are you talking about. Some product drop-downs are customised but not this one.

Hello,

Please disable all the plugins not related to the theme and remove the drop-down customization and check how it would look like. The screen shows the view, the provided image is smaller.

Best Regards

1) as I mentioned above drop-downs are not customised for these products
2) I deactivated all plugins except WooCommerce, Woodmart Core and WPBakery and here’s what I got – https://gyazo.com/650d435d74919ce2a285bd53083e0576

Hello,

This is caused by the “Clear button” which is hidden until you chose a variation. This is Wooocmmerce functionality and our theme does not influence. Please add this code to the Theme Settings > Custom CSS > Global to correct:

.variations_form .variations tr:last-child td label {
  margin-bottom: 18px;
}

Best Regards

Thanks, that’s the same solution I came to myself. It’s working in most cases. I will write to this theme if it will cause any issues, but it seems to work fine for now.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts