• Resolved awalsh1130

    (@awalsh1130)


    I am using a plugin for a product carousel on an ecommerce webpage. I would like to hide products that do not have images from the carousel. I am very new to all of this. It is my first webpage ever, and I have limited programming knowledge – but I’m willing to learn.

    From what I have found so far, there is a filter hook for product item wrapper class. You can access product id from $args variable like $product_id = $args[‘product_id’]; Then you should be able to conditionally add a hidden class to item wrapper by checking if a product image exists or not.

    This is what I have tried without success (php):

    
    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’] : '';
        $class .= ' my-custom-class';
        if ($product_id->get_image() && $product_id->get_image() == 'no_selection') {
            $class =' .hidden {
            display: none;';
        }
        return $class;
    }
    

    If anyone can help it is greatly appreciated.

    • This topic was modified 3 years, 2 months ago by Jose Castaneda. Reason: add backticks for code
Viewing 15 replies - 1 through 15 (of 23 total)
  • It can depend on how the data is stored.
    By default, you can use has_post_thumbnail() if the image is being stored as a Featured Image.
    https://developer.wordpress.org/reference/functions/has_post_thumbnail/

    There are similiar functions available to you if it is a Product in WooCommerce :
    https://developer.wordpress.org/reference/functions/the_post_thumbnail/#comment-1026

    I don’t use WooCommerce, so I don’t know if you have to use get_image or not.

    You said, “This is what I have tried without success”,
    but you don’t say what is not successul ?
    Does the function error out ?
    Does it break your site?
    Does the display: none get printed out at all?
    Do you at least make it into your if statement if there is no image?

    Add troubleshooting code to your function to see where is it is not working.

    Thread Starter awalsh1130

    (@awalsh1130)

    Thanks @corrinarusso

    I should be able to use the has_post_thumbnail() as the test for the if statement and it will return true if it does and false if it doesn’t? So i assume i need if else statement?

    My code is now as follows: it runs – no errors identified that I can see, but does not do what it I was hoping it would do (hide the products that do not have pictures)

    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’] : '';
        $class .= ' my-custom-class';
    	if (has_post_thumbnail()) {
    		$class = '.normal {
        		display: inline';
    	}
    	else {
    		$class = '.hide {
        		display: none';}
    	
        return $class;
    }
    • This reply was modified 3 years, 2 months ago by bcworkz. Reason: code fixed

    has_post_thumbnail wqill only work if :
    – it is inside the loop:
    https://www.wpbeginner.com/glossary/loop/
    – and the image is a Featured Image

    You need to know if your function is firing.

    You could debug code in your if, like maybe :
    if has_post_attachment { die();
    or, if $product_id->get_image() { die();

    or you could try this plugin :
    https://ca.wordpress.org/plugins/query-monitor/

    Thread Starter awalsh1130

    (@awalsh1130)

    Sorry. I’m not understanding.

    Thread Starter awalsh1130

    (@awalsh1130)

    This is the code that was provided by the developer as a starting point:

    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’] : '';
        $class .= ' my-custom-class';
        return $class;
    }

    The instruction provided to show/hide the product from the carousel was to conditionally add a hidden class to item wrapper by checking product image exist or not.

    • This reply was modified 3 years, 2 months ago by bcworkz. Reason: code fixed

    Ok – let’s back up.
    Do you know if your function is being fired at all ?
    function wcps_slider_item_class_20200303

    Thread Starter awalsh1130

    (@awalsh1130)

    No. I do not know how to check that. Code is placed in a snippet plugin. How would I check that?

    You need to be putting this code into the functions.php file of your child theme :
    https://kinsta.com/blog/wordpress-child-theme/

    Thread Starter awalsh1130

    (@awalsh1130)

    I use the snippets plugin so that I do not have to. Works the same way as if it were written in functions.php.

    Ok okay, not heard of this.
    Ok – well, like I said – you will need to add stuff into your loop to see if the page even reaches the function, and go from there.

    Moderator bcworkz

    (@bcworkz)

    There IS a syntax error in your code, it should have generated a PHP warning. You have $args[‘product_id’]. Note the quotation chars. You want $args['product_id']. Or maybe you don’t need the product_id line at all. It may not be germane to what you want to accomplish. OTOH, the product_id may be useful for passing a post ID to has_post_thumbnail(). See below.

    When you post code in these forums, please use the code button or demarcate with backticks. If you don’t we cannot see subtle errors like this. I went back and fixed your earlier posts so others can see the errors.

    You should want a more meaningful class name besides ' my-custom-class', maybe ' hidden' or ' no-image'. It may depend on how the carousel code and CSS work by default. In any case, the class addition is unconditional right now. Does the added class appear in HTML source output? If so, so far so good. If not, you may be using the wrong filter.

    If that much works, now add a conditional if() statement using has_post_thumbnail(). If that fails to work, either you failed to code correctly or has_post_thumbnail() needs to be passed a post ID (product_id ?) or the carousel doesn’t use post featured images.

    Thread Starter awalsh1130

    (@awalsh1130)

    Thanks @bcworkz for joining the conversation and providing your input. Applogies for the poor structure of the previous posts. Fisrt timer here. Thanks for correcting.

    the $args[‘product_id’] was cut and paste from the plugins web page:

    The information I recieved there indicated I could access product id from $args variable like $product_id = $args[‘product_id’]; Then I should be able to conditionally add a hidden class to item wrapper by checking if a product image exists or not. That is what I had to go off, so thought I might carry that forward here to see if the forum could assist.

    Hope this brings more light to it.

    Perhps I am taking the example too literally and I don’t need the $product_id = $args[‘product_id’]; line at all, but use something else.

    Thread Starter awalsh1130

    (@awalsh1130)

    Thread Starter awalsh1130

    (@awalsh1130)

    So I feel I have made some sort of progress. I found a way to access $product which gives me the ability to use get_image_id() which I can then use as the test for my if() statement (anything with an ID greater than 1 will show). Where I had product descriptions and prices, but no images, I now just have blank spaces. So the code gets rid of the product info for products with no images, but not the box/space that it resided in. Perhaps this has to be removed separately??? Here is the 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 .= ' hidden" <style>
      			display: none;
     		</style>';
    	}
        return $class;
    }
    Moderator bcworkz

    (@bcworkz)

    Nice work learning how to get image information! The wrong quote characters isn’t a critical error and that part of the code rarely comes into play. It’s wrong from the source all the same. So it goes with things found on the Internet.

    Remove this part from your code: " <style>display: none;</style>
    That will not work within a HTML tag, the rule belongs elsewhere. More on where in a bit. Lets use a more distinctive class than ' hidden' to avoid possible conflicts with other elements. Maybe ' carousel-hidden'. Be sure the space character in front remains.

    Now place the CSS rule to hide the element in the Additional CSS section of the customizer. Like this:

    .carousel-hidden {
      display: none:
    }

    FWIW, you can place CSS in a HTML tag, but not with <style> tags, rather as a style attribute. However, IMO style attributes are evil and must be avoided. Plus adding a new attribute this way would be inherently fragile.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘How to hide products that do not have an image from a slider carousel’ is closed to new replies.