I am currently using this snippet to show "product category image"(display's my product brand) on WooCommerce single product page. On certain browsers(Google Chrome and Firefox) it is displaying the correct cat image (which shows and works well) while also displaying the parent categories image which have no image(not needed) so they display as blank image icon and border. Note: using this snippet in single-product.php file starting line 30 or 31.
do_action( 'woocommerce_before_main_content' );
add_action( 'woocommerce_before_single_product', 'custom_add_cat_image', 10 );
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ){
$category_name = $term->name;
$category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
echo '<img src="'.$image.'" alt="" width="250" height="150" />';
}
After checking the element name with the browser's inspect tool I noticed that the reason I am seeing this is because it is also calling the other images ..how ever they return this img src="unknown" or "".
Would like it if the snippet would only return 1 image, and not the images that have no src or unknown src. Working on optimization and the following CSS is not the best option, how ever worked.
.woocommerce img[src=""] { display:none; }
Might not be that significant load difference but still better than loading for no reason. Any help would be appreciated.
I tried using if statements but cant get the code right. Still, would prefer just loading one image. Tried this with no success.
do_action( 'woocommerce_before_main_content' );
add_action( 'woocommerce_before_single_product', 'bbloomer_add_cat_image', 10 );
$terms = get_the_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ){
$category_name = $term->name;
$category_thumbnail = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
$image = wp_get_attachment_url($category_thumbnail);
if ('<img src="'.$image.'">') {
echo '<img src=""'.$image.'" alt="" width="250" height="150" />';
} else { echo '<img src= (style="display:none")>';
}
Aucun commentaire:
Enregistrer un commentaire