Responsive Products Slider

Hey fcp,
Sorry for the late reply, I didn’t find a solution to do this with an Enfold “filter” or “hook”, but I was able to write a script that seems to work. First I added a custom ID to your home page product slider frontpage-product-slider because we don’t want this running amok.
Then I added this script to your child theme functions.php

function custom_shop_columns_script(){
  ?>
  <script>
(function($){
$(document).ready(function(){
	var width = $(window).width()
	if((width >= 768) && (width <= 1024)) {
  $('#frontpage-product-slider.template-shop.avia-content-slider').removeClass('shop_columns_4').addClass('shop_columns_3');
	}
	 else if((width <= 767)) {
		$('#frontpage-product-slider.template-shop.avia-content-slider').removeClass('shop_columns_4').addClass('shop_columns_2');
	} else {}
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_shop_columns_script');

Then I added this css to your Quick CSS

#frontpage-product-slider.shop_columns_3 .products .product {
    width: 31.6% !important;
}
#frontpage-product-slider.shop_columns_3 .products .product:nth-child(4) {
    display: none !important;
}
.responsive #top #main #frontpage-product-slider.shop_columns_2 .products .product {
	    margin: 0 1% 1% 0 !important;
    width: 49% !important;
}

I had to disable your Autoptimize plugin because it’s cache was making it hard to test this, but it seems to work now. Please clear your browser cache and check.
Please note, if you test on a desktop by changing your window size, you will have to reload the page because the script works on page load and not window resize.

Best regards,
Mike

Hi,
Sorry for the late reply, I’m not sure how this could cause some display issues for users on a desktop, without “window resize”. Do you believe your users are loading your site on a desktop and then resizing the window?
I believe that using two different elements for different screen sizes would not add much to the loading time because the element is already loading so the difference is just the small amount of text that is in the element.
So I would recommend this approach.
Yes, I had disabled your Autoptimize plugin because its cache was making it hard to test the above solution, I wrote about this above, but I have re-enabled it now, sorry for the confusion.

Best regards,
Mike

Hi,
Thanks, the css is in your WordPress > Customize > Additional CSS I had moved it a couple of times until I realized the Autoptimize cache was giving me some trouble.
Anyways, please let us know if you need further help with setting up the two elements to show on different devices.

Best regards,
Mike