Desarrollo de una tienda online con WooCommerce y Storefront E-Book

Jhon Jairo Rincón

• Herausgeber: Marcombo
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Spanisch
• Veröffentlichungsjahr: 2023

Seitenzahl: 167

Beschreibung

WooCommerce es la plataforma para el comercio electrónico (e-commerce) más utilizada en todo el mundo. El 43 % de las páginas web están hechas con WordPress y, entre ellas, el 21 % de las tiendas online están realizadas con WooCommerce. Si quiere aprender a desarrollar sus propias tiendas online personalizadas a través de WooCommerce y evolucionar como desarrollador de WordPress, ha llegado al libro indicado. Gracias a su lectura sabrá cómo crear productos y asignarles categorías, imágenes, precios, descuentos, inventario y medidas, entre otros. Además, será capaz de crear nuevos bloques para maquetar el frontend de su tienda online, así como de maquetar y personalizar la plantilla de Storefront y el plugin de WooCommerce, y de programar funciones para WooCommerce. Asimismo, extenderá funciones existentes añadiendo código a los ganchos de acción de WooCommerce y aprenderá a: ·Crear proyectos en Laragon utilizando VirtualHost. ·Utilizar SASS para estructurar mejor el CSS. ·Realizar consultas Ajax para crear bloques editables. ·Distinguir lo qué son los endpoints y crear nuevas páginas para el panel de administración de los clientes. Este libro está escrito por Jhon Jairo Rincón, desarrollador de PHP y especialista en el desarrollo de plugins y temas personalizados para WordPress. Jhon pone a su disposición toda su experiencia en WordPress y WooCommerce para que pueda desarrollar con éxito y de forma profesional sus propias tiendas online.

Leseprobe

Desarrollo de una tienda online con WooCommerce y Storefront

© 2023 Jhon Jairo Rincón

Primera edición, 2023

© 2023 MARCOMBO, S. L.

www.marcombo.com

Diseño de cubierta: ENEDENÚ DISEÑO GRÁFICO

Maquetación: Artemio Naiza

Corrección: Héctor Tarancón

Directora de producción: M.a Rosa Castillo

Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra

ISBN del libro en papel: 978-84-267-3612-3

ISBN del libro electrónico: 978-84-267-3697-0

Producción del ePub: booqlab

Lo que aprenderás al leer este libro

A continuación, veremos cómo desarrollar una tienda online con WooCommerce y Storefront y lo que aprenderán las personas que han adquirido este libro:

• Aprenderán a desarrollar sus propios temas utilizando Storefront de WooCommerce.

• Aprenderán a modificar el código de Storefront para maquetar un nuevo tema.

• Conocerán y utilizarán los ganchos de acción y de filtro más importantes para el desarrollo y la maquetación del tema.

• Aprenderán a programar bloques personalizados desde el panel de administración de WordPress.

• Aprenderán a utilizar y conocerán algunos de los ganchos de acción de WooCommerce para realizar modificaciones en los productos de la tienda online.

• Aprenderán a programar funciones para añadir usuarios con el rol de cliente en WooCommerce.

• Aprenderán a modificar y añadir nuevas opciones al Panel de administración de Mi cuenta.

• Aprenderán a subir el proyecto a un servidor remoto y configurar los sistemas de pago de la tienda.

Todo el contenido de este libro se encuentra en formato vídeo, estos recursos están disponibles en www.marcombo.info con el código WCS23

Contenido

MÓDULO 1

Introducción

1.1. Lo que aprenderás en este curso

1.2. ¿Qué es WooCommerce?

1.3. Instalando Laragon en nuestro equipo

1.4. Instalando WampServer

1.5. Instalando WordPress en nuestro servidor local Laragon

1.6. Creando un VirtualHost en WampServer para el proyecto weko

MÓDULO 2

Instalando Storefront y WooCommerce

2.1. Instalando el tema Storefront en la carpeta themes

2.2. Instalando WooCommerce para editar el template

