Hi,
Great Product!
Wondering if there is a way to hide products that do not have an image from the slider.
Thanks.
Welcome to our forum.
I understand your issue, but sorry to say this feature isn't available right now, bu i can guide you how to achieve this, there is filter hook for product item wrapper class, see the documentation.
https://pickplugins.com/documentation/woocommerce-products-slider/filter-hooks/wcps_slider_item_class/
you can access to product id from $args variable like bellow.
$product_id = $args['product_id'];
so you can conditionally add a hidden class to item wrapper by checking product image exist or not.
Regards
I understand the issue because there is wrapper div, you could remove the wrapper for .hidden class by jquery,
https://www.google.com/search?q=remove+wrapper+div+jquery
Hope this helps.
Regards
I am able to hide the images and text using the following:
add_filter('wcps_slider_item_class','wcps_slider_item_class_20200303', 10, 2);
function wcps_slider_item_class_20200303($class, $args){
$product_id = isset($args['product_id']) ? $args['product_id'] : '';
$product = wc_get_product( $product_id );
if($product->get_image_id() < 1){
$class .= ' hidden';
}
return $class;
}
But there is a blank box that still remains (the wrapper?).
Is there something like product_id that can be accessed for
the wcps_items_wrapper_class
?
Just wanted to close this out. with the following I was able to successfully complete the task I was trying to accomplish:
In snippets plugin I entered the following code:
add_filter('wcps_slider_item_class','wcps_slider_item_class_20200303', 10, 2);
function wcps_slider_item_class_20200303($class, $args){
$product_id = isset($args['product_id']) ? $args['product_id'] : '';
$product = wc_get_product( $product_id );
if($product->get_image_id() < 1){
$class .= 'carouselhidden';
}
return $class;
}
In the WCPS app entered the following custom CSS:
.carouselhidden {
display: none;
}
Then again in snippets plugin is used JQuery remove() as follows:
add_action( 'wp_head', function () { ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('.item.carouselhidden').remove();
});
</script>
The carousel now performs as expected.
Thanks again for your excellent suggestions.