Equalize Products in slider / same height

Hi @vildlaks,

Greetings from WebToffee support. Thanks for reaching out to us.

Could you please brief us on your requirements further? Please share a screenshot of the product displayed by the Flatsome theme so we can look into the possibility of showing the Related products like that.

Also, kindly mention what happens when the “Override theme’s template” option is disabled.

Hi. See photos. When using your plugin the products does not get equalized = has the same height both thumbnail picture and textbox.

I have made CSS for the textbox to always be the same height, but can’t do it with the picture without it stretching and looking weird.

.owl-item .box-text {
height: 130px;
}

If you look in the bottom of the same picture the same product is equalized – it looks much better. Both the title of the product, the price and the add to cart button is in the “same” position also.

Regarding Override theme’s template

Se picture what happens when this is disabled.

Hi @vildlaks,

Thank you for sharing the information.

We have made a code snippet to fix the issue with style. Please be aware that the style only works when the slider and override theme option is enabled in the plugin.

If you are okay with that, please copy the code snippet from below and paste it into your active theme’s function.php file (WordPress Dashboard > Appearance > Theme Editor > functions.php) or you can use the?Code Snippet plugin to do that for you.

Kindly check using the code snippet and let us know how it goes.

/* This style only works when the slider and override theme option is enabled in the plugin */
add_action('wp_footer','wt_rp_change_image_size',10);
function wt_rp_change_image_size() {
	?>

		<style>
			.wt-related-products .owl-carousel .owl-item img { height: 254px;}  /* Set height */
		</style>

	<?php
}

Hi again.

This is not a good solution as it will stretch the images – it does not look good. We have just tried it.

Do you have another solution?

Hi vildlaks,

We are sorry to hear that the issue is not resolved. Please change the height to { height: 246px;} and check how it goes. If the issue persists you may decrease the value to a smaller amount.

Let us know how it goes.

Hi @vildlaks,

We hope you were able to fix the issue with the style. As this thread has been inactive for a while, we are marking it as resolved for now.