CSS Issue on product catalog when reviews are available (stars overlapping)

First product. There are the rating stars on hover which are overlapping with the price. Tried to fix it with css but don’t get the markup.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

body .woodmart-hover-base.has-stars.purchasable .woodmart-product-cats {
	margin-bottom: 5px;
}

body .woodmart-hover-base.has-stars.purchasable .product-rating-price,
body .woodmart-hover-base.has-stars.purchasable .wrapp-product-price .price {
	height: auto;
	line-height: 1.3;
}

body .woodmart-hover-base.has-stars.purchasable .star-rating {
	margin-top: 5px;
	height: 20px;
}

body .woodmart-hover-base.has-stars.purchasable .wrapp-product-price,
body .woodmart-hover-base.has-stars.purchasable:hover .wrapp-product-price{
	height: auto;
	transform: none;
  -webkit-transform: none;
}

Regards

Better 🙂 But the stars are still a little bit cut off at the bottom. Will this fix be integrated into the core? I don’t want to make many customizations for the default setup.

Replace previous CSS code with this one

body .woodmart-hover-base.has-stars.purchasable .woodmart-product-cats {
	margin-bottom: 5px;
}

body .woodmart-hover-base.has-stars.purchasable .product-rating-price,
body .woodmart-hover-base.has-stars.purchasable .wrapp-product-price .price {
	height: auto;
	line-height: 1.3;
}

body .woodmart-hover-base.has-stars.purchasable .wrapp-product-price,
body .woodmart-hover-base.has-stars.purchasable:hover .wrapp-product-price{
	height: auto;
	transform: none;
	-webkit-transform: none;
}

Unfortunately, due to the structure of the plugin and the variety of its settings, we can not integrate this into a complete build. For more convenience, you can add this code to the Child Theme.

Regards

[Author]

Posts