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!