Personalizando la lista de productos.

Buena parte de los videos que dicta el profesor tienen un lag que hace dificil seguir lo que hace, eso sin mencionar que no explica por que o para que se hacen algunas modificaciones, copia, pega y modifica sin explicar.

Por partes muy mal manejado el curso, si tu estilo tiene diferencias a lo que hace el profesor. Revisa el repositorio (GitHub) que está en los recursos de la clase y usa el style.css que está en assets/css/style.css

Me gusta el curso pero me es difícil de consentrarme con lo lag que va su grabación de la pantalla o posiblemente sea su pc. Hay momentos que está explicando el buscar archivos, modificar ciertas lineas de codigo y otras cosas que se pierden por el lag. Sería genial que puedan actualizar este curso con una mejor grabación.

Ejemplo: Personalizar vista de un producto

Para personalizar en woocommerce la vista de la lista de productos se debe manipular el archivo content-product de woocommerce, si se usa una plantilla html se debe tener en cuenta los do_action para adaptar para mostrar correctamente el contenido (eliminando los do_action correspondientes)

<li <?php wc_product_class( '', $product ); ?>>
<div class="productos__card">
	<?php do_action( 'woocommerce_before_shop_loop_item_title' );?> 
	<div class="producto__caption">
		<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
		<div class="productos__desc">
			<p class="productos__precio">
				<?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>
			</p>
			<h4 class="productos__titulo">
				<?php do_action( 'woocommerce_shop_loop_item_title' ); ?>
			</h4>
		</div>
		<div class="productos__cart">
			<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
		</div>
	</div>
</div>
</li>

Se debe tener cuidado al adaptar un html debido a que puede que sus clases en css tengan una configuración que cause conflictos con los estilos de woocommerce.

En este caso presenta un problema con la grilla y su versión responsive por lo que solo nos interesa dejar lo correspondiente a la configuración de la imagen:

/* 
.productos__card {
  width: 17%;
  margin-top: 10px;
  margin-bottom: 10px;
}
*/
 
.productos__card img {
  width: 100%;
  height: auto;
  border-radius: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
/* 
@media screen and (min-width: 0px) {
  .productos__card {
    width: 45%;
  }
}
@media screen and (min-width: 700px) {
  .productos__card {
    width: 30%;
  }
}
@media screen and (min-width: 900px) {
  .productos__card {
    width: 17%;
  }
}
*/