Woocommerce AFC images for category only show when image not empty-CodePudding

Hi Have this Code to show multiple images for categories on the shop page, the problem I have is if the AFC image is only one it still shows an empty spot and not only the one image. how can I fix it so that if no image only shows the images that are there?

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);

function wpse_add_custom_text_under_category_title($category) {
   $term_id = 'product_cat_'.$category->term_id;
    $size = "shop_catalog";
    $cat_img_1 = '<img src="'.get_field('category_image_1', $term_id).'"/>';
    $cat_img_2 = '<img src="'.get_field('category_image_2', $term_id).'"/>';
    $cat_img_3 = '<img src="'.get_field('category_image_3', $term_id).'"/>';
    if (!empty($cat_img_1)&&empty($cat_img_2)&&empty($cat_img_3)) {
        echo'<ol >';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_1.'<div ></div></li>';
        echo'</ol>';
    }elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&empty($cat_img_3)) {
        echo'<ol >';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_1.'<div ></div></li>';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_2.'<div ></div></li>';
        echo'</ol>';
    }elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&!empty($cat_img_3)) {
        echo'<ol >';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_1.'<div ></div></li>';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_2.'<div ></div></li>';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_3.'<div ></div></li>';
        echo'</ol>';
    }

CodePudding user response：

As i point in the comments make your images an array()

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);
function wpse_add_custom_text_under_category_title($category) {
    $term_id = 'product_cat_'.$category->term_id;
    $slides = array();
    if(get_field('category_image_1', $term_id)):
    $slides[] .= '<img src="'.get_field('category_image_1', $term_id).'"/>';
    endif;
    if(get_field('category_image_2', $term_id)):
    $slides[] .= '<img src="'.get_field('category_image_2', $term_id).'"/>';
    endif;
    if(get_field('category_image_3', $term_id)):
    $slides[] .= '<img src="'.get_field('category_image_3', $term_id).'"/>';
    endif;
    if($slides):
    echo '<ol >';
    foreach($slides as $slide) {
        echo '<li id="carousel__slide" tabindex="0" >'.$slide.'</li>';
    }
    echo '</ol>';
    endif;
}

CodePudding user response：

Try this

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);

function wpse_add_custom_text_under_category_title($category) {
   $term_id = 'product_cat_'.$category->term_id;
    $size = "shop_catalog";
    
    if( get_field('category_image_1', $term_id) ) {
    $cat_img_1 = '<img src="'.get_field('category_image_1', $term_id).'"/>';
    }
    
    if( get_field('category_image_2', $term_id) ) {
    $cat_img_2 = '<img src="'.get_field('category_image_2', $term_id).'"/>';
    }
    
    if( get_field('category_image_3', $term_id) ) {
    $cat_img_3 = '<img src="'.get_field('category_image_3', $term_id).'"/>';
    }
    
    if (!empty($cat_img_1)&&empty($cat_img_2)&&empty($cat_img_3)) {
        echo'<ol >';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_1.'<div ></div></li>';
        echo'</ol>';
    }elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&empty($cat_img_3)) {
        echo'<ol >';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_1.'<div ></div></li>';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_2.'<div ></div></li>';
        echo'</ol>';
    }elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&!empty($cat_img_3)) {
        echo'<ol >';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_1.'<div ></div></li>';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_2.'<div ></div></li>';
        echo '<li id="carousel__slide" tabindex="0" >'.$cat_img_3.'<div ></div></li>';
        echo'</ol>';
    }
}

Or this updated function,

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);

function wpse_add_custom_text_under_category_title($category) {
   $term_id = 'product_cat_'.$category->term_id;
    $size = "shop_catalog";
    
    $images_array = array();
    $images_array[] = get_field('category_image_1', $term_id);
    $images_array[] = get_field('category_image_2', $term_id);
    $images_array[] = get_field('category_image_3', $term_id);
    
    $result_images_array = images_array($array);  
    
    
    if(empty($result_images_array)) {
    
    echo'<ol >';
    
    
    foreach($result_images_array as $image_src) {
    
    echo '<li id="carousel__slide" tabindex="0" >'.$image_src.'<div ></div></li>';
    
    }
    
    
    echo'</ol>';
    
    }   


}