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"]
Get The children terms objects
$terms_objects = get_terms(
array(
'taxonomy' => 'product_cat',
'child_of' => 93,
'hide_empty' => false,
)
);
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.