Pequeños cambios

Hoy vamos a ver como insertar las categorías de nuestros porductos en la home del tema Outfitter Pro de StudioPress.

Vamos a añadir un nuevo widget en la Front Page 1 con un shortcode de WooCommerce que nos muestre las categorías.

Empecemos; el primer paso es ir a Apariencia/Personalizar/Widgets/Front Page 1 y añadir un widget de html. Añadiremos un shortcode de WooCommerce que nos muestra las categorías de la tienda:

[product_categories number="4"]

En este caso hemos limitado el número de categorías a 4.

Una vez añadido este widget las categorías ya se mostrarán el la home:

Luego vamos a tener que ajustar los estilos de la plantilla para que estas 4 categorías se muestren en una sola fila ocupando cada una de ellas el 25% del ancho.

También ajustaremos los mediaqueries para mantener una buena visualización en todos los dispositivos.

Os dejo el CSS para aplicar todos estos cambios:

.front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(6n+1), .front-page-1	.woocommerce ul.products li.product.masonry-brick {
    width: 25%;
}

@media only screen and (max-width: 1023px) {
	.js .front-page-1	 .masonry-brick:nth-of-type(3n+1), .js .front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(3n+1), .woocommerce.full-width-content div.product div.images.woocommerce-product-gallery{
    width: 25%;
}
	
}
@media only screen and (max-width: 600px) {
	.js .front-page-1	 .masonry-brick:nth-of-type(3n+1), .js .front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(3n+1), .woocommerce.full-width-content div.product div.images.woocommerce-product-gallery, .front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(6n+1), .front-page-1	.woocommerce ul.products li.product.masonry-brick{
    width: 100%;
}
	
}

En el vídeo os lo explico con todo detalle:

Finalmente he añadido un poco más de CSS para que los títulos de las categorías se muestren igual que los títulos de los productos:

/*título categorias*/

.woocommerce ul.products li.product .woocommerce-loop-category__title {
	background: #ffffff;
	color: #000;
	left: 0;
	padding: 10px 30px;
	margin-right: 70px;
	position: absolute;
	text-align: left;
	text-decoration: none;
	top: 20px;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title:before {
	background-color: #548200;
	bottom: -2px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	-webkit-transform: scaleX(0);
	transform:         scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition:         all 0.3s ease-in-out 0s;
	visibility: hidden;
	width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title:hover:before {
	-webkit-transform: scaleX(1);
	transform:         scaleX(1);
	visibility: visible;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition:         all 0.3s ease-in-out 0s;
	visibility: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
	font-size: 16px;
	font-size: 1.6rem;
}

.woocommerce ul.products li.product:focus .woocommerce-loop-category__title,
.woocommerce ul.products li.product.focused .woocommerce-loop-category__title,
.woocommerce ul.products li.product:hover .woocommerce-loop-category__title{
	opacity: 1;
	visibility: visible;
}

No olvidéis guardar los cambios!