Snippet para mostrar las categorías de producto de WooCommerce donde quieras

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”]