$30 off During Our Annual Pro Sale. View Details »

Personalizando WooCommerce

Personalizando WooCommerce

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

César J. Aquino Maximiliano

October 06, 2018
Tweet

More Decks by César J. Aquino Maximiliano

Other Decks in Programming

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: [email protected]
    Twitter: twitter.com/cesjam7
    Linkedin: www.linkedin.com/in/cesjam7
    Instagram: instagram.com/cesjam7
    GitHub: github.com/cesjam7
    Diapositivas: speakerdeck.com/cesjam7

    View Slide