Basel + YITH Pre-Order Premium

Hi! When using the YITH Pre-Order plugin it will insert a specific label/release date next to the buy button on the shop category pages, but I’d like to have it positioned as a label similar to “sale” and “new” on top of the product image. This I’m able to do easily with some simple CSS for .pre_order_loop.

However when hovering over a product image (as the quick view and wishlist icons appear) the pre-order label jump back next to the buy button. I think maybe the theme is overriding the position for the hover state. Would you be able to provide some insight please?

Hello,

We have checked and see that our theme does not influence, the problem is caused by custom CSS, please check: https://prnt.sc/jdj5ar

Best Regards

Thanks for checking. That was just me trying out a few things but it did not work as intended. I have removed the custom code and the same is happening. Upon hover something is making the label shift position and it does not appear to be happening with other themes. That’s why I’m assuming something in the Basel CSS is forcing this behaviour.

So in short – how can I make the pre-order label stay in the same place even when hovering?

Hello,

There are two ways: 1. you can change hover style or delete animation on button, here is CSS:

body .basel-hover-alt.purchasable .wrapp-swap {
	overflow: visible;
}

body .basel-hover-alt.purchasable .wrapp-swap {
	height: auto;
}

body .basel-hover-alt.purchasable:hover .swap-elements {
    transform: none;
    -webkit-transform: none;
}

body .basel-hover-alt .star-rating {
	display: block;
}

body .basel-hover-alt .wrap-price .btn-add, 
body .basel-hover-alt .wrap-price .price, 
body .basel-hover-alt .wrap-price .wrapp-swap {
	height: auto;
	line-height: 28px;
}

Best Regards

[Author]

Posts