2.3. Analizando los archivos del Storefront

MÓDULO 3

Maquetando el header y el footer

3.1. Instalando Sass para la maquetación

3.2. Editando el header para crear el menú

3.3. Creando las páginas del menú y ajustando el diseño responsive

3.4. Instalando PHP 8.0 y 8.1 en Laragon y WampServer

3.5. Creando el background animate para el menú

3.6. Editando las columnas del footer

3.7. Creando las páginas para el footer

3.8. Creando el diseño de cabecera de las páginas

MÓDULO 4

Maquetación y programación de la página de inicio

4.1. Creando el bloque de servicios para la página de inicio

4.2. Creando el menú de opciones del carrusel y del bloque de servicios

4.3. Creando la página de configuración para el carrusel

4.4. Utilizando el marco multimedia para seleccionar las imágenes del carrusel

4.5. Almacenando las imágenes del carrusel con la API options

4.6. Creando el Ajax para almacenar los cambios del carrusel

4.7. Mostrando las imágenes del carrusel en el frontend

4.8. Creando la página de ajustes para el bloque de servicios

4.9. Creando el método Ajax para actualizar los datos de los servicios

4.10. Mostrando los cambios en el bloque servicios del frontend

MÓDULO 5

Introducción a la página de productos e importación masiva CSV

5.1. Creando los productos para la tienda

5.2. Importando los productos desde el CSV

5.3. Editando los bloques del frontend

5.4. Añadiendo productos a las páginas de nuestro E-Commerce

MÓDULO 6

Maquetación del blog y programación de funciones para las imágenes

6.1. Añadiendo publicaciones para el blog

6.2. Editando la página del blog de Storefront

6.3. Modificando el DOM para añadir clases con JavaScript

6.4. Añadiendo el valor de los atributos para las imágenes del blog

MÓDULO 7

Maquetación de los bloques de productos de WooCommerce

7.1. Maquetando el bloque de productos de WooCommerce I

7.2. Maquetando el bloque de productos de WooCommerce II

7.3. Maquetando el bloque de categorías de WooCommerce

7.4. Optimizando el menú y reescribiendo el archivo header.php

7.5. Probable error que se puede producir al reescribir el header

7.6. Maquetando los bloques de productos de WooCommerce

7.7. Maquetando el bloque de productos relacionados

MÓDULO 8

Maquetación de la página del carrito, el widget cart y la barra de búsqueda

8.1. Hooks para la página del carrito de WooCommerce

8.2. Maquetando la página del carrito de WooCommerce

8.3. Creando una propiedad en Sass para los estilos de los productos

8.4. Maquetando el widget shopping cart de WooCommerce

8.5. Maquetando la página del resultado de búsqueda

MÓDULO 9

Optimizando la cabecera y maquetando la página de categorías

9.1. Optimizando el menú en la vista móvil

9.2. Programando el top-header de las páginas de nuestra tienda

9.3. Maquetando el menú para señalizar la página seleccionada

9.4. Programando y maquetando la página de categorías

MÓDULO 10

Maquetando las páginas de mi cuenta y la página de pago

10.1. Programando y maquetando la página My Account (I)

10.2. Programando y maquetando la página My Account (II)

10.3. Programando y maquetando la página My Account (III)

10.4. Insertar usuarios desde el código con el rol de cliente

10.5. Añadiendo nuevas páginas al menú My Account

10.6. Programando el menú para mostrar iconos de mi cuenta y checkout

10.7. Recomendaciones de Storefront

MÓDULO 11

Pasando el proyecto a producción y configurando los métodos de pago

11.1. Pasando el proyecto weko de local a remoto

11.2. Configuración del sistema de servicios Jetpack de WooCommerce

11.3. Configurando los ajustes generales de WooCommerce

11.4. Configurando los ajustes de productos de WooCommerce

11.5. Configurando los ajustes de impuestos de WooCommerce

11.6. Configurando los ajustes de envío de WooCommerce

