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!