CODEWITHSUNDEEP
phpwordpresswoocommerce
Morne
Morne

Reputation: 101

Woocommerce AFC images for category only show when image not empty

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 class="carousel__viewport">';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
        echo'</ol>';
    }elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&empty($cat_img_3)) {
        echo'<ol class="carousel__viewport">';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_2.'<div class="carousel__snapper"></div></li>';
        echo'</ol>';
    }elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&!empty($cat_img_3)) {
        echo'<ol class="carousel__viewport">';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_2.'<div class="carousel__snapper"></div></li>';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_3.'<div class="carousel__snapper"></div></li>';
        echo'</ol>';
    }

Upvotes: 0

Views: 106

Answers (2)

Orbital
Orbital

Reputation: 966

Try this one if you don't want to make big changes to your code

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 class="carousel__viewport">';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
        echo'</ol>';
    }elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&empty($cat_img_3)) {
        echo'<ol class="carousel__viewport">';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_2.'<div class="carousel__snapper"></div></li>';
        echo'</ol>';
    }elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&!empty($cat_img_3)) {
        echo'<ol class="carousel__viewport">';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_2.'<div class="carousel__snapper"></div></li>';
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_3.'<div class="carousel__snapper"></div></li>';
        echo'</ol>';
    }
}

And here is a more optimized version, I added all the pictures to the array and then through the cycle to display the pictures.

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 = array_filter($array);  
    
    
    if(empty($result_images_array)) {
    
    echo'<ol class="carousel__viewport">';
    
    
    foreach($result_images_array as $image_src) {
    
    echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$image_src.'<div class="carousel__snapper"></div></li>';
    
    }
    
    
    echo'</ol>';
    
    }   


}

Upvotes: 0

Snuffy
Snuffy

Reputation: 2096

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 class="carousel__viewport">';
    foreach($slides as $slide) {
        echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$slide.'</li>';
    }
    echo '</ol>';
    endif;
}

Upvotes: 1

Related Questions