11.7. Configuración de los métodos de pago de WooCommerce

11.8. Configuración y actualización del estado de los pedidos

11.9. Configuración de cuentas de correo y privacidad

11.10. Recursos del libro

MÓDULO 1

INTRODUCCIÓN

1.1. Lo que aprenderás en este curso

WooCommerce es la plataforma para E-Commerce más utilizada en todo el mundo, el 43 % de todos los sitios web del mundo están hechos con WordPress y el 21 % de todas las tiendas online están hechas con WooCommerce. En este curso aprenderás desde cómo instalar WooCommerce hasta programar y maquetar una tienda virtual 100 % funcional. También aprenderás a programar nuevas funciones o extender las funciones existentes para WooCommerce y Storefront.

En este curso también aprenderás a:

• Crear productos, asignar categorías, imágenes, precios, descuentos, inventario, medidas y mucho más.

• Crear nuevos bloques para maquetar el frontend de tu tienda online.

• Maquetar y personalizar la plantilla de Storefront.

• Maquetar y personalizar el plugin de WooCommerce.

• Programar funciones para WooCommerce.

• Extender funciones existentes añadiendo código a los ganchos de acción de WooCommerce.

• Conocerás los ganchos de acción y de filtro más utilizados en Storefront.

• Aprenderás a crear proyectos en Laragon utilizando VirtualHost.

• Aprenderás a utilizar SASS para estructurar mejor el CSS.

• Aprenderás a realizar consultas Ajax para crear bloques editables.

• Aprenderás lo que son los endpoins y crearás nuevas paginas para el panel de administración de los clientes.

Si conoces WordPress y quieres aprender a crear tiendas online de forma profesional este curso es para ti, en él conocerás a fondo el código para crear funciones personalizadas y maquetar tus propios temas utilizando como base la estructura de Storefront de WooCommerce.

WooCommerce y Storefront son el software base para construir tiendas online, al finalizar el curso habrás aprendido a programar y personalizar WooCommerce.

1.2. ¿Qué es WooCommerce?

WooCommerce es un plugin de WordPress que permite implementar una tienda online totalmente funcional en una web. Este plugin incluye todo lo necesario para empezar a vender en línea: las páginas de la tienda, el carrito, mi cuenta y finalizar la compra, los métodos de pago más utilizados en el mundo (transferencia bancaria, PayPal y Stripe), un sistema para configurar diferentes tipos de impuestos y gastos de envío por zonas, etc.

Por supuesto, también permite la subida de un número ilimitado de productos para su venta, pudiendo añadir su precio, descripciones (una corta y una larga), variaciones del mismo, etc.

En definitiva, WooCommerce es una de las opciones que existen para crear una tienda online.

SITIO WEB OFICIAL WOOCOMMERCE DEVELOPERS

https://woocommerce.com/es-es/developers/

Crearemos una cuenta en WooCommerce para descargar el plugin.

Ahora WooCommerce nos ofrece su template Storefront para crear nuestros propios diseños.

Documentación para desarrolladores WooCommerce (STOREFRONT)

https://woocommerce.com/document/storefront-actions-example-adding-content-featured-product-title/

Documentación de WooCommerce Developers (WOOCOMMERCE)

https://woocommerce.com/documentation/plugins/woocommerce/

1.3. Instalando Laragon en nuestro equipo

1.3.1. ¿Qué es Laragon?

Laragon es una herramienta para equipos técnicos que permite crear diferentes entornos de desarrollo, facilitando el trabajo con las aplicaciones. Al instalar Laragon podremos trabajar con lenguajes del lado del servidor, como Node, Ruby, Python y, por supuesto, PHP.

Para todos los desarrolladores que quieran aumentar su productividad y flujos de trabajo es más que recomendable, ya que Laragon ofrece unas prestaciones que hace que todo sea más sencillo y rápido a la hora de crear entornos de trabajo, su configuración es rápida y, además, es gratuito.

