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.
Preparando nuestro proyecto
Los Themes y WooCommerce
Instalando WooCommerce y StoreFront
Child Themes
Convirtiendo nuestro theme en child theme de StoreFront
Extendiendo nuestro Theme
Aprovechando las funcionalidades de StoreFront
Adaptando nuestro theme base
Remplazando las vistas de WooCommerces desde nuestro theme
Personalizando la lista de productos.
Personalizando el bot贸n de A帽adir a carrito
Agregando elementos a nuestro producto
Ajustes finales
Finalizando nuestro proyecto
Cierre del curso
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Contributions 4
Questions 4
Sort by:
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%;
}
}
*/
Want to see more contributions, questions and answers from the community?