Output grid of child category thumbnails and custom URL

Question

I have a product category in WooCommerce called Dealers (ID 93). This product category has about 50 children currently and each one has a logo as its thumbnail. I have added a custom field on each category to paste a URL to the dealer website. I want to create a page that will automatically populate these child categories and display a grid of the thumbnails. I'd like each thumbnail to link to the dealer_website URL and open in a new window.

This is the code I'm using to add a custom meta field to the product categories:

// Custom field for product categories
// Add term page
function custom_product_taxonomy_add_new_meta_field() {
    // this will add the custom meta field to the add new term page
    ?>
    <div class="form-field">
        <label for="term_meta[custom_term_meta]"><?php _e( 'Dealer Website', 'dealer_website' ); ?></label>
        <input type="text" name="term_meta[custom_term_meta]" id="term_meta[custom_term_meta]" value="">
        <p class="description"><?php _e( 'Make sure to include the whole URL here','dealer_website' ); ?></p>
    </div>
<?php
}
add_action( 'product_cat_add_form_fields', 'custom_product_taxonomy_add_new_meta_field', 10, 2 );
// Edit term page
function custom_product_taxonomy_edit_meta_field($term) {

    // put the term ID into a variable
    $t_id = $term->term_id;

    // retrieve the existing value(s) for this meta field. This returns an array
    $term_meta = get_option( "taxonomy_$t_id" ); ?>
    <tr class="form-field">
    <th scope="row" valign="top"><label for="term_meta[custom_term_meta]"><?php _e( 'Dealer Website', 'dealer_website' ); ?></label></th>
        <td>
            <input type="text" name="term_meta[custom_term_meta]" id="term_meta[custom_term_meta]" value="<?php echo esc_attr( $term_meta['custom_term_meta'] ) ? esc_attr( $term_meta['custom_term_meta'] ) : ''; ?>">
            <p class="description"><?php _e( 'Make sure to include the whole URL here','dealer_website' ); ?></p>
        </td>
    </tr>
<?php
}
add_action( 'product_cat_edit_form_fields', 'custom_product_taxonomy_edit_meta_field', 10, 2 );
// Save extra taxonomy fields callback function.
function save_taxonomy_custom_meta( $term_id ) {
    if ( isset( $_POST['term_meta'] ) ) {
        $t_id = $term_id;
        $term_meta = get_option( "taxonomy_$t_id" );
        $cat_keys = array_keys( $_POST['term_meta'] );
        foreach ( $cat_keys as $key ) {
            if ( isset ( $_POST['term_meta'][$key] ) ) {
                $term_meta[$key] = $_POST['term_meta'][$key];
            }
        }
        // Save the option array.
        update_option( "taxonomy_$t_id", $term_meta );
    }
}  
add_action( 'edited_product_cat', 'save_taxonomy_custom_meta', 10, 2 );  
add_action( 'create_product_cat', 'save_taxonomy_custom_meta', 10, 2 );

This part works just fine, but I don't know how to get it to output into a grid of thumbnails on a custom page template that all link to the dealer_url and open it in a new window.

I'm using shortcode right now to get part of the way, but I don't know how to pull the dealer_website url instead of the category url:

[product_categories parent="93" columns="5" number="100" hide_empty="0"]

Answer 1

1. Get The children terms objects

   $terms_objects = get_terms(
        array(
           'taxonomy'   => 'product_cat',
           'child_of'   => 93,
           'hide_empty' => false,
        )
   );
   

2. loop over the terms objects inside the thumbnails grid, get the dealer URL field and the thumbnail ID then the thumbnail URL

   // Loop over the childrens.
    foreach( $terms_objects as $term_object ) {
        $dealer_url         = get_option( 'taxonomy_' . $term_object->term_id );
        $term_thumbnail_id  = get_term_meta( $term_object->term_id, 'thumbnail_id', true );
        $term_thumbnail_url = ( ! empty( $term_thumbnail_id ) && is_numeric( $term_thumbnail_id ) ) ? wp_get_attachment_image_url( (int) $term_thumbnail_id, 'thumbnail' ) : '';
   
   
        // check if the $term_thumnail_url and the $dealer_url are not empty then the rest is HTML 
         if ( ! empty( $term_thumbnail_url ) && ! empty( $dealer_url ) ) {
         ?>
             <a href="<?php echo esc_url( $dealer_url ); ?>" target="_blank" ><img src="<?php echo esc_url( $term_thumbnail_url ); ?>" ></a>
         <?php
         }
    }
   

It's better to use the termmeta table instead of options table for the dealer URL field too.