En el siguiente vídeo veremos cómo instalar Laragon.

https://youtu.be/oA6Ft3eprQ4

1.4. Instalando WampServer

1.4.1. ¿Qué es WampServer?

WampServer es un entorno de desarrollo web para Windows con el que se puede crear aplicaciones web con Apache, PHP y bases de datos MySQL database. También incluye phpMyAdmin y SQLiteManager para manejar tus bases de datos en un plis plas.

1.4.2. Características

Provee a los desarrolladores con los cuatro elementos necesarios para un servidor web: un sistema operativo (Windows), un gestor de bases de datos (MySQL), un software para el servidor web (Apache) y un software de programación script web (PHP, generalmente, Python o Perl), debiendo su nombre a dichas herramientas. Lo mejor de todo es que WampServer es completamente gratuito. Wamp incluye, además de las últimas versiones de Apache, PHP y MySQL, versiones anteriores de las mismas por si se quiere probar en un entorno de desarrollo particular.

1.4.3. Utilidad

El uso de Wamp permite servir páginas HTML a internet, además de poder gestionar datos en ellas. Al mismo tiempo, Wamp proporciona lenguajes de programación para desarrollar aplicaciones web.

A continuación, veremos cómo descargar e instalar WampServer.

https://youtu.be/Xo84fhiTZ6Q

1.5. Instalando WordPress en nuestro servidor local Laragon

Arrancamos Laragon y vamos a Menú->Creación rápida de sitio web y después seleccionamos WordPress.

Llamaremos al proyecto weko.

Una vez se descarga WordPress vamos a revisar la carpeta de Laragon.

C:\laragon\weko

Y allí veremos nuestro WordPress descargado. Ahora probaremos a abrir la URL de nuestro proyecto:

http://weko.test

Para ello en la ventana de Laragon haremos clic donde pone Menú, aquí veremos las opciones www->weko.

Al hacer clic en weko debería iniciarse el proceso de instalación de nuestro WordPress.

Si no se inicia y en lugar de eso nos redirige al phpMyAdmin de WampServer deberemos reiniciar el equipo, pues suele pasar que, al tener los dos servidores locales, se solapan los puertos. La solución es reiniciar el equipo y después iniciar el servidor local con el que vamos a trabajar.

Despues de reiniciar el equipo volveremos a iniciar el servidor de Laragon y a entrar en la URL del proyecto weko:

http://weko

Al abrir el enlace veremos que ahora sí encuentra la URL de nuestro sitio weko, pero nos dice que no se puede conectar a ninguna base de datos. En la ventana de Laragon veremos un botón para Base de Datos, haremos clic aquí y crearemos la base de datosweko.

Ahora actualizaremos la ventana y veremos que sale el asistente de instalación, pero antes de iniciar la instalación abriremos el archivo wp-config.php y modificaremos el prefijo para las tablas de la base de datos de WordPress, pondremos atr_, después de eso guardamos cambios.

Ahora volveremos a nuestra página de instalación de WordPress.

Elegimos el idioma español y continuamos con los datos de instalación.

Ponemos los datos del sitio:

•Título del sitio: weko

•Usuario: Admin

•Contraseña: la sugerida por WordPress

•Correo: aquí pondremos nuestro correo

Una vez rellenemos todos los datos de instalación hacemos clic en Instalar WordPress, ahora ya podemos acceder desde el panel de administración.

IMPORTANTE:

Puede que en algunas ocasiones no haga falta crear la base de datos antes de instalar nuestro WordPress, pues automáticamente Laragon creará la base de datos weko.

Si accedemos al panel de administración y vamos a nuestro sitio veremos la URL amigable que por defecto tiene nuestro proyecto gracias al sistema automático de host virtuales de Laragon.

http://weko.test/

1.6. Creando un VirtualHost en WampServer para el proyecto weko

Ahora crearemos un VirtualHost weko en WampServer e instalaremos WordPress, es importante que reiniciemos nuestro equipo si anteriormente hemos estado trabajando con el servidor de Laragon.

