Question 3456 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

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>';
    }
Tags:

2

Answers


  1. 0

    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>';
    
    }   


}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search