Woocommerce – crear shortcode para listar las categorías & incluir imagen destacada

Guardar artículo

En esta guía, exploraremos cómo crear un shortcode personalizado para listar las categorías en tu tienda WooCommerce y luego agregar la imagen destacada de cada categoría usando un ‘walker’ customizado.

Enlistar Categorías

PHP
// ENLISTAR CATEGORIAS:
add_shortcode('list_categories', 'gurvic_list_categories');
function gurvic_list_categories() {
    $args = array(
        'show_option_all'    => '',
        'orderby'            => 'name',
        'order'              => 'ASC',
        'style'              => 'list',
        'show_count'         => 0,
        'hide_empty'         => 1,
        'use_desc_for_title' => 1,
        'parent'             => '',
        'child_of'           => 0,
        'feed'               => '',
        'feed_type'          => '',
        'feed_image'         => '',
        'exclude'            => '',
        'exclude_tree'       => '',
        'include'            => '',
        'hierarchical'       => 1,
        'title_li'           => __( 'Categories' ),
        'show_option_none'   => __( 'No categories' ),
        'number'             => null,
        'echo'               => 0,
        'depth'              => 0,
        'current_category'   => 0,
        'pad_counts'         => 0,
        'taxonomy'           => 'product_cat',
        // Aqui se define el walker customizado:
        'walker'             => new Walker_Category_With_Images()
    );

    $categories_list = wp_list_categories($args);
    return '<ul class="categories-list">' . $categories_list . '</ul>';
}

Walker Customizado para incluir imágenes destacadas por categoría

PHP
// CUSTOM WALKER PARA INCLUIR LAS IMÁGENES DE LAS CATEGORIAS
class Walker_Category_With_Images extends Walker_Category {
    function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
        $cat_name = esc_attr( $category->name );
        $cat_name = apply_filters( 'list_cats', $cat_name, $category );

        // Obtener la imagen de la categoría
        $thumbnail_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
        $feat_img = wp_get_attachment_url( $thumbnail_id );

        // Crear la lista
        $output .= '<li class="cat-item cat-item-' . $category->term_id;

        if ( isset( $args['current_category'] ) && $category->term_id == $args['current_category'] ) {
            $output .= ' current-cat';
        }

        $output .= '">';
        
        // Agregar la imagen de categoría si es que existe
        if ( $feat_img ) {
            $output .= '<img src="' . esc_url( $feat_img ) . '" alt="' . esc_attr( $cat_name ) . '" class="cat-image" />';
        }

        // Agregar el link de la categoría
        $output .= '<a href="' . esc_url( get_term_link( $category ) ) . '" ';
        if ( $args['use_desc_for_title'] == 0 || empty( $category->description ) ) {
            $output .= 'title="' . esc_attr( sprintf( __( 'View all posts in %s' ), $cat_name ) ) . '"';
        } else {
            $output .= 'title="' . esc_attr( strip_tags( apply_filters( 'category_description', $category->description, $category ) ) ) . '"';
        }
        $output .= '>';
        $output .= $cat_name . '</a>';

        if ( !empty( $args['show_count'] ) ) {
            $output .= ' (' . intval( $category->count ) . ')';
        }
        
        $output .= "</li>\n";
    }
}

Ahora, coloca el shortcode [list_categories] en la página que desees visualizar las categorías, recuerda agregar estilos.

Recursos Adicionales

¿Dónde agregar este snippet?

Principiante: agrega el código al archivo functions.php WP Escritorio > Apariencia > Editor de archivos de temas > functions.php de tu tema hijo.

Intermedio: agrega el código mediante un plug-in que permita agregar funciones personalizadas, como WPCode.

Avanzado: crea un plugin

Para más información mira esta artículo sobre cómo implementar código PHP personalizado en WordPress.

Recomendados:

ProveedorAlojamiento & Dominio
Anuncio - Hosting Web de SiteGround - Diseñado para una fácil administración web. Haz clic para saber más.
PluginConstructor Visual
Elementor
PluginOptimización de Velocidad
WP Rocket
PluginSEO
SEOPress WordPress SEO plugin
TemaWordPress & WooCommerce
WordPress Theme: Betheme
PluginSeguridad y Anti-malware
Malcare. WordPress Security
PluginWP Marketplace
Dokan

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *