about your Enfold template

Hey Johan,

Thank you for the inquiry.

1.) The products displayed on the homepage are rendered using a plugin or a custom shortcode. The gallery or product element is not a part of the theme’s default functionality. If you are experiencing issues with sorting, it is recommended to contact plugin developers. They will be able to provide assistance and address any sorting-related issues.

2.) The grid appears to be displaying correctly from our end. However, please keep in mind that the size of the grid items is determined by the dimensions of the product images. If you want a consistent grid layout, it is recommended to upload images with the same sizes or dimensions. You can also customize the product grid settings in the Appearance > Customize > WooCommerce > Product Images tab.

Best regards,
Ismael

Hi,
Your shortcode [best_selling_products limit="4" column="4" paginate="true" orderby="rand"] is already set to show random items with orderby=”rand” but I found that the shortcode best_selling_products is very old and should be used with old versions of woocommerce. According to this article you should try this shortcode: [products class="columns-4" limit="4" column="4" orderby="rand"] to show random products.
If you want to use this you will need to also add this css in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.woocommerce.columns-3.columns-4 li:nth-child(4) {
	clear: none;
	margin-right: 0;
}
.woocommerce.columns-3.columns-4 li.last {
	    margin-right: 1% !important;
}

To make each product grid & product image & product header caption in each grid all equal height you could add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function equal_height_product_grid_image_header() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
    $('.products.columns-3,.products.columns-4').each(function(){  
     var $items = $('li',this);
     var $image = $('li .thumbnail_container img',this);
     var $header = $('li .inner_product_header',this);
     var itemsHeight = Math.max.apply(Math, $items.map(function(){
         return $(this).height();
     }).get());
     var imageHeight = Math.max.apply(Math, $image.map(function(){
         return $(this).height();
     }).get());
     var headerHeight = Math.max.apply(Math, $header.map(function(){
         return $(this).height();
     }).get());
     $items.height(itemsHeight);
     $image.height(imageHeight);
     $header.height(headerHeight);
  });
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'equal_height_product_grid_image_header');

The only problem is that your secondary images that show on mouse-over which are added by the plugin WooCommerce Product Image Flipper are not the same heights, so you would need to change all of those secondary images because on hover a white space is shown.

Best regards,
Mike