Hi,
1. The product hover design you selected is intended for a limited number of elements, specifically only one price at the bottom. To prevent overlapping prices, please try adding the following custom CSS code:
body .wd-product.wd-hover-info .bottom-information :is(.login-to-prices-msg,.price) {
position: static;
}
body .wd-product.wd-hover-info .bottom-information .wc-gzd-additional-info {
margin-block: -.2em;
}
body .wd-product.wd-hover-info .bottom-information {
transform: translateY(-100%) translateZ(0);
}
2. The plugin you are using outputs the price through a specific hook available in the default single product layout. However, since you are using a single product layout built with the layout builder, you need to manually add the necessary hooks used by the plugin to display its content.
In this case, the plugin uses the “woocommerce_single_product_summary” hook, which we have already added to your single product layout below the price element (screenshot: https://monosnap.com/file/Hhbn1j2cntvWPRUBmSKBdhzaBQQjTJ).
If you need to center-align the hook content, add the following custom CSS to the Global Custom CSS Area in Theme Settings:
.elementor-widget-wd_wc_hook .wc-gzd-additional-info,
.elementor-widget-wd_wc_hook .legal-price-info {
text-align: center;
}
You can learn more about hooks in the documentation https://xtemos.com/docs-topic/custom-hooks-and-plugins-compatibility/.
Kind Regards
.
