Product Grid / Product Slider Customization

Hi,

Thank you for the update.

Where can we see the issue? We may be able to apply a minimum height to the items or content container to display or to align them consistently. Please provide the page URL in the private field.

Best regards,
Ismael

Hi,
Thank you for your patience and the link to your page, to have all of the product grid items the same height try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_product_height_script() { ?>
    <script>
(function($){
  $(window).load(function(){
  	$('.avia-content-slider-inner').each(function(){  
     var $columns = $('li.product .inner_product',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_product_height_script');

Best regards,
Mike

Hi,

Thank you for the inquiry.

We adjusted the script a bit so that the maxHeight value is recalculated on browser resize. Please try this again.

function ava_custom_product_height_script()
{?>
    <script>
	(function($){
		var win = $(window);

		$(document).ready(function() {
			// just make sure that the column resizes
			win.trigger("debouncedresize");
		});

		win.on("debouncedresize", function(){
			console.log("test");
			$('.avia-content-slider-inner').each(function(){
				var $columns = $('li.product .inner_product',this);
				var maxHeight = Math.max.apply(Math, $columns.map(function(){
					return $(this).height();
				}).get());
				$columns.height(maxHeight);
			});
		});
	})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'ava_custom_product_height_script', 9999);

Best regards,
Ismael

Hi,

Glad to know to know that it is working. Regarding the button, try to use this css code to adjust the position of the read more link and ensure that it sticks to the bottom.

.responsive #top .slide-entry .read-more-link {
    position: absolute;
    bottom: 0;
    left: 0;
    top: auto;
}

.responsive #top .slide-entry  .slide-entry-excerpt {
    position: relative;
    padding-bottom: 50px;
}

Best regards,
Ismael

Hi,

Sorry about that. I thought that you are using the Blog Posts element. For the product grid, this css should work.

.avia_cart_buttons {
    position: absolute;
    bottom: 0;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards.

Best regards,
Ismael

Hi Alex,

I checked your website and buttons are side by side on my end. I am not sure if we understood the issue clearly. Could you please post a screenshot and show it? You can upload your screenshots on imgur.com and post the links here :)

Best regards,
Yigit

Hi,

@thijmens thank you for your patience and the link to your site, the script in this thread is for the product slider element, your page is not using this element it is a Shop page.
On your page the first 3 columns are equal height but the last one has double the product excerpt, so making all four equal height to the last one will make the first 3 look strange with a lot of white space, my recommendation is that you would be better to remove half of the product excerpt from the last one.
If you would like further help with this please open a new thread and include an admin login in the Private Content area.
We try to keep the threads focused on a single topic to help future searches, thank you for your understanding.

Best regards,
Mike