Para configurar e instalar nuestro proyecto de WordPress visualizaremos directamente el vídeo que pertenece a esta clase.

MÓDULO 2

INSTALANDO STOREFRONT Y WOOCOMMERCE

2.1. Instalando el tema Storefront en la carpeta themes

Ahora iremos a la carpeta:

C://laragon/weko/wp-content/themes

Y aquí arrastraremos el zip que descargamos de WooCommerce, lo descomprimimos y vamos a nuestro panel de administración. Ahora seleccionamos el tema Storefront y lo activamos.

Después de esto vamos a abrir la carpeta storefront para ver los archivos.

A continuación veremos cada uno de los archivos y directorios.

2.1.1. assets

Dentro de este directorio encontraremos otros subdirectorios como son css, js, images y fonts. Aquí podríamos poner todos los archivos de la parte pública de nuestro template.

2.1.2. inc

Dentro de este directorio encontraremos los subdirectorios:

•admin: aquí encontraremos archivos para configurar plugins para el tema Storefront.

•customizer

•jetpack

•nux

•woocommerce

2.1.3. languages

Dentro de este directorio tenemos un archivo .pot, con este podremos crear una traducción para nuestro tema.

Después tenemos el archivo functions.php, que será el archivo principal donde se crearán las funciones que se comunicarán con el resto de los archivos del proyecto.

El resto de los archivos serán los que formen parte de la estructura de nuestro template y los iremos viendo uno a uno.

Empezaremos por crear las dos páginas en nuestro panel de administración, estas dos páginas serán inicio y blog, ahora eliminaremos las otras dos páginas que por default se crean con la instalación de WordPress.

En la imagen podemos ver las dos páginas que hemos creado y las que hemos seleccionado para eliminar, que son Página de ejemplo y Política de privacidad, después de eliminar las páginas iremos a Ajustes->Lectura y aquí estableceremos cuáles serán la página de inicio y la página de entrada.

La configuración debería quedar como se ve en la imagen, después de esto hacemos clic en el botón Guardar cambios.

Antes de ajustar el menú iremos a Apariencia->Temas y activaremos el tema Storefront.

Ahora iremos a Apariencia->Menús y crearemos un menú. Lo llamaremos Menú principal y lo asociaremos al menú principal, después haremos clic en Guardar cambios.

Después de esto vamos a la parte izquierda, seleccionamos las páginas blog e inicio y donde pone Ajustes de menú comprobamos que esté seleccionado Menú principal, ahora hacemos clic en Guardar menú.

NOTA:

Recordemos que aquí podemos ajustar el orden de las páginas en el menú, así que pondremos primero la página de inicio y debajo la página del blog y guardaremos los cambios.

Ahora vamos a nuestro frontend, la barra del menú debería ser así:

Ahora vamos a descargar el archivo weko.zip en la siguiente URL:

https://newtheme.eu/woocommerce/weko/weko.zip

Después de descargarlo copiaremos el archivo weko.zip y lo pegaremos en la raíz del template Storefront. Tras esto extraeremos el archivo, al descomprimirlo nos encontraremos con la siguiente estructura de archivos:

Esta estructura de archivos es en la que nos apoyaremos para programar nuevas funciones y maquetar nuestros propios temas basados en Storefront. Lo que haremos será copiar todos estos archivos y ponerlos en la raíz del storefront.

Después de esto haremos un include en el archivo functions.php principal del theme Storefront para incluir el archivo functions_weko.php.

include 'functions_weko.php';

Veremos que en cuanto hacemos el include y actualizamos, el frontend cambia un poco y la página de inicio es distinta.

2.2. Instalando WooCommerce para editar el template

Ahora vamos a utilizar el archivo woocommerce.6.8.2.zip que descargamos anteriormente. Si no lo tenemos, lo podemos descargar directamente en la siguiente URL:

https://newtheme.eu/woocommerce/woocommerce.zip

