Desarrollo de una tienda online con WooCommerce y Storefront

Descripción

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.

AUTORES

Jhon Jairo Rincón

Es 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.

CONTENIDO

MÓDULO 1
Introducción ……………………………………………………. 11
1.1. Lo que aprenderás en este curso………………….. 11
1.2. ¿Qué es WooCommerce? …………………………… 12
1.3. Instalando Laragon en nuestro equipo …………. 15
1.4. Instalando WampServer …………………………….. 16
1.5. Instalando WordPress en nuestro servidor local
Laragon ………………………………………………………….. 17
1.6. Creando un VirtualHost en WampServer para el
proyecto weko ………………………………………………… 22

MÓDULO 2
Instalando Storefront y WooCommerce ……………… 23
2.1. Instalando el tema Storefront en la carpeta
themes …………………………………………………………… 23
2.2. Instalando WooCommerce para editar el
template ………………………………………………………… 28
2.3. Analizando los archivos del Storefront …………. 35

MÓDULO 3
Maquetando el header y el footer ……………………… 37
3.1. Instalando Sass para la maquetación ……………. 37
3.2. Editando el header para crear el menú ………… 39
3.3. Creando las páginas del menú y ajustando el
diseño responsive ……………………………………………. 49
3.4. Instalando PHP 8.0 y 8.1 en Laragon y
WampServer …………………………………………………… 54
3.5. Creando el background animate para el menú
………………………………………………………………………. 56
3.6. Editando las columnas del footer ………………… 57
3.7. Creando las páginas para el footer ………………. 61
3.8. Creando el diseño de cabecera de las páginas . 67

MÓDULO 4
Maquetación y programación de la página de inicio
………………………………………………………………………. 73
4.1. Creando el bloque de servicios para la página de
inicio ……………………………………………………………… 73
4.2. Creando el menú de opciones del carrusel y del
bloque de servicios ………………………………………….. 78
4.3. Creando la página de configuración para el
carrusel ………………………………………………………….. 87
4.4. Utilizando el marco multimedia para seleccionar
las imágenes del carrusel ………………………………….. 93
4.5. Almacenando las imágenes del carrusel con la API
options …………………………………………………………. 101
4.6. Creando el Ajax para almacenar los cambios del
carrusel ………………………………………………………… 103
4.7. Mostrando las imágenes del carrusel en el
frontend ……………………………………………………….. 111
4.8. Creando la página de ajustes para el bloque de
servicios ……………………………………………………….. 113
4.9. Creando el método Ajax para actualizar los datos
de los servicios ………………………………………………. 118
4.10. Mostrando los cambios en el bloque servicios
del frontend ………………………………………………….. 125

MÓDULO 5
Introducción a la página de productos e importación
masiva CSV ……………………………………………………. 129
5.1. Creando los productos para la tienda …………. 129
5.2. Importando los productos desde el CSV ……… 147
5.3. Editando los bloques del frontend ……………… 148
5.4. Añadiendo productos a las páginas de nuestro E-
Commerce …………………………………………………….. 150

MÓDULO 6
Maquetación del blog y programación de funciones
para las imágenes ………………………………………….. 153
6.1. Añadiendo publicaciones para el blog ………… 153
6.2. Editando la página del blog de Storefront …… 155
6.3. Modificando el DOM para añadir clases con
JavaScript ……………………………………………………… 163
6.4. Añadiendo el valor de los atributos para las
imágenes del blog ………………………………………….. 167

MÓDULO 7
Maquetación de los bloques de productos de
WooCommerce ……………………………………………… 173
7.1. Maquetando el bloque de productos de
WooCommerce I ……………………………………………. 173
7.2. Maquetando el bloque de productos de
WooCommerce II …………………………………………… 176
7.3. Maquetando el bloque de categorías de
WooCommerce ……………………………………………… 184
7.4. Optimizando el menú y reescribiendo el archivo
header.php …………………………………………………… 189
7.5. Probable error que se puede producir al
reescribir el header ………………………………………… 193
7.6. Maquetando los bloques de productos de
WooCommerce ……………………………………………… 193
7.7. Maquetando el bloque de productos relacionados
…………………………………………………………………….. 200

MÓDULO 8
Maquetación de la página del carrito, el widget cart y
la barra de búsqueda ……………………………………….. 205
8.1. Hooks para la página del carrito de
WooCommerce ……………………………………………… 205
8.2. Maquetando la página del carrito de
WooCommerce ……………………………………………… 215
8.3. Creando una propiedad en Sass para los estilos
de los productos ………………………………………………… 230
8.4. Maquetando el widget shopping cart de
WooCommerce ……………………………………………… 234
8.5. Maquetando la página del resultado de búsqueda
…………………………………………………………………….. 238

MÓDULO 9
Optimizando la cabecera y maquetando la página de
categorías …………………………………………………………. 243
9.1. Optimizando el menú en la vista móvil ……….. 243
9.2. Programando el top-header de las páginas de
nuestra tienda ……………………………………………….. 245
9.3. Maquetando el menú para señalizar la página
seleccionada …………………………………………………. 248
9.4. Programando y maquetando la página de
categorías …………………………………………………….. 251

MÓDULO 10
Maquetando las páginas de mi cuenta y la página de
pago …………………………………………………………….. 255
10.1. Programando y maquetando la página My
Account (I) ……………………………………………………. 255
10.2. Programando y maquetando la página My
Account (II) ……………………………………………………. 257
10.3. Programando y maquetando la página My
Account (III) …………………………………………………… 261
10.4. Insertar usuarios desde el código con el rol de
cliente ………………………………………………………….. 265
10.5. Añadiendo nuevas páginas al menú My Account
…………………………………………………………………….. 271
10.6. Programando el menú para mostrar iconos de
mi cuenta y checkout …………………………………………. 276
10.7. Recomendaciones de Storefront ……………… 280

MÓDULO 11
Pasando el proyecto a producción y configurando los
métodos de pago …………………………………………… 283
11.1. Pasando el proyecto weko de local a remoto 283
11.2. Configuración del sistema de servicios Jetpack
de WooCommerce …………………………………………. 289
11.3. Configurando los ajustes generales de
WooCommerce ……………………………………………… 292
11.4. Configurando los ajustes de productos de
WooCommerce ……………………………………………… 293
11.5. Configurando los ajustes de impuestos de
WooCommerce ……………………………………………… 297
11.6. Configurando los ajustes de envío de
WooCommerce ……………………………………………… 301
11.7. Configuración de los métodos de pago de
WooCommerce ……………………………………………… 311
11.8. Configuración y actualización del estado de los
pedidos …………………………………………………………….. 322
11.9. Configuración de cuentas de correo y privacidad
…………………………………………………………………….. 324
11.10. Recursos del libro …………………………………. 326