Widget y personalizador

Progreso de Lección:

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Ahora veremos cómo mejorar WooCommerce y extender sus funciones aún más.

Pero antes vamos a modificar como se ve nuestra tienda y también veremos algunos widgets que WooCommerce trae por defecto.

Lo primero que haremos será modificar nuestro menú principal.

Así que entramos en nuestra área de administración y vamos hacia apariencia, menus.

Crearemos un nuevo menú, damos clic aquí, le colocaremos menú principal y damos clic aquí para crear el menú.

Muy bien, ahora añadiremos las páginas de mi cuenta, finalizar compra, el carrito y la tienda.

Podemos mover los elementos del menú a nuestro gusto, y en mi caso voy a cambiar el nombre de tienda hacia inicio. Y guardamos nuestro nuevo menú.

Ahora modificaremos nuestra plantilla, vamos a entrar en el personalizador.

Desde aquí podremos modificar las opciones de diseño que tiene nuestra plantilla, es muy posible que las opciones que yo tengo aquí sean diferentes en tu caso, ya que estas opciones dependen del desarrollador de tu plantilla.

Pero es desde el personalizador que podrás modificar la apariencia de tu plantilla.

Lo primero que haremos será cambiar el menú, así que entramos en la opción menús y desde ubicación de menús podrás ver aquí los 3 diferentes menús que esta plantilla nos permite tener.

Así que en primary menú seleccionare el menú que hemos creado anteriormente.

Perfecto, ahora regresaremos y lo siguiente que cambiaremos serán los colores, vamos a entrar en la opción colores y desde aquí cambiaremos el color del header hacia un tono azul.

Los links también tendrán un color azul pero un poco más claro.

Y el estado hover tendrá un color azul también.

Lo bueno del personalizador es que nos permite previsualizar los cambios en tiempo real.

Regresemos y entremos a la opción portada estática, y desde aquí seleccionaremos la opción una página estática y seleccionamos tienda.

De esa forma la página de la tienda será siempre la página principal de nuestro sitio web.

Como puedes ver más abajo tenemos muchas otras opciones que podemos configurar, una muy buena opción es añadir nuestro propio call to action.

Podríamos solicitar a los visitantes que se registren en nuestra lista de emails desde este botón y añadir el link hacia nuestra landing page de captura.

Pero todas estas opciones no son de WordPress, son de la plantilla, de modo que la plantilla que te encuentras utilizando tendrá opciones diferentes.

Más adelante te mostrare donde puedes adquirir las mejores las plantillas para tu tienda online.

Por el momento terminaremos de personalizar nuestra tienda hasta aquí, así que damos clic en guardar y publicar.

Y una vez se guarda podremos dar clic en la x para salir del personalizador.

Ahora veremos los widgets que trae WooCommerce desde su instalación.

Para eso entraremos en Widgets.

Desde aquí puedes ver que tenemos varios widgets activados, sin embargo y debido a la configuración de esta plantilla, estos widgets no se muestran en las páginas de la tienda.

Pero los que coloquemos aquí, en store sidebar si se mostrarán en la tienda, el carrito, la página de pago y todas las páginas que tengan que ver con nuestra tienda.

Las zonas para widgets dependen completamente de la plantilla que te encuentras utilizando, en este caso mi plantilla tiene esta característica, que me permite separar los widgets de la tienda con otros widgets que desearíamos mostrar en el blog por ejemplo.

En tu caso es posible que tu plantilla no tenga esta característica o que sea diferente.

Pero lo importante es que WooCommerce viene con varios widgets que podemos utilizar para mostrar información adicional al visitante.

Como puedes ver en nuestra lista de widgets, tenemos varios de ellos que son de WooCommerce.

Contamos por ejemplo con un buscador que únicamente muestra como resultados nuestros productos, vamos a colocarlo en nuestro store sidebar.

También vamos a utilizar el widget del carrito de compra, que mostrará todos los productos que el cliente tiene en su carrito y una opción para iniciar el proceso de compra.

