Mostrar categorías principales de WooCommerce Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4

Mostrar categorías principales de WooCommerce

Listado de Guías

Actualmente, el elemento Lista de categorías de Oxygen no puede mostrar solo las categorías principales de WooCommerce. Sin embargo, hay una solución simple que utiliza el elemento Code Block de Oxygen

Añadir un Code-Block y en la sección PHP/HTML añadir el código abajo propuesto.
Por supuesto que puedes añadir tus própias clases, sustituir los ul y li por divs, etc...

¡ Código Copiado !
<?php
$terms = get_terms(['taxonomy' => 'product_cat', 'hide_empty' => true, 'parent' => 0]);

if ($terms) { ?>
    <div class="oxy-woo-product-categories oxy-woo-element">
        <div class="woocommerce">
            <ul class="products">
                <?php
                foreach ($terms as $term) {
                    $thumbnail_id = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true);
                    $image = wp_get_attachment_url($thumbnail_id);
                    $srcset = wp_get_attachment_image_srcset($thumbnail_id, array(
                        300,
                        300,
                    ));
                    if (empty($image)) {
                        $image = '/wp-content/uploads/woocommerce-placeholder-300x300.png';
                    }
                    $cat_name = $term->name;
                    $cat_url = get_term_link($term->term_id, 'product_cat');
                ?>
                    <li class="product-category product first">
                        <a href="<?php echo $cat_url; ?>">
                            <img src="<?php echo $image; ?>" srcset="<?php echo esc_attr($srcset); ?>" alt="<?php echo $cat_name; ?>" width="300" height="300">
                            <h2 class="woocommerce-loop-category__title">
                                <?php echo $cat_name; ?>
                            </h2>
                        </a>
                    </li>
                <?php
                }
                ?>
            </ul>
        </div>
    </div>

<?php
}
?>

El resultado sería el mostrado en la imagen siguiente.

img-7

Como siempre esperamos tus comentarios y por supuesto si tienes alguna duda o necesitas ayuda puedes contactar por nuestro grupo de Telegram o dejando un comentario.

Nos vemos en la próxima. 👌

0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios

OTRAS GUIAS

CookieConsent v3

La nueva versión de CoockieConsent de Orest Bida, en este caso la V3, que ofrece mayores funcionalidades y mayor capacidad de personalización.

Leer más
Lighthouse: 5 consejos sencillos

Google Lighthouse es una herramienta gratuita que ayuda a analizar la calidad de las páginas web. Audita la accesibilidad, el rendimiento y el SEO, además de recomendar cambios para su mejora.

Leer más
Mas Iconos con Vainilla Font

Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.

Leer más