Woocommerce add multiple images to category page

Question

I want to add 2 images to Woocommerce categories, at this time I can only add 1 image at a time. but I would like to add 2 images to a category. so that it scrolls. help needed. This is what I have at this stage

 /**
 * Display category image on category archive
 */
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
    if ( is_product_category() ){
        global $wp_query;
        $cat = $wp_query->get_queried_object();
        $thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
        $image = wp_get_attachment_url( $thumbnail_id );
        if ( $image ) {
            echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
        }
    }
}

at this stage it looks like this

and in the front, it looks like this

I would like to add more than just one image per category

EDIT I have installed advanced custom fields and could add extra image fields in the backend with no problem, the problem I have now is to display that fields on the front-end.

my Woocommerce store shows Categories on the shop page

need to add the extra images to the categories on the shop page NEED HELP PLEASE

UPDATE WITH CODE THAT SEMI-WORKS

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; for ( $i = 1; $i <= 3; $i++ ){ $category_image = the_field('category_image_' . $i, $term_id); if ( ! empty( $image ) ){ echo ''; // echo $category_image."
"; } } }

The output brings up the image URL but even if I put it into the image tags it only displays the URL

Answer 1

This did it for me, I changed the field to get field did a few other changes as well hope this helps someone else

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;
for ( $i = 1; $i <= 3; $i++ ){  
  $category_image =  '<img src="'.get_field('category_image_' . $i, $term_id).'"/>';
 // $category_image = get_field('category_image_' . $i, $term_id);
 if( $category_image ) {
    echo $category_image."<br/>";
} else {
    echo 'empty';
}
}
    
}

Answer 2

Go to: WooCommerce > Products. Select one of your Variable products. Select the Variations tab in the Product Details box. Find the Add Additional Images link and click. This link allows you to add any number of additional images for each variation.