Personalizando WooCommerce

Cómo editar nuestra tienda online con código y sin él.

Transcript

1. Personalizando
   WooCommerce
   César Aquino Maximiliano (@cesjam7)
   cesar.pe
   

   View Slide

2. Sobre Mí
   - César J. Aquino Maximiliano
   - 26 años (8 años programando)
   - Trabajo en Orange612 como
   Senior Web Developer
   - Profesor de programación en el
   I.S.T.P. ISMEM
   - Bombero Voluntario (B-105)
   

   View Slide

3. Sobre Mí
   - César J. Aquino Maximiliano
   - 26 años (8 años programando)
   - Trabajo en Orange612 como
   Senior Web Developer
   - Profesor de programación en el
   I.S.T.P. ISMEM
   - Bombero Voluntario (B-105)
   - Padre de un hermoso bebé
   

   View Slide

4. ¿Qué es WooCommerce?
   - Un plugin de WordPress
   - Convierte tu sitio en una tienda online
   - Más de 51 millones de descargas
   - Usado por 28% de todos los e-commerce del
   mundo
   - Super personalizable
   

   View Slide

5. ¿Qué es WooCommerce?
   - Un plugin de WordPress
   - Convierte tu sitio en una tienda online
   - Más de 51 millones de descargas
   - Usado por 28% de todos los e-commerce del
   mundo
   - Super personalizable
   

   View Slide

6. Personalizando sin código
   

   View Slide

7. Plantilla: Storefront
   https://woocommerce.com/storefront/
   

   View Slide

8. Apariencia > Personalizar
   http://tusitio.com/wp-admin/customize.php
   1. Aviso en la tienda: Activar y
   desactivar mensaje
   2. Catálogo de producto: Mostrar
   categorías o sólo productos en el
   catálogo, orden y cantidad por
   fila
   3. Imágenes de producto:
   Tamaño de imágenes, recorte de
   miniatura
   4. Finalizar compra: Elegir qué
   campos son obligatorios,
   políticas de privacidad, términos
   y condiciones
   

   View Slide

9. Muchos plugins
   letsgodev.com - codecanyon.net - woocommerce.com/product-category/woocommerce-extensions/
   

   View Slide

10. Personalizando con código
    

    View Slide

11. View Slide

12. Plantilla personalizada
    https://codex.wordpress.org/The_Loop
    

    View Slide

13. Plantilla personalizada
    https://codex.wordpress.org/Function_Reference/wp_head
    https://codex.wordpress.org/Function_Reference/wp_footer
    No olviden wp_head() y wp_footer()
    

    View Slide

14. Modificar estructuras y estilos
    https://github.com/woocommerce/woocommerce/tree/master/templates
    

    View Slide

15. Usando hooks y filters
    https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
    Agregando un campo extra en el checkout
    

    View Slide

16. Usando funciones propias de WooCommerce
    https://docs.woocommerce.com/wc-apidocs/class-WooCommerce.html
    Listar los items del carrito de compras
    

    View Slide

17. Mucho código!!!!
    

    View Slide

18. Qué debo aprender para ser un
    WooCommerce Developer
    - Aprender HTML, CSS y si se puede JS
    - Saber PHP básico
    - Tener nociones de desarrollo de plantillas WP
    - Estructura de archivos
    - Hooks y filters
    

    View Slide

19. Material de ayuda
    - Codex (Documentación de WordPress)
    - Documentación de WooCommerce
    - Cómo ser un WooCommerce Developer
    - Curso online de WooCommerce (Devcode)
    - Comunidad WP Perú (Lima - Cusco - Trujillo)
    

    View Slide

20. View Slide

21. Elementor - WooCommerce Builder
    https://elementor.com/introducing-woocommerce-builder/
    

    View Slide

22. WC()->gracias;
    César Aquino Maximiliano
    Web: cesar.pe
    Email: cesar7492@gmail.com
    Twitter: twitter.com/cesjam7
    Linkedin: www.linkedin.com/in/cesjam7
    Instagram: instagram.com/cesjam7
    GitHub: github.com/cesjam7
    Diapositivas: speakerdeck.com/cesjam7
    

    View Slide