WooCommerce Products-Can they all be the same height and align the Add to Basket Button to the bottom of the columns?

[core365]

Hi, hope you can help, I’m working on a WooCommerce site and when viewing the product categories, some products are different heights and it looks untidy on the page! Is there a way around this so they can all be the same height and align the Add to Basket Button to the bottom of the columns?

I’d be grateful of any pointers!

Adult electric scooters for sale, e scooters for sale

Thanks!

[tristup]

Hi @core365,

Thanks for reaching out.
It seems all the product is at the same height and the add to cart button is just aligned bottom of the product box. Can you please let us know if the issue still exists?

If that still exists, can you please provide any screenshot marked with the issue or any video that helps us to recognize the problem?

Thanks

[core365]

Hi @tristup,

it must be when viewing on different screen sizes it occurs, as I can still see the difference in height! I’ve attached a screen grab for your reference.

Thanks!

[marc_a]

Hi @core365,

The reason why some of the products are not aligned with each other because some of the product titles are too long. If you would like to make them aligned, we need to add a JS script that will automatically get the highest height of the product title and apply to each of the product. Please add this code below in your Pro > Theme Options > JS.

jQuery(document).ready(function( $ ){

    // Select and loop the container element of the elements you want to equalise
    $('.archive .products').each(function(){  
      
      // Cache the highest
      var highestBox = 0;
      
      // Select and loop the elements you want to equalise
      $('.product .entry-header h3', this).each(function(){
        
        // If this box is higher than the cached highest then store it
        if($(this).height() > highestBox) {
          highestBox = $(this).height(); 
        }
      
      });  
            
      // Set the height of all those children to whichever was highest 
      $('.product .entry-header h3',this).height(highestBox);
                    
    }); 

});

And this is how it looks like:

Please note that custom JS code is outside the scope of our support. Issues that might arise from the use of custom JS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[core365]

Hi @marc_a,

That’s great, thanks!

I appreciate your time and help.

[marc_a]

Hi @core365,

You’re welcome and it’s our pleasure to help you. If you have any other concerns, feel free to reach us.

Thank you.