You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesi贸n a prueba de IA

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

0 D铆as
11 Hrs
10 Min
6 Seg

Personalizando la lista de productos.

8/12
Resources

Contributions 4

Questions 4

Sort by:

Want to see more contributions, questions and answers from the community?

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