Este otro widget nos ayudará mostrando las categorías de nuestros productos, como puedes ver cuándo colocamos aquí los widgets, podemos modificar sus opciones, cada widget tiene diferentes opciones dependiendo de su función.

El filtro de precios es un widget muy útil para el cliente, este widget le muestra un slider que le permite seleccionar el rango de precios que desea ver, de modo que puede indicar que desea ver solo productos que se encuentren entre 10 a 15 dólares, y al aplicar el filtro nuestra tienda mostrará únicamente los productos que cumplan con esa regla.

El último widget que añadiremos en esta demostración es el de productos vistos recientemente, te invito a que siempre coloques este widget, esto le muestra al cliente una lista de todos los productos que ha visto.

Todos hacemos clic muy fácilmente y nos distraemos mucho, tu cliente puede estar interesado en un producto en particular, pero posiblemente siga buscando, o vea tu blog, tu página de contacto, o incluso puede tener más de un sitio web abierto al mismo tiempo, entonces cuando regrese a tu web podrá recordar cuál producto estaba viendo antes, de esa forma podrá seguir su proceso de compra.

Tenemos más widgets que podemos añadir, te invito a que los veas todos uno por uno para que puedas seleccionar los que deseas añadir a tu zona de widgets.

Ten en mente que no es recomendable añadir demasiados widgets, no deseas distraer a tu comprador cuándo se encuentre decidiendo si desea comprar en tu tienda, mi recomendación sería que añadas de no más de 5 widtes en el sidebar de tu tienda.

Ahora demos un vistazo a nuestra tienda y los widgets que hemos añadido.

Y como puedes ver tenemos aquí todos nuestros widgets.

El carrito en este momento no muestra nada debido a que no hemos añadido ningún producto, pero si entramos en un producto y lo añadimos al carrito, podrás ver que tenemos la opción de ver la página del carrito o ir directamente hacia la caja para hacer el pago.

Mas abajo podemos ver el listado de las categorías, que nos llevará a la lista de productos dentro de esta categoría, y el filtro de precios con el que podemos decidir el rango de precios que deben tener los productos que deseamos ver, y damos clic aquí para aplicar el filtro.

Y el widget de productos vistos recientemente nos muestra una lista de los últimos productos que hemos visto en la tienda, puedes ver que nos muestra el nombre, un miniatura de la imagen principal del producto y el precio. Si el producto tiene un precio en oferta en este momento, también lo podremos ver desde aquí.

La mayoría de plantillas tienen más de una zona en la que podemos añadir widgets, y la plantilla que estamos utilizando no es la excepción.

Así que regresemos a los widgets.

Y como puedes ver tenemos las zonas extras de footer uno, dos y tres.

Vamos a colocar el footer uno otro widget de WooCommerce, colocaremos el de productos mejor valorados, esto mostrará un listado de los productos que han recibido mejores clasificaciones por los compradores.

En el footer dos colocaremos el widget de etiquetas de productos, que mostrará las etiquetas que más utilizamos en nuestros productos.

Y en el footer tres añadiremos el widget productos de WooCommerce, este widget mostrará un listado de productos en base a las opciones que tenemos aquí.

En este caso le indicaré que muestre un listado de los productos destacados.

Esto será un pequeño problema en este momento para nosotros, ya que no tenemos ningún producto destacado, pero lo solucionaremos fácilmente, para ello vamos hacia productos.

Y para marcar un producto como destacado lo único que debes hacer es dar clic en esta estrella, de esta forma podemos rápidamente marcar todos los productos que deseamos destacar.

Muy bien, ahora regresamos a nuestra tienda.

Y en la parte de abajo encontraremos los nuevos widgets.

De modo que no es necesario colocar todos los widgets en un solo lugar, y podemos jugar con las zonas para widgets que nuestra plantilla tiene disponibles.

Si no estás seguro de cuáles son las zonas para widgets que tiene tu plantilla, entonces debes solicitar soporte al desarrollador, o simplemente añadirles algunos widgets y visualizar tu tienda.

En el siguiente video hablaremos de otra forma en la que podemos mostrar información de WooCommerce con las herramientas que ya trae por defecto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image