• Ir a navegación principal
  • Ir al contenido principal

CASUALWEBS

ANA PASCUAL WEB ESTUDIO

  • Proyectos
  • Tiendas online
  • Hola
  • Blog
  • Contacto

Outfitter Pro – Añadir categorías de producto en la home con shortcodes

20 diciembre, 2017 by apascual001

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.

Tema Outfitter con categorías de producto en la home
Tema Outfitter con categorías de producto en la home

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:

Tema Outfitter con shortcode WooCommerce en Front Page 1
Tema Outfitter con shortcode WooCommerce en Front Page 1

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!

Archivado en:Outfitter pro, Pequeños cambios, WooCommerce

© 2022 · Aviso legal · Política de privacidad

Esta web solo instalará cookies analíticas y de publicidad si lo aceptas. Puedes informarte más sobre qué cookies estamos utilizando en los ajustes Ajustes Aceptar Rechazar Más información
Política de cookies

Resumen de privacidad

Esta web solo instalará cookies analíticas y de publicidad comportamiento si usted lo acepta. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles. Puede encontrar más información en nuestra política de cookies
Cookies estrictamente necesarias
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies analíticas
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares
GUARDAR Y ACEPTAR