Una vez descargado vamos a ponerlo dentro del directorio plugins, lo descomprimimos y la carpeta la llamaremos WooCommerce.

Luego vamos a nuestro panel de administración para activar el plugin.

Es muy probable que nos cause algún error al instalarlo y se bloquee el navegador, pero después de unos segundos se solucionará. Esperamos un momento y en cuanto arranque empezamos con la instalación.

2.2.1. Paso 1:

En el paso uno tendremos que rellenar la información acerca de la tienda, haremos clic derecho sobre la página y la pondremos en español.

Aquí escribiremos:

Dirección 1

Aquí pondremos la dirección de la tienda.

Dirección 2

Aquí pondremos otra dirección de la tienda (OPCIONAL).

País

Aquí pondremos el país donde está ubicada la tienda.

Ciudad

Código postal

Correo electrónico:

El correo electrónico de la tienda, pero como no tenemos uno pondremos el nuestro, esto se puede cambiar más adelante.

2.2.2. Paso 2:

En el paso dos haremos check para seleccionar en qué industria opera la tienda online que vamos a crear. Pondremos Moda, ropa y accesorios y también otro, que será Deporte, como veremos en la siguiente imagen.

2.2.3. Paso 3:

En el paso tres deberemos seleccionar el tipo de producto. Aquí elegiremos el que sea más acorde con nuestras necesidades, en este caso será un producto físico, como podemos ver en la siguiente imagen.

2.2.4. Paso 4:

En el cuarto paso nos preguntarán los detalles del negocio. Aquí responderemos que mostraremos de 11 a 100 productos y si vendemos en otro lugar pondremos que no. También haremos check en que estamos montando la tienda para un cliente, justo como veremos en la siguiente imagen.

Después de hacer clic en Continuar saldrá otra ventana en la que nos dirán si queremos agregar funciones comerciales a nuestro sitio. Esta función vendrá activada por defecto, la dejaremos así y hacemos clic en Continuar.

NOTA IMPORTANTE:

Esta última ventana es para añadir complementos como:

• Jetpack

• Woocommerce Payments

• Google Ads

• Facebook

• MailPoet

Una vez instaladas, el usuario final será quien decida si utilizarlas o no. Nuestra función es crear el template y la instalación de WooCommerce es para trabajar la maquetación del template.

2.2.5. Paso 5:

En el paso cinco saldrá la opción de añadir el template. La primera opción que nos ofrece WooCommerce es instalar el tema gratuito Storefront.

Haremos clic aquí en Continuar con mi tema activo. Después de hacer clic volveremos al escritorio y nos pedirá configurar Jetpack, pero esto no lo haremos ahora. Lo dejaremos para el final para ver los paquetes que ofrece Jetpack, todos son de pago y, como he dicho antes, esto ya es para el uso del cliente.

Nosotros desarrollaremos y maquetaremos el tema, con esto ya estaría configurado WooCommerce con nuestro template Storefront.

2.3. Analizando los archivos del Storefront

En la estructura de archivos del Storefront modificaremos algunas funciones, así que para ello es preciso que conozcamos qué hay en cada uno de los archivos más importantes.

2.3.1. Ganchos de acción

En el archivo storefront-template-hooks.php podremos ver todos los ganchos de acción del Storefront.

Este archivo se encuentra dentro de la carpeta o directorio inc.

2.3.2. Funciones y estructura html

En el archivo storefront-template-functions.php podremos modificar algunos aspectos HTML para nuestra plantilla.

Por ejemplo, si queremos modificar algunos aspectos del menú nav, podemos empezar por buscar la función storefront_site_title_or_logo(), que se encuentra en este archivo, y así modificar la barra superior que se encuentra arriba del menú.

Luego tenemos la función storefront_primary_navigation(), aquí podríamos modificar algunos aspectos HTML del menú principal. Si exploramos un poco podremos ver que aquí se puede modificar casi toda la estructura HTML del template Storefront.