Agregando elementos a nuestro producto

Clase 10 de 12 • Curso de Creación de Temas para WooCommerce

Clase anteriorSiguiente clase

Leonardo Rios Pineda

student•

No sabia que se podia modificar los svg de esa forma, gracias por el dato 🤝

Leonardo Rios Pineda

student•

Hola! les dejo al link al Icono.

Andrés Vega

student•

En el link del icono también pueden probar la siguiente funciín y evitar hacer echo

<?php the_permalink() ?>

Diego Castro

student•

Hola! Hice este curso hace un par de meses y lo que más me ha costado es registrar nuevos usuarios. He leído la documentación referente a eso y he intentado registrar nuevos usuarios 1) desbloqueando el formulario para registro de usuarios desde el administrador de woocommerce 2) buscando los métodos del objeto WC_Data_Customer() y WC_Customer() y 3) Utilizando hooks para insertar código personalizado y al final resulta que: cuando inserta datos para registrar un nuevo usuario la página se queda cargando infinito y nunca termina de recargar, pero en el administrador se guarda el usuario. Ayuda

Ermilo Joel Dorantes Uc

student•

Saludos, con todo gusto te puedo ayudar con ese problema que tienes en WooCommerce. Ando en Discord todo el día, si te das una vuelta por el canal de #Networking seguro me encuentras.

Diego Castro

student•

Algo que me ayudó mucho es que puedes crear pages personalizadas para login y registroy con las funciona wp_signon() y wp_insert_user() puedes insertar nuevos usuarios al sistema. Puedes ver el curso de creación de Plugins de esta ruta y complementarlo con este.

Andrés Felipe Patiño Vallejo

student•

Usando el enlace de wa .me podemos usar el botón el desktop como en mobile? lo consulto por qué personalmente usaba 2 botones diferentes, en desktop la url de web .whatsapp .com y en mobile api .whatsapp .com de esta manera

No estoy seguro si usaba algún método obsoleto.

Iris Valentina Barrios

student•

¡Hola Platzinauta 👋! puedes usar el https://api.whatsapp.com/send?phone=123456789&text=Platzi para ambas situaciones, tanto en móvil como en Web :D

Andrés Felipe Patiño Vallejo

student•

Hola! mira que no me funcionaba en ese entonces, la verdad hoy por hoy no estoy seguro de ello, no lo he probado.

Usaba el método planteado ya que en mobile no me enviaba directo al chat de whatsapp, me generaba un error.

Pero gracias, lo tendré presente para una próxima oportunidad 😊

Franklin Peñafiel

student•

Me hubiera gustado ver cómo lo integran a ajax, pero al ver cómo modifica los hooks, me da a entender que puedo usar esas opciones para usarlo con ajax.

Julián Andrés Loaiza Ospina

student•

Agregar funcionalidad

Para este caso particular como ejemplo funcionalidad a agregar tendremos un botón de “compartir en whatsapp” que se enganchara justo después del carrito de compras

functions.php

function plz_ws_share(){
    global $product;
    ?>
    <a href="https://wa.me/5491112345678?text=producto: <?php echo $product->get_permalink()?>" target = "_blank" class = "productos__ws">
        <img src="<?php echo get_stylesheet_directory_uri();?>/assets/img/icon-whatsapp.svg" alt="compartir">
    </a>
    <?php
}

add_action("woocommerce_after_shop_loop_item","plz_ws_share",11);

y ahora le agregamos estilos en style.css o assets/css/styles.css

.productos__ws img {
  width: 30px;
  border-radius: 0px;
}

Por último debido a que la imagen es un .svg se puede modificar directamente el color modificando su contenido en path fill

path fill="#ACD9B2"

function plz_ws_share(){
    global $product;
    ?>
    <a href="https://wa.me/5491112345678?text=producto: <?php echo $product->get_permalink()?>" target = "_blank" class = "productos__ws">
        <img src="<?php echo get_stylesheet_directory_uri();?>/assets/img/icon-whatsapp.svg" alt="compartir">
    </a>
    <?php
}

add_action("woocommerce_after_shop_loop_item","plz_ws_share",11);

Agregando elementos a nuestro producto

Preparando nuestro proyecto

Configuración de StormFront y WooCommerce para eCommerce

Instalación de Storefront y WooCommerce en WordPress

Creación y uso de temas hijo en WordPress

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