No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Personalizando la lista de productos.

8/12
Recursos

Aportes 4

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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%;
  }
}
*/