Gracias a este snippet podrás mostrar las categorías de producto de WooCommerce donde quieras gracias a un shortcode. Se visualizarán en formato rejilla con las imágenes de cada categoría.
Mostrar las categorías de producto de WooCommerce donde quieras
En este caso lo vamos a hacer en dos fases:
1 – Añadir código CSS (En Apariencia – Personalizar – CSS)
Copia y pega este CSS:
ul.product-cats li.zoomimg { list-style: none; overflow: hidden; margin-left: 0; margin-bottom: 4.236em; text-align: center; position: relative; display: inline-block; padding: 0px 5px 0px 5px; } li.zoomimg a h2 { color: #000; font-weight: bold; } ul.product-cats li img { margin: 0 auto; } @media screen and (min-width:768px) { ul.product-cats { margin-left: 0; clear: both; } ul.product-cats li { width: 22.529425%; float: left; margin-right: 2.882353%; } ul.product-cats li:nth-of-type(4) { margin-right: 0; } }
2 – Añadir el Snippet
// Shortcode para mostrar el listado de categorías de productos con imagen if ( in_array( 'woocommerce/woocommerce.php', get_option( 'active_plugins' ) ) ){ add_shortcode( 'show_products_categories_grid', 'render_products_categories_grid' ); function render_products_categories_grid( $atts ){ $categories_grid_html = ''; $grid_categories_atts = shortcode_atts( array( 'categories' => '', ), $atts ); $grid_categories_atts[ 'categories' ] = !empty( $grid_categories_atts[ 'categories' ] )? explode( ',' , $grid_categories_atts[ 'categories' ] ) : ' '; $grid_categories_atts[ 'categories' ] = !empty( $grid_categories_atts[ 'categories' ] )? array_map( 'trim' , $grid_categories_atts[ 'categories' ] ) : ''; $terms = get_terms( 'product_cat', array( 'slug' => $grid_categories_atts[ 'categories' ] ) ); if ( $terms ) { ob_start(); ?> <ul class="product-cats"> <?php foreach ( $terms as $term ) : ?> <?php if ( empty( $grid_categories_atts[ 'categories' ] ) || in_array( $term->slug, $grid_categories_atts[ 'categories' ] ) ) :?> <li class="category zoomimg"> <a href="<?php echo esc_url( get_term_link( $term ) ); ?>" class="<?php echo $term->slug; ?>"> <?php woocommerce_subcategory_thumbnail( $term ); ?> <h2><?php echo $term->name; ?></h2> </a> </li> <?php endif; ?> <?php endforeach; ?> </ul> <?php $categories_grid_html = ob_get_contents(); ob_end_clean(); } return $categories_grid_html; } }
Si quieres seleccionar que categorías visualizar puedes usar el parámetro “categories” seguido de el/los slugs de las categorías a visualizar. Para saber el slug de una categoría de producto, entra en “Productos > Categorías” y fíjate en la columna “Slugs” de la tabla con el listado de categorías.
Ejemplo:
[show_products_categories_grid categories=”gorras, mecheros, tazas, boligrafos”]