Mostrar Miniaturas y Enlaces de Categorías en WooCommerce

3 jun 2015, 00:25:56
Vistas: 34.1K
Votos: 7

Me gustaría mostrar mis categorías con una miniatura en WooCommerce. Puedo listar los términos hijos como enlaces, pero me gustaría agregar contenido adicional. He agregado el código a continuación, el cual uso para mostrar los términos hijos de "product_cat" como enlaces en mi plantilla home-page.php. Pero también me gustaría agregar la imagen de la categoría. Realmente agradecería la ayuda, ¡GRACIAS!

<?php

$taxonomyName = "product_cat";
//Esto obtiene solo los términos de la capa superior. Esto se hace estableciendo el padre en 0.
$parent_terms = get_terms($taxonomyName, array('parent' => 0, 'orderby' => 'slug', 'hide_empty' => false));   
echo '<ul>';
foreach ($parent_terms as $pterm) {
    //Obtener los términos hijos
    $terms = get_terms($taxonomyName, array('parent' => $pterm->term_id, 'orderby' => 'slug', 'hide_empty' => false));
    foreach ($terms as $term) {

        echo '<li><a href="' . get_term_link( $term->name, $taxonomyName ) . '">' . $term->name . '</a></li>';  
    }
}
echo '</ul>';


?>
0
Todas las respuestas a la pregunta 3
0

He realizado algunas personalizaciones. Esto te ayudará a mostrar imágenes de categorías padres e hijas. Posteriormente podrás personalizar este código según tus necesidades.

    $taxonomyName = "product_cat";
// Esto obtiene solo términos de nivel superior. Se hace estableciendo parent en 0.  
    $parent_terms = get_terms($taxonomyName, array('parent' => 0, 'orderby' => 'slug', 'hide_empty' => false));

    echo '<ul>';
    foreach ($parent_terms as $pterm) {

        // mostrar categorías padre
        echo '<li><a href="' . get_term_link($pterm->name, $taxonomyName) . '">' . $pterm->name . '</a></li>';

        $thumbnail_id = get_woocommerce_term_meta($pterm->term_id, 'thumbnail_id', true);
        // obtener la URL de la imagen para la categoría padre
        $image = wp_get_attachment_url($thumbnail_id);
        // imprimir el HTML de la IMG para la categoría padre
        echo "<img src='{$image}' alt='' width='400' height='400' />";

        // Obtener los términos hijos
        $terms = get_terms($taxonomyName, array('parent' => $pterm->term_id, 'orderby' => 'slug', 'hide_empty' => false));
        foreach ($terms as $term) {

            echo '<li><a href="' . get_term_link($term->name, $taxonomyName) . '">' . $term->name . '</a></li>';
            $thumbnail_id = get_woocommerce_term_meta($pterm->term_id, 'thumbnail_id', true);
            // obtener la URL de la imagen para la categoría hija
            $image = wp_get_attachment_url($thumbnail_id);
            // imprimir el HTML de la IMG para la categoría hija
            echo "<img src='{$image}' alt='' width='400' height='400' />";
        }
    }
    echo '</ul>';

Déjame saber si cumple con tus requerimientos.

26 jun 2015 07:18:44
0

Hola @Wisdmlabs Gracias por tu ayuda. He encontrado que esto funciona muy bien por si alguien más se pregunta cómo hacerlo.

$taxonomyName = "product_cat";
$prod_categories = get_terms($taxonomyName, array(
    'orderby'=> 'nombre',
    'order' => 'ASC',
    'hide_empty' => 1
));  

foreach( $prod_categories as $prod_cat ) :
    if ( $prod_cat->parent != 0 )
        continue;
    $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
    $cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
    $term_link = get_term_link( $prod_cat, 'product_cat' );
    ?>

    <img src="<?php echo $cat_thumb_url; ?>" alt="Miniatura de categoría <?php echo $prod_cat->name; ?>" title="Miniatura de <?php echo $prod_cat->name; ?>" /> 
    <a class="button" href="<?php echo $term_link; ?>"> <?php echo $prod_cat->name; ?> </a> 
    <?php endforeach; 
wp_reset_query(); ?>
26 jun 2015 17:03:24
0

Para optimizar aún más la respuesta de @Wisdmlabs mencionada anteriormente, reemplaza esta línea

$cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );

con

$cat_thumb_url = wp_get_attachment_image_src( $cat_thumb_id, 'thumbnail-size' )[0]; // Cambiar al tamaño de miniatura deseado

De esta manera, las imágenes se recortan al tamaño adecuado en el servidor para reducir la carga de ancho de banda.

1 dic 2016 16:20:24