Como integrar ChatGPT en VSCode

Hola a todos, ChatGPT se est谩 convirtiendo en una revoluci贸n, no hay d铆a que no amanezcamos con una noticia nueva sobre inteligencia artificial, y sin duda ChatGPT es la mas popular en el momento de escribir estas lineas.

No sabemos a ciencia cierta si ChatGPT terminar谩 quit谩ndonos el trabajo, pero lo que s铆 podemos asegurar es que a d铆a de hoy puede resultar una gran ayuda a los que nos dedicamos al mundo de la programaci贸n. Es por ello que hoy vamos a ver c贸mo podemos integrar ChatGPT directamente en Visual Studio Code para que nos ayude en nuestro trabajo diario.

Existen varios plugins que nos permiten integrar ChatGPT en VSCode, nosotros vamos a probar uno de los m谩s populares, para ello vamos desde VSCode pulsamos en el icono de extensiones:

En la ventana que nos abre vamos a escribir chatgpt @popular para que nos ordene los resultados por popularidad, vemos que salen muchos resultados, nosotros hoy vamos a probar code GPT, ya que el anterior en popularidad lo marca en estos momentos como deprecated, por lo tanto vamos a pulsar en el bot贸n install para instalar code GPT:

En unos segundos tendremos instalado el plugin Code GPT:

El siguiente paso que tenemos que dar es obtener la api key desde OpenAI, para ello tenemos que ir a este enlace y loguearnos con nuestra cuenta, si no est谩s dado de alta tendr谩s que hacerlo, una vez dentro pulsaremos en el bot贸n “+ Create a new secret key” para obtener la clave:


Copiamos la clave generada:


Ahora en VSCode presionamos las teclas “command+shift+p” para abrir la paleta de comandos de VSCode y escribimos “CodeGPT: set API key” :

Seleccionamos la opci贸n que nos da haciendo clic en ella y nos aparecer谩 un campo para que introduzcamos en el la api key que hemos generado, pegamos la api key u pulsamos enter.

Ahora, si reiniciamos VSCode, ya tendremos integrado ChatGPT en nuestro editor.

Vamos ha cambiar el idioma en las opciones Code GPT para que nos de los resultados en espa帽ol, para ello vamos a Code –> Preferences –> Settings:

Escribimos Code GPT la ventana que nos abre y abajo en el selector de idioma elegimos Spanish.

Si lo necesitas este es el lugar donde puede cambiar algunas opciones de Code GPT, de momento vamos a dejar el resto de par谩metros como vienen por defecto.

Ahora vamos a ver qu茅 puede hacer Code GPT por nosotros en VS Code.

Vamos a crear un archivo nuevo, por ejemplo un archivo html al que llamaremos pruebagpt.html
Veremos que ahora tenemos un icono nuevo con el que podemos interactuar con CodeGPT, si pulsamos en el icono nos abrir谩 un cuadro de dialogo donde podemos hacer consultas y peticiones de manera similar a lo que hacemos en chat GPT:

Vamos a decirle que nos cree una pagina html con css y javascript incorporado que nos muestre los primeros 10 n煤meros de la secuencia de Fibonacci.

Vemos que el solo nos genera todo el c贸digo:

Ahora solo tenemos que copiar y pegar el c贸digo que nos ha generado.

Esto es solo un simple ejemplo, pero el potencial que tiene es grand铆simo, hay que tener en cuenta que a veces puede generar c贸digo err贸neo, pero guiandole el mismo ir谩 corrigiendo los errores que pueda haber.

Y ah铆 entramos en la siguiente posibilidad que nos da Code GPT, si marcamos una secci贸n del c贸digo y pulsamos en bot贸n derecho del rat贸n nos ofrece una serie de opciones muy interesantes:

Como vemos tenemos varias opciones que son las siguiente:

  1. Ask CodeGPT: Esta opci贸n permite hacer preguntas a Code GPT sobre el c贸digo seleccionado. Puedes escribir una pregunta sobre el c贸digo y Code GPT intentar谩 proporcionar una respuesta 煤til.
  2. Compila & Run CodeGPT: Esta opci贸n compila y ejecuta el c贸digo seleccionado utilizando Code GPT. Si el c贸digo es v谩lido, Code GPT ejecutar谩 el c贸digo y mostrar谩 la salida en la consola.
  3. Explain CodeGPT: Esta opci贸n proporciona una explicaci贸n detallada del c贸digo seleccionado. Code GPT puede proporcionar explicaciones sobre la sintaxis, las estructuras de datos y los algoritmos utilizados en el c贸digo.
  4. Refactor CodeGPT: Esta opci贸n sugiere formas de mejorar el c贸digo seleccionado. Code GPT puede proporcionar sugerencias sobre c贸mo simplificar el c贸digo, hacerlo m谩s legible o mejorar su rendimiento.
  5. Document CodeGPT: Esta opci贸n ayuda a documentar el c贸digo seleccionado. Code GPT puede proporcionar sugerencias sobre c贸mo agregar comentarios 煤tiles, explicar la funci贸n del c贸digo y documentar los par谩metros y valores de retorno de las funciones.
  6. Find Problems CodeGPT: Esta opci贸n busca problemas en el c贸digo seleccionado. Code GPT puede buscar errores de sintaxis, problemas de estilo y otros problemas comunes en el c贸digo.
  7. Unit Test CodeGPT: Esta opci贸n ayuda a crear pruebas unitarias para el c贸digo seleccionado. Code GPT puede sugerir pruebas 煤tiles para verificar que el c贸digo funcione correctamente y detectar posibles errores.

En resumen, estas opciones ofrecidas por Code GPT son herramientas 煤tiles para ayudarte a entender, mejorar y documentar el c贸digo de una manera m谩s eficiente y efectiva.

Te recomiendo que pruebes todas las opciones y compruebes lo utiles que pueden ser en tu d铆a a d铆a como programador.

Espero que est谩 informaci贸n te haya sido 煤til y le saques todo el partido al potencial que tiene ChatGPT en VSCode con el plugin CodeGPT.

Tutorial: Crear tienda online con WooCommerce – parte 11 – Productos.

Vamos a continuar aprendiendo como crear productos en nuestra tienda online con Woocommerce

Tabla de contenidos

Categor铆as del producto

Antes de a帽adir productos a nuestra tienda vamos a definir las categor铆as de los productos.

Para ello en el men煤 de la barra lateral de la izquierda seleccionamos Categor铆as dentro de la secci贸n Productos:

Como podemos observar en esta secci贸n est谩n ya creadas las categor铆as de los productos de ejemplo.
No nos interesan estas categor铆as por lo que lo primero que vamos a hacer es eliminarlas para posteriormente crear nuestras propias categor铆as.

Para eliminar las categor铆as que ya est谩n creadas vamos a marcarlas todas marcando la casilla que se encuentra en la cabecera del listado a la izquierda:

Una vez seleccionadas todas las categor铆as desplegamos el selector donde pone 鈥Acciones en lote鈥 y seleccionamos 鈥Borrar鈥:

Seguidamente pulsamos el bot贸n 鈥Aplicar鈥:

Por defecto existe una categor铆a que se llama 鈥淪in categorizar鈥 que no se puede eliminar, esta categor铆a se asignar谩 autom谩ticamente a los productos sin categor铆a. No nos interesa tener productos sin categorizar por lo que vamos a crear nuestras propias categor铆as.

En esta tienda de ejemplo vamos a vender ropa de hogar y va a tener 3 categor铆as principales que van a ser Ba帽o, Dormitorio, y Hogar. Si est谩s creando tu propia tienda deber谩s a帽adir las categor铆as que se ajusten a los productos que est谩s vendiendo.

Vamos a comenzar a帽adiendo una categor铆a, por ejemplo vamos a a帽adir la categor铆a 

Ba帽o, para ello simplemente escribimos Ba帽o en el campo Nombre, el campo Slug se genera autom谩ticamente a partir del nombre por lo que no es necesario que escribamos nada:

Como es una categor铆a principal en 鈥Categor铆a padre鈥 dejamos seleccionado 鈥淣inguna鈥.

En el campo Descripci贸n podemos a帽adir un texto que describa la categor铆a, podr铆amos poner algo as铆 como 鈥淓l mejor textil para nuestro ba帽o鈥, en este caso vamos a dejarlo vac铆o.

El campo  鈥淭ipo de visualizaci贸n鈥 lo vamos a dejar en 鈥淧or defecto鈥.

Podemos a帽adir una im谩gen para la categor铆a, para ello tenemos que pinchar en el bot贸n 鈥淪ubir / A帽adir imagen鈥 y se nos abrir谩 la galer铆a de im谩genes donde podemos subir una imagen desde nuestro ordenador. De momento vamos a dejarla sin imagen, posteriormente podremos editarla y a帽adir una imagen si lo deseamos.

Por lo tanto de momento para hacerlo de forma r谩pida solo a帽adiremos el nombre de la categor铆a y pulsamos el bot贸n el bot贸n 鈥淎帽adir nueva categor铆a鈥 que se encuentra en la parte de abajo al final de la p谩gina:

Se habr谩 a帽adido la categor铆a Ba帽o al listado de categor铆as.

Ahora vamos ha realizar la misma operaci贸n con Dormitorio, escribimos 鈥淒ormitorio鈥 en el campo nombre y pulsamos en el bot贸n 鈥淎帽adir nueva categor铆a鈥, y lo mismo para la categor铆a Hogar, escribimos 鈥淗ogar鈥 en el campo nombre y pulsamos en el bot贸n 鈥淎帽adir nueva categor铆a鈥.

Ahora ya podremos ver las tres categor铆as principales en el listado de categor铆as:

Subcategor铆as:

Cada categor铆a a su vez puede tener subcategor铆as, por ejemplo dentro de la categor铆a Ba帽o vamos a a帽adir otras tres categor铆as, Albornoces, Cortinas de ba帽o y Toallas.

Para crear una subcategor铆a simplemente creamos una categor铆a y en el campo Categor铆a padre seleccionamos la categor铆a principal.

Creamos por lo tanto la categor铆a 鈥Albornoces鈥, en el campo Categor铆a padre vamos seleccionar 鈥Ba帽o鈥 y pulsamos el bot贸n 鈥A帽adir nueva categor铆a鈥.

Repetimos la operaci贸n a帽adiendo la categor铆a 鈥Cortinas de ba帽o鈥 y 鈥Toallas鈥 seleccionando en ambos casos 鈥Ba帽o鈥 como categor铆a padre.

Vamos a a帽adir las subcategor铆as Almohadas, Edredones y S谩banas que tendr谩n como categor铆a padre Dormitorio, ya sabes como hacerlo, introduce la palabra Almohadas en el campo Nombre, selecciona 鈥Dormitorio鈥 en el campo 鈥Categor铆a padre鈥 y pulsa en el bot贸n 鈥A帽adir nueva categor铆a鈥, realiza la misma operaci贸n para la subcategor铆a 鈥Edredones鈥 y para 鈥S谩banas鈥. 

Por 煤ltimo para finalizar con este ejemplo vamos a a帽adir otras dos subcategor铆as, Cortinas y Mantas que tendr谩n como categor铆a padre 鈥淗ogar鈥.

Ya tenemos creadas todas las categor铆as, recuerda que esto es un ejemplo, si est谩s creando tu propia tienda deber谩s a帽adir las categor铆as que se correspondan con el tipo de productos que vas a vender.

En nuestro ejemplo nos ha quedado una estructura de categor铆as como la siguiente:

Ahora ya estamos preparados para introducir nuestro primer producto.

Eliminar productos

Antes de crear nuestro primer producto lo primero que vamos a hacer es eliminar los productos de muestra que se generaron cuando hicimos la instalaci贸n de Woocommerce, ahora que vamos a introducir nuestros propio productos ya no los vamos a necesitar.

Para ello en la barra de la izquierda seleccionamos Productos y al igual que hicimos con las categor铆as vamos a marcar todos los productos marcando la casilla de la izquierda en la cabecera del listado:

Una vez seleccionados todos los productos en el desplegable 鈥Acciones en lote鈥 seleccionamos 鈥Mover a la papelera鈥 y pulsamos en el bot贸n 鈥Aplicar鈥:

Crear producto simple

Vamos a empezar creando un producto simple, los productos simples son aquellos que no tienen variaciones, es decir, que solo existe un modelo del mismo, no podemos seleccionar talla, color, etc.

Para este ejemplo de producto simple vamos a introducir una cortina de ba帽o.

Para ello en la barra de la izquierda seleccionamos Productos 鈫捖 A帽adir nuevo:

Nombre y descripci贸n

En el campo Nombre del producto vamos a introducir el nombre del producto, por ejemplo, 鈥淐ortina ba帽o de patos鈥  

Despu茅s tenemos un editor de texto donde podemos incluir la descripci贸n detallada del producto, esta ser铆a la descripci贸n 鈥渓arga鈥 del producto, aqu铆 a帽adiremos toda la informaci贸n que queramos transmitir al cliente sobre nuestro producto.

Despu茅s hay un cuadro donde meteremos los Datos del producto, lo vamos a ver con detenimiento en seguida, pero antes vamos a rellenar la Descripci贸n corta del producto que tenemos justo debajo, est谩 saldr谩 como resumen junto al producto, aqu铆 debemos ser breves y poner los detalles principales del producto:

Datos del producto

General

Ahora vamos a introducir los 鈥Datos del producto鈥.

En este caso, en el primer desplegable dejamos seleccionado 鈥淧roducto simple鈥

Al lado vemos que podemos seleccionar dos casillas: 鈥Virtual鈥 y 鈥Descargable鈥.

Los productos virtuales son productos no f铆sicos, por ejemplo cuando vendemos un servicio. Los productos virtuales, al no ser f铆sicos, no tendr谩n proceso de env铆o.

Un producto descargable como su propio nombre indica es un producto que podemos descargar, por ejemplo un documento pdf. 

En este ejemplo estamos vendiendo un producto f铆sico, por lo tanto vamos a dejar las dos casillas sin marcar.

Lo siguiente que nos encontramos es el precio del producto.

Tenemos dos campos, en el campo 鈥淧recio normal鈥 introduciremos el precio del producto.

Si queremos poner en oferta el producto con un precio rebajado en el campo 鈥淧recio rebajado鈥 introduciremos el precio rebajado, esto har谩 que se muestre el precio normal tachado y el precio rebajado. Si hacemos clic en 鈥淗orario鈥 podemos definir entre que fechas queremos que est茅 el producto rebajado, si no a帽adimos nada el producto estar谩 rebajado hasta que indiquemos lo contrario.

Vamos a poner por ejemplo un precio de 10 euros y vamos a decirle que tenga un precio rebajado de 6 euros, en 鈥淗orario鈥 no vamos a poner nada para que est茅 rebajado hasta nueva orden.

En el campo 鈥Estado del impuesto鈥 vamos a dejar seleccionado 鈥Imponible鈥 ya que nuestros productos llevan IVA.

En 鈥Clase de impuesto鈥 dejamos seleccionado 鈥Est谩ndar鈥. En caso de ser un producto con IVA reducido o lo seleccionaremos aqu铆.

Inventario

Si vendemos productos f铆sicos podemos gestionar el inventario del producto, es decir las existencias que tenemos. Para ello en la secci贸n Datos de producto vamos a seleccionar la pesta帽a Inventario.

Lo primero que tenemos es el campo SKU. SKU es el identificador 煤nico de los productos que vendemos, no puede haber dos productos con la misma referencia. Si ya tienes definido una referencia que identifica a tus productos puedes utilizarla, si no deber谩s pensar que estructura utilizar谩s para asignar a cada producto un c贸digo diferente que lo identifique. Puedes utilizar letras, n煤meros y guiones, lo ideal es que utilices alg煤n sistema que te ayude a identificar el producto.

Por ejemplo para esta cortina le voy a dar el identificativo cor-001.

Despu茅s marcamos la casilla 鈥Activa la gesti贸n de inventario a nivel del producto:

En el campo 鈥Cantidad del inventario鈥 pondremos las unidades que nos quedan del producto. Por ejemplo, vamos a suponer que nos quedan 20 unidades. Cuando alguien compre este producto se actualizar谩 autom谩ticamente la cantidad.

En el campo 鈥驴Permitir reservas?鈥 podemos seleccionar 鈥淧ermitir鈥 en el caso de que puedas reponer r谩pido, para no perder ventas en caso de quedarnos sin stock, si no es mejor no complicarse y dejarlo en 鈥淣o permitir鈥. Yo en este caso lo voy a dejar en 鈥淣o permitir鈥.

El siguiente campo es 鈥Umbral de pocas existencias鈥, te llegar谩 un aviso cuando queden pocas unidades, aqu铆 le indicamos por debajo de cuantas unidades queremos que nos avise de que quedan pocas existencias, as铆 podremos estar atentos para reponer existencias.

Por ejemplo, voy a poner que me avise cuando queden menos de 10 existencias.

La casilla 鈥淰endido individualmente鈥, en el caso de vender productos f铆sicos lo normal es dejarlo sin marcar, ya que nos interesa que puedan comprar m谩s de un producto en cada pedido. Puede tener sentido marcarlo en caso de vender servicios. En este caso lo dejamos sin marcar.

En este ejemplo de producto la pesta帽a inventario nos quedar铆a de esta manera:

Env铆o

En la pesta帽a env铆o podemos definir el peso y las dimensiones del producto en caso de que eso suponga un coste diferente de env铆o.

Normalmente no definiremos un coste de env铆o individual para cada producto sino que los definiremos de manera global. 

Si vamos a aplicar un precio adicional por art铆culo voluminoso en clase de env铆o  seleccionamos el tipo de env铆o para art铆culos voluminosos. De momento no tenemos definidos los tipos de env铆o, los definiremos m谩s tarde desde los ajustes de Woocommerce.

Como vamos a aplicar a este producto una tarifa de env铆o gen茅rico no vamos a poner nada en estos campos y tendr谩 el coste de env铆o gen茅rico que definiremos luego, as铆 que lo dejamos como est谩.聽

Productos relacionados

Si hay productos relacionados con el que estamos vendiendo que nos interese que se muestran como sugerencia en la misma pantalla del producto podemos aqu铆 indicar qu茅 productos queremos que se muestren.

Tenemos dos opciones: 

  • Ventas dirigidas: Son productos similares al que estamos editando, que nos puede interesar sugerir, por ejemplo mostrar un producto similar pero de una gama superior. Para a帽adirlo escribiremos en la caja el producto que queremos que aparezca relacionado y nos mostrar谩 sugerencias que coincidan, seleccionaremos los que nos interesen. Todav铆a no tenemos ning煤n producto creado por lo que esto lo tendremos que hacer despu茅s, cuando ya tengamos algunos productos creados.
  • Venta cruzada: Son productos que complementan al producto que est谩s comprando, por ejemplo si el producto que estamos vendiendo es un tel茅fono m贸vil podemos mostrar fundas para el m贸vil y protectores de pantalla. Estos productos relacionados de venta cruzada aparecen en la p谩gina del carrito y no en la del producto.

Los atributos los veremos cuando veamos los productos variables.

Avanzado

En avanzado podemos definir una nota de compra para el cliente, establecer una posici贸n de orden personalizada y activar las valoraciones para que nuestros clientes puedan dejar una valoraci贸n del producto que compran.

Si no te interesa que los clientes puedan dejar valoraciones lo dejaremos sin marcar.

Categor铆as del producto

A la derecha encontraremos una caja con las categor铆as de producto que hayamos creado previamente, seleccionaremos la que corresponda con el producto que estamos creando, antes de nada desmarcamos 鈥淪in categorizar鈥 y para este ejemplo voy a seleccionar la categor铆a principal 鈥Ba帽o鈥 y la subcategor铆a 鈥Cortinas de ba帽o鈥.

Etiquetas del producto

Las etiquetas ayudan a organizar los productos de tu tienda. Normalmente un producto pertenece a una categor铆a principal y puede pertenecer a una categor铆a secundaria, sin embargo puede tener varias etiquetas, a su vez  una misma etiqueta se puede aplicar a productos que pertenecen a categor铆as diferentes. Las etiquetas pueden hacer referencia a estilos (cl谩sico, moderno, …) , temporadas (invierno, verano), el material del que est谩 hecho (lana, algod贸n, 鈥), el fabricante…, o cualquier t茅rmino descriptivo relacionado con el producto.

Conviene no abusar de las etiquetas y utilizar solo aquellas que realmente tengan sentido.

A nivel de posicionamiento de tu web en los buscadores puede ser contraproducente el abuso de etiquetas ya que Google lo puede considerar como contenido duplicado y penalizar tu web a la hora de posicionarla en las b煤squedas.

Hay plugins que te pueden ayudar a que google no indexe tus etiquetas, si en este momento no tienes claro qu茅 etiquetas utilizar no te preocupes, puedes no poner ninguna, y siempre puedes editar m谩s adelante el producto y a帽adir alguna si lo crees conveniente.

Imagen del producto

Para a帽adir la imagen del producto pulsamos en 鈥Establecer imagen del producto鈥 y subiremos una nueva imagen a la galer铆a:

Se abrir谩 una ventana con la galer铆a de im谩genes, aparecer谩n las que utilizamos en los productos de prueba, estas las podemos borrar por que no las vamos a utilizar.

Para subir la imagen de nuestro producto seleccionamos la pesta帽a 鈥Subir archivos鈥, y despu茅s pulsamos el bot贸n 鈥Seleccionar archivos鈥.

Navegamos hasta la imagen de nuestro producto y la subimos. Una vez subida la imagen pulsamos en el bot贸n establecer imagen del producto:

Galer铆a del producto

Si tienes m谩s de una imagen de producto aqu铆 a帽adiremos el resto de las im谩genes.Pulsamos en 鈥A帽adir im谩genes a la galer铆a del producto鈥:

Si no hemos subido previamente las im谩genes debemos seleccionar la pesta帽a 鈥Subir archivos鈥:

Y arrastramos las im谩genes o pulsamos en el bot贸n 鈥淪eleccionar archivos鈥, una vez subidos y/o seleccionadas las im谩genes que queremos a帽adir a la galer铆a de nuestro producto pulsaremos en el bot贸n 鈥A帽adir a la galer铆a鈥:

Ya tenemos nuestro primer producto listo. Vamos a ver como ha quedado pulsando en el bot贸n 鈥淰ista previa鈥 que se encuentra en el panel de Publicar de la parte superior derecha:

Podemos ver como se muestra nuestro producto en estos momentos:

A la izquierda podemos ver las im谩genes del producto con la posibilidad de hacer zoom. como hemos puesto un precio rebajado vemos que se muestra el cartel 鈥溌ferta!鈥, despu茅s de 鈥淐ortina ba帽o de patos鈥 aparece el precio inicial tachado y el precio final.

Debajo aparece la descripci贸n corta y el bot贸n de a帽adir al carrito seguido del bot贸n de PayPal. Toda esta funcionalidad nos la da Woocommerce sin tener que escribir una sola l铆nea de c贸digo.

M谩s abajo veremos las categor铆as y las etiquetas si hemos a帽adido, y finalmente la descripci贸n completa del producto.

Veremos c贸mo podemos cambiar el aspecto visual m谩s adelante.

Publicar producto

Una vez que comprobamos que todo es correcto volvemos a la pesta帽a donde est谩bamos editando nuestro producto y pulsamos el bot贸n 鈥淧ublicar鈥 para que definitivamente el producto est茅 disponible en nuestra tienda.

En este post hemos aprendido a crear productos simples, en el pr贸ximos post aprenderemos como crear productos variables.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 10 – Ajustes de Woocommerce – Correos electr贸nicos.

Vamos a continuar con el tutorial para aprender a configurar los ajustes necesarios de Woocommerce para nuestra tienda, hoy vamos a ver la pesta帽a correos electr贸nicos.

En la pesta帽a Correos electr贸nicos de las opciones de Woocomerce vamos a configurar todo lo relacionado con los correos que manda WooCommerce, a que cuentas llegar谩n los correos de aviso de Woocommerce, qu茅 dise帽o tendr谩n, etc.

Tabla de contenidos

Avisos por correo electr贸nico

Como podemos observar tenemos una serie de avisos por correo electr贸nico que podemos configurar, algunos van dirigidos al cliente y otros al gestor de la tienda online, por defecto vendr谩 como destinatario la cuenta de correo electr贸nico asociada a tu usuario de WordPress, si deseamos que estos correos lleguen a otra cuenta de correo lo definiremos aqu铆.

Veamos los posible emails que Woocommerce env铆a:

Nuevo pedido

Cuando un cliente realice un pedido se enviar谩 un email de aviso a la(s) persona(s) que van a gestionar los pedidos, por lo tanto aqu铆 debemos definir los correos electr贸nicos de estas personas, si vas a ser t煤 mismo quien lo va a gestionar ser谩 tu correo el茅ctronico el que figurar谩 como destinatario.聽Para hacer cambios en la configuraci贸n de los emails de nuevo pedido pulsaremos en el bot贸n 鈥淕estionar鈥:

Tras pulsar el bot贸n 鈥淕estionar鈥 veremos el siguiente formulario:

La primera opci贸n que tenemos es la de 鈥Activar/Desactivar鈥 este aviso por correo electr贸nico. Por defecto est谩 activado y en principio es interesante que nos avise cuando alguien realiza una compra as铆 que lo vamos a dejar activado.

En el campo 鈥Destinatario(s)鈥 vamos a introducir el correo el茅ctronico de la persona o personas que queremos que reciban este aviso, si vamos a introducir m谩s de un correo electr贸nico los escribiremos separados por comas.

El campo 鈥Asunto鈥 es el asunto del correo que se enviar谩. Podemos usar algunas variables que se modificar谩n en funci贸n de cada pedido, estas variables se escriben entre llaves y se sustituir谩n por el valor que representan en funci贸n al pedido, las variables que podemos usar son:

  • {site_title} – Aparecer谩 el nombre de la web.
  • {order_number} – Aparecer谩 el ID del pedido para que podamos identificarlo.
  • {order_date} – Aparecer谩 la fecha del pedido, en funci贸n del momento en el que se haya realizado el pedido.

El campo 鈥Encabezado de Correo Electr贸nico鈥 es el t铆tulo dentro del correo. Podemos utilizar las mismas variables que el campo anterior.

El campo 鈥Contenido adicional鈥 es el texto que aparecer谩 debajo del contenido principal del correo electr贸nico, podemos utilizar las mismas variables que en los campos anteriores.

En el campo 鈥淭ipo de correo electr贸nico鈥 el formato en el que se enviar谩n los correos electr贸nicos, lo normal es utilizar el formato HTML.

Despu茅s tenemos dos botones:

  • Copiar archivo al tema: Esto copiar谩 la plantilla del correo al tema que estamos utilizando, pudiendo de esta manera editarla y modificarla a nuestro antojo para personalizar el dise帽o del correo electr贸nico. Para poder modificar la plantilla necesitas saber aunque sea de manera b谩sica PHP. PHP es el lenguaje de programaci贸n en el que est谩 escrito WordPress, el objetivo de este libro es que puedas montar tu tienda online sin necesidad de saber programar, en cualquier caso la plantilla por defecto es lo suficientemente funcional por lo que no me preocuparia en este momento, lo importante es que puedas lanzar tu tienda y m谩s adelante si las cosas te van bien ya tendr谩s tiempo de pulir detalles, bien aprendiendo a hacerlo tu mismo/a o encarg谩ndoselo a un profesional.
  • Ver plantilla: Muestra el c贸digo que contiene la plantilla, como he comentado en el punto anterior no te preocupes si no entiendes el contenido de la plantilla, puedes simplemente usarla tal como est谩.

Por 煤ltimo si hemos modificado algo no debemos olvidarnos de pulsar el bot贸n 鈥Guardar los cambios鈥.聽

Vamos a ver el resto de correos, para ello volvemos al listado de correos pulsando en el bot贸n de volver atr谩s que est谩 arriba del todo:

El resto de correos se configuran de manera similar.

Pedido cancelado

Cuando los pedidos se marquen como cancelados (si previamente estaban marcados como procesando o en espera) se enviar谩 un email de aviso a los correos que seleccionemos aqu铆.

Para hacer cambios en la configuraci贸n de los emails de pedido cancelado pulsaremos en su bot贸n 鈥淕estionar鈥.

Pedido fallido

Cuando los pedidos han sido marcados como fallidos (si estaban previamente como pendientes o en espera) se enviar谩 un email de aviso a los correos que seleccionemos aqu铆.

Para hacer cambios en la configuraci贸n de los emails de pedido fallido pulsaremos en su bot贸n 鈥淕estionar鈥.

Pedido a la espera

Esto es un aviso de pedido enviado a los clientes que contiene los detalles del pedido despu茅s de que un pedido ha sido puesto a la espera.

En este caso el destinatario es el cliente por lo que no tenemos un campo para definir los destinatarios.

El resto de campos podemos dejarlos por defecto.

Procesando tu pedido

Esto es un aviso de pedido que se env铆a al cliente despu茅s del pago con los detalles del pedido.Al igual que el caso anterior el destinatario es el cliente.

Pedido completado

Los avisos de pedido completado se env铆an al cliente cuando el pedido se marca como 芦completado禄 e indican que el pedido ha sido enviado o est谩 listo para recoger.

Pedido reembolsado

Los correos electr贸nicos de los reembolsos 鈥se env铆an a los clientes cuando sus pedidos se reembolsan.

鈥嬧婻ecibo del cliente / Detalles del pedido 

Se pueden enviar recibos por correo electr贸nico a los clientes que contienen la informaci贸n de su pedido y enlaces para realizar el pago. Este env铆o es manual.

Nota para el cliente

Los correos electr贸nicos de las notas de los clientes se env铆an cuando a帽ades una nota a un pedido. El destinatario es el cliente.

Restablecer contrase帽a

Los mensajes para restablecer contrase帽a se env铆an cuando un cliente restablece su contrase帽a. El destinatario es el cliente.

Nueva cuenta

Los mensajes de nueva cuenta son enviados cuando un cliente se registra a trav茅s de las p谩ginas 芦Finalizar compra禄 o 芦Mi cuenta禄.

Ha fallado la identificaci贸n SCA para la renovaci贸n de la suscripci贸n

Enviado al cliente cuando falla una renovaci贸n porque la transacci贸n necesita una verificaci贸n SCA. El correo electr贸nico contiene informaci贸n de la renovaci贸n del pedido y enlaces para el pago.

Es necesaria una acci贸n para el pago de la reserva

Este es un aviso de pedido enviado al cliente una vez que la reserva ha sido completada, pero que necesita pasos adicionales para el pago.

Correo electr贸nico de solicitud de identificaci贸n para el pago

Los correos electr贸nicos de solicitud de identificaci贸n para el pago son enviados al/los destinatario(s) elegido(s) cuando falla un intento de procesar autom谩ticamente un pago de renovaci贸n de suscripci贸n porque la transacci贸n necesita una verificaci贸n SCA, se solicita al cliente que se identifique para el pago y se ha aplicado una regla de reintento para avisar de nuevo al cliente dentro de un determinado per铆odo de tiempo.

En el formulario que aparece al pulsar el bot贸n 鈥Gestionar鈥, en el campo 鈥Destinatario(s)鈥 vamos a introducir el correo el茅ctronico de la persona o personas que queremos que reciban este aviso, si vamos a introducir m谩s de un correo electr贸nico los escribiremos separados por comas. Si no introducimos nada por defecto se enviar谩 al correo del usuario administrador de nuestra web.

En principio estos son los correos que se enviar谩n desde Woocommerce, sin embargo algunos plugins que a帽aden funcionalidades extra a WooCommerce pueden a帽adir otros tipos de correos en esta secci贸n, en cualquier caso la gesti贸n de los mismos ser谩 muy similar.

Integraci贸n

En esta pesta帽a configuraremos la clave API para el servicio de geolocalizaci贸n de MaxMind que utiliza WooCommerce para geolocalizar a los usuarios permitiendo as铆 poder mostrar los precios con los impuestos que correspondan seg煤n el pa铆s desde donde nos visita el cliente.

Si no est谩s usando tablas de impuestos para diferentes pa铆ses ni m茅todos de env铆o diferentes en funci贸n del pa铆s del cliente no necesitar谩s introducir nada en esta pesta帽a, en caso contrario necesitar谩s crearte una cuenta de usuario en el servicio de MaxMind y crear una clave API. Te recomiendo que consultes la documentaci贸n oficial de WooCommerce donde se explican los pasos a seguir para la integraci贸n de la geolocalizaci贸n de maxmind visitando la siguiente direcci贸n web:

https://docs.woocommerce.com/document/integracion-de-geolocalizacion-maxmind/

Avanzado

Por 煤ltimo, en los ajustes de Woocommerce nos encontramos con la pesta帽a Avanzado.

En este apartado podemos seleccionar otras p谩ginas a las creadas por defecto para los diferentes apartados de la tienda (p谩gina de carrito, p谩gina de pago, etc.), tambi茅n podemos configurar las variables de finalizaci贸n de compra, variables de la cuenta, adem谩s podemos configurar una API REST que permitir谩n gestionar la tienda o acceder a informaci贸n de la misma desde aplicaciones externas, y tambi茅n tenemos un apartado para a帽adir WebHooks, etc. Si todo esto te suena a chino no te preocupes, en este punto en el que estamos arrancando nuestra tienda desde cero no vamos a necesitar tocar nada en esta pesta帽a, de hecho es probable que nunca necesites modificar nada aqu铆, por lo tanto de momento simplemente es suficiente con que sepas que existen estas opciones.聽

Ya hemos visto las opciones de configuraci贸n de Woocommerce, en el pr贸ximo post aprenderemos como crear un producto en nuestra tienda.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 9 – Ajustes de Woocommerce – Cuentas y privacidad.

Vamos a continuar con el tutorial para aprender a configurar los ajustes necesarios de Woocommerce para nuestra tienda, hoy vamos a ver la pesta帽a cuentas y privacidad.

En la pesta帽a 鈥淐uentas y privacidad鈥 de los ajustes de Woocommerce vamos a configurar las opciones relacionadas con las cuentas de clientes y la retenci贸n de datos:

Veamos que opciones podemos configurar desde esta secci贸n:

Tabla de contenidos

Pago como invitado

Permite a los clientes hacer pedidos sin tener una cuenta

Si dejamos marcada esta opci贸n los clientes podr谩n hacer pedidos sin necesidad de tener que registrarse. En principio lo recomendable es tener marcada esta opci贸n:

Permite a los clientes acceder a una cuenta existente al finalizar compra

Si marcamos esta opci贸n se mostrar谩 un formulario de inicio de sesi贸n y un mensaje en la p谩gina de pago si el cliente a煤n no ha iniciado sesi贸n.

Es mejor evitar interrupciones en el momento de finalizar la compra as铆 que te recomiendo no activar esta opci贸n. 

Creaci贸n de cuenta

Permite a los clientes crear una cuenta al finalizar compra

Si la marcamos dar谩 al cliente la opci贸n de crear una cuenta durante el proceso de finalizar la compra. En principio la dejaremos sin marcar.

Permite a los clientes crear una cuenta en la p谩gina 芦Mi cuenta禄.

Si la marcamos dar谩 al cliente la opci贸n de crear una cuenta en la p谩gina 鈥淢i cuenta鈥. 

Al crear una cuenta, genera autom谩ticamente para el cliente un nombre de usuario de cuenta seg煤n su nombre, apellido o correo electr贸nico

Si est谩 deshabilitado, habr谩 un cuadro de entrada para que el usuario cree su propio nombre de usuario. En principio lo dejamos marcado para que se genere autom谩ticamente un nombre de usuario.

Al crear una cuenta, crea autom谩ticamente una contrase帽a para la cuenta

Del mismo modo que la opci贸n anterior lo dejamos marcado para que se genere una contrase帽a autom谩ticamente al crear una cuenta.

Solicitudes de borrado de cuenta

Elimina los datos personales de los pedidos cuando se solicite

Si marcamos esta opci贸n y el usuario decide borrar su cuenta, los datos del usuario tambi茅n se eliminar谩n de sus pedidos si pertenecen al usuario que se est谩 borrando.

Aunque no es algo que ocurra con frecuencia te recomiendo activar esta opci贸n para evitar problemas.

Quita acceso a las descargas cuando se solicite

Si no vendes productos descargables no te afecta, en caso contrario si activas esta opci贸n evitar谩s que el usuario pueda acceder a los archivos descargables que haya adquirido una vez haya borrado su cuenta.

Eliminaci贸n de datos personales

Permite la eliminaci贸n por lotes de datos personales de los pedidos

A帽ade una opci贸n a la p谩gina de pedidos para eliminar los datos personales en lote, es decir de varios pedidos a la vez.

En principio no es algo que se utilice demasiado, podemos dejarla sin marcar.

Pol铆tica de privacidad

Esta secci贸n controla la visualizaci贸n de la pol铆tica de privacidad de tu web, deber谩s tener creada la p谩gina de pol铆tica de privacidad.

Pol铆tica de privacidad en el registro

Aqu铆 introducimos el texto sobre la pol铆tica de privacidad de tu tienda que se mostrar谩 en los formularios de registro de la cuenta, en principio el texto que viene por defecto nos puede valer.

Pol铆tica de privacidad al finalizar compra

Aqu铆 introducimos el texto sobre la pol铆tica de privacidad de tu tienda que se mostrar谩 al finalizar la compra. Si no quieres a帽adir nada especial podemos dejar el que viene.

Conservaci贸n de datos personales

En esta secci贸n podemos decidir cu谩nto tiempo queremos guardar los datos del pedido en nuestra tienda. Debes especificar cu谩nto tiempo tu sitio conservar谩 datos en tu pol铆tica de privacidad, considera lo que tiene sentido para las leyes locales, como el GDPR de la Uni贸n Europea: https://woocommerce.com/gdpr/

Para cada opci贸n, ingresamos un n煤mero y elegimos la duraci贸n de d铆as, semanas, meses o a帽os. Si dejamos estas opciones sin definir los datos se conservar谩n indefinidamente. En un inicio podemos dejarlas sin definir, m谩s adelante, en caso de tener muchos usuarios dados de alta podemos definir el tiempo de que queremos conservar los datos. 

En cualquier caso las opciones son las siguientes:

  • Conservar cuentas inactivas: las cuentas inactivas son cuentas que no han iniciado sesi贸n ni han realizado un pedido durante el tiempo especificado.
  • Conservar pedidos pendientes: los pedidos pendientes son no pagados o abandonados y no es necesario que se cumplan.
  • Conservar pedidos fallidos: los pedidos fallidos son no pagados o abandonados y no es necesario que se cumplan.
  • Conservar pedidos cancelados: los pedidos cancelados fueron pedidos cancelados a prop贸sito por el administrador o el cliente, o aquellos en los que se agot贸 el tiempo de espera para el pago.
  • Conservar pedidos completados: los pedidos completados se cumplieron en el pasado.

Por 煤ltimo, como siempre, debemos pulsar en el bot贸n 鈥Guardar cambios鈥.

En el pr贸ximo post seguiremos con los ajustes de Woocommerce configurando la pesta帽a “Correos electr贸nicos”.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 8 – Ajustes de Woocommerce – Pagos.

Vamos a continuar con el tutorial para aprender a configurar los ajustes necesarios de Woocommerce para nuestra tienda, hoy vamos a ver la pesta帽a pagos.

Si vamos a la pesta帽a 鈥Pagos鈥 en los ajuste de Woocommerce (WooCommerce 鈫 Ajustes 鈫 Pagos) veremos lo siguiente:

Woocommerce trae preinstalados por defecto varios m茅todos de pago que podemos utilizar:

  • WooCommerce Payments
  • Transferencia bancaria directa.
  • Pagos por cheque.
  • Contrareembolso.

Adem谩s podemos instalar otras pasarelas de pagos adicionales.

Las pasarelas de pago nos permiten hacer transacciones de dinero de forma segura entre el cliente y nosotros.

Tenemos pasarelas de pago como TPV virtual que puedes contratar con tu banco, dependiendo de tu banco utilizar谩n diferentes sistema de pasarela como Redsys, PAYCOMET, etc. Normalmente ya dispondr谩n de un plugin para incorporarlas a WooCommerce de forma m谩s sencilla. Consulta con tu banco para obtener m谩s informaci贸n sobre las condiciones de contrataci贸n de un TPV.

Tambi茅n existen otras pasarelas que son empresas independientes en las que no interviene nuestro banco, como PayPal o Stripe que la podemos incorporar mediante un plugin.

Las diferentes pasarelas de pago existentes suelen cobrar una comisi贸n por cada operaci贸n de pago, estas comisiones pueden cambiar dependiendo de la facturaci贸n etc.

Te recomiendo que estudies las comisiones que te van a cobrar en tu banco si contratas un TPV virtual y tambi茅n las que te van a cobrar otras pasarelas como PayPal y Stripe para que valores cu谩l es la pasarela de pago que m谩s te conviene utilizar en tu tienda online.

Tabla de contenidos

PayPal

En las 煤ltimas versiones Woocomerce ya no incluye por defecto PayPal entre los m茅todos de pago. Para poder utilizar PayPal en nuestra tienda lo primero que debemos hacer es instalar el plugin 鈥WooCommerce PayPal Payments鈥, para ello desde las opciones de la barra de la izquierda accedemos a (Plugins 鈫  A帽adir nuevo).

Ahora en el buscador escribimos 鈥WooCommerce PayPal Payments鈥 y cuando aparezca el plugin que estamos buscando pulsamos en el bot贸n 鈥Instalar ahora鈥.

Una vez instalado pulsamos en el bot贸n 鈥Activar鈥:

Si ahora regresamos a la pesta帽a de pagos en los ajustes de Woocommerce (Woocommerce 鈫 Ajustes 鈫 Pagos)  veremos que nos aparece PayPal est谩ndar como nuevo m茅todo de pago:

Para poder utilizar PayPal para recibir pagos debemos disponer de una cuenta, en caso de que no dispongas de una deber谩s crearla accediendo a www.paypal.com y siguiendo los pasos que all铆 se indican. Si vas a utilizar PayPal como medio de cobro para tu tienda es recomendable que te crees una cuenta business, siguiendo los pasos que te indican es sencillo crear una cuenta y solo tienes que introducir algunos datos b谩sicos.

Una vez que disponemos de una cuenta, para configurar PayPal en las opciones de pago de WooCommerce hacemos click en el bot贸n 鈥Configuraci贸n鈥:

Tras pulsar en 鈥Configuraci贸n鈥 accederemos a la siguiente pantalla donde vamos a marcar la casilla para activar PayPal:

Despu茅s vamos a pulsar en el bot贸n 鈥Conectar a PayPal鈥:

Se nos abrir谩 una ventana para conectar con nuestra cuenta de PayPal:

Ahora debemos introducir el correo el茅ctronico de la cuenta de PayPal que vamos a utilizar y seleccionar el pa铆s desde donde vamos a operar, en nuestro ejemplo seleccionamos 鈥淪pain鈥 y despu茅s vamos a pulsar en el bot贸n 鈥Next鈥:

Al pulsar en el bot贸n 鈥Next鈥 nos llevar谩 a la pantalla de login donde debemos introducir la contrase帽a de nuestra cuenta de PayPal y pulsar el bot贸n 鈥Log In鈥:

Debemos introducir nuestra cuenta de correo asociada a PayPall y nuestra contrase帽a, por 煤ltimo pulsamos en el bot贸n 鈥Iniciar sesi贸n

Una vez logeados debemos pulsar en el bot贸n 鈥Aceptar y conectar鈥 para permitir que Paypal conecte nuestra cuento a WooCommerce:

Si no ten茅is configurada del todo vuestra cuenta de PayPall es posible que os aparezcan pantallas para que rellen茅is los datos que os faltan, es preferible terminar de configurar todo desde el panel de PayPal antes de conectar con WooCommerce.
Si todo va bien nos aparecer谩 una pantalla informando de que ya estamos listos para aceptar pagos, pulsamos en el bot贸n 鈥Volver a WooCommerece developers鈥.

Al pulsar en el bot贸n 鈥Volver a WooCommerce Developers鈥 se cerrar谩 la ventana y se refrescar谩 la p谩gina de configuraci贸n de PayPal con las credenciales ya a帽adidas y una serie de opciones configurables:

Activar/desactivar

Si no lo tenemos a煤n activado marcaremos esta casilla para activar el cobro por Paypal.

Entorno de pruebas

Tenemos la opci贸n de activar el entorno de pruebas para probar a realizar pagos ficticios sin que se realice ning煤n cargo real:

Credenciales de la API

Los siguientes campos son las credenciales de la API que se nos han cargado autom谩ticamente al conectarnos con PayPal, lo dejaremos como est谩:

Ajustes del pago con PayPal

Aqu铆 podemos hacer algunos ajustes sobre lo que se mostrar谩 en la tienda al pagar con PayPal:

T铆tulo:

Esto controla el t铆tulo que el usuario ve al finalizar la compra.

Descripci贸n

Esto controla la descripci贸n que el usuario ve al finalizar la compra.

Intenci贸n

La intenci贸n de capturar el pago inmediatamente o autorizar un pago para un pedido despu茅s de su creaci贸n. Lo dejamos en Capturar para que recibamos el pago en el momento de realizar el pedido.

Pagos instant谩neos

Si activas este ajuste, se indicar谩 a PayPal que no permita al comprador utilizar fuentes de financiaci贸n que requieran tiempo adicional para completarse (por ejemplo, cheques electr贸nicos). En su lugar, el comprador deber谩 utilizar una fuente de financiaci贸n instant谩nea, como una transferencia instant谩nea, una tarjeta de cr茅dito/d茅bito o 芦Paga m谩s tarde禄. Es recomendable activar esta opci贸n.

Nombre de la marca

Controla el nombre de tu tienda, que los clientes ver谩n en el proceso de PayPal.

P谩gina de destino

Tipo de p谩gina de PayPal a mostrar.

Vamos a dejar seleccionada la que viene por defecto.

Desactivar fuentes de financiaci贸n

Por defecto se aceptar谩n todas las fuentes de financiaci贸n posibles. Puedes desactivar algunas fuentes, si lo deseas.

Custodia

Permite a los compradores registrados guardar sus cuentas de PayPal y tarjetas de cr茅dito. Permite las renovaciones de suscripciones. En principio vamos a dejarlo sin activar.

Registro

Activar el registro de comportamientos inesperados. Esto tambi茅n puede registrar datos privados y solo deber铆a activarse en un entorno de desarrollo. Lo dejamos sin activar.

Prefijo de la factura

Si usas tu cuenta de PayPal con m谩s de una instalaci贸n, usa un prefijo distinto para separar las instalaciones. No uses n煤meros en tu prefijo. 

Finalizar compra

Aqu铆 podemos personalizar la apariencia del pago de PayPal en la p谩gina de finalizar compra.

Activar botones al finalizar compra

Dejamos activado el bot贸n de paypal en la pantalla de finalizar compra.

Dise帽o del bot贸n

Podemos elegir entre horizontal y vertical, puedes probar c贸mo encaja mejor el bot贸n con el dise帽o de tu web, en principio lo vamos a dejar en vertical.

Descripci贸n corta

A帽ade la descripci贸n corta. Esta l铆nea solo se mostrar谩 si seleccionas un dise帽o horizontal.

Etiqueta del bot贸n

Es el texto que aparecer谩 en el bot贸n, podemos dejar simplemente PayPal:

Color

Aqu铆 podemos cambiar el color de fondo del bot贸n principal.

Forma

Aqu铆 podemos elegir entre forma rectangular o 鈥減astilla鈥 para el bot贸n. La forma de pastilla es la t铆pica forma reconocible del bot贸n de paypal, es la recomendable si no rompe demasiado el dise帽o de tu web.

P谩gina de producto individual

Aqu铆 podemos personalizar la apariencia del pago de PayPal en la p谩gina del producto.

Tenemos las mismas opciones que en la secci贸n 鈥淔inalizar compra鈥.

Carrito

Aqu铆 podemos personalizar la apariencia del pago de PayPal en la p谩gina del carrito.

Tenemos las mismas opciones que hemos visto en la secci贸n 鈥淔inalizar compra鈥.

Minicarrito

Aqu铆 podemos personalizar la apariencia del pago de PayPal en el minicarrito.

Tenemos las mismas opciones que hemos visto en la secci贸n 鈥淔inalizar compra鈥 y una opci贸n para especificar la altura del bot贸n:

Por 煤ltimo como siempre pulsaremos en el bot贸n 鈥淕uardar cambios鈥 para que se hagan efectivos los cambios que hayamos realizado.

En este punto ya tendr铆amos configurada nuestra tienda para aceptar pagos con Paypal.

Si vamos a la parte p煤blica de nuestra tienda y seleccionamos un producto ya podemos ver el bot贸n de Paypal.

Recuerda que para ver la parte p煤blica de tu tienda simplemente escribe en una pesta帽a del navegador el dominio de tu tienda (por ejemplo www.supertienda.com) o desde el panel de administraci贸n hac click en el nombre de tu tienda que aparece en la barra superior con el icono de la casita:

Una vez en la parte p煤blica de nuestra tienda bajamos hasta donde aparecen los productos y si hacemos clic en la imagen de un producto entramos al detalle del producto y all铆 ya podemos ver el bot贸n de Paypal, lo mismo si a帽adimos un producto al carrito y accedemos a la p谩gina del carrito.

Vamos a dejarlo aqu铆 por hoy, si quieres aprender como a帽adir otras pasarelas de pago a tu tienda online como Redsys o Stripe puedes encontrar toda la informaci贸n en mi libro. En el pr贸ximo post seguiremos con los ajustes de Woocommerce configurando la pesta帽a “Cuentas y privacidad”.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 7 – Ajustes de Woocommerce – Env铆o.

Vamos a continuar con el tutorial para aprender a configurar los ajustes necesarios de Woocommerce para nuestra tienda, hoy vamos a ver la pesta帽a env铆o.

Si solo vendes productos virtuales o descargables no necesitar谩s configurar los env铆os, en cambio si vendes productos f铆sicos vamos a tener que configurar los env铆os, para ello seleccionamos la pesta帽a 鈥Env铆o鈥 (Woocommerce鈫 Ajustes 鈫 Env铆o).

Tabla de contenidos

Zonas de env铆o

Vamos a a帽adir las zonas de env铆o, es decir, para ello debemos pulsar en el bot贸n 鈥A帽adir zona de env铆o鈥:

Nombre de la zona

En el nombre de la de la zona podemos poner lo que queramos ya que solo lo vamos a ver nosotros para identificar la zona de env铆o, por ejemplo si vas a repartir a Espa帽a  puede poner por ejemplo 鈥淓nv铆o nacional鈥.

Regi贸n(es) de la zona

Si solo vas a vender a algunas regiones pueden especificarlas aqu铆, en nuestro ejemplo vamos a seleccionar Espa帽a porque vamos a enviar a todo el estado.

Limitar a c贸digos postales espec铆ficos:

Pinchando en el enlace 鈥Limitar a c贸digos postales espec铆ficos鈥 podemos indicar a qu茅 sitios espec铆ficos realizamos env铆os,  si solo repartimos a una zona limitada pondremos aqu铆 los c贸digos postales de las zonas a las que repartimos. Podemos utilizar comodines (p.ej.: CB23*) o rangos totalmente num茅ricos (p.ej.: 90210…99000).

M茅todos de env铆o

Ahora definiremos los m茅todos de env铆o para la zona, lo m谩s habitual es tener un precio fijo para los env铆os con la posibilidad de env铆o gratuito a partir de cierta cantidad.

Pulsamos en el bot贸n 鈥A帽adir m茅todo de env铆o鈥:

Nos permite seleccionar entre precio fijo, env铆o gratuito y recogida en local. 

Precio fijo

Vamos a seleccionar 鈥Precio fijo鈥 y pulsamos el bot贸n 鈥A帽adir m茅todo de env铆o

Una vez a帽adido pulsamos en 茅l para editarlo:

El t铆tulo del m茅todo lo podemos dejar como est谩, en el campo 鈥Estado del impuesto鈥 vamos a seleccionar 鈥Imponible鈥 para que se muestre el coste total del env铆o con el IVA ya incluido, y el el campo Coste vamos a introducir el precio que estimemos para el transporte sin incluir el IVA, por ejemplo vamos a ponerle un coste de 6 euros y por 煤ltimo pulsaremos en el bot贸n 鈥Guardar los cambios鈥:

Env铆os gratuitos

Si queremos que los env铆o sean gratuitos a partir de una cantidad a帽adiremos un nuevo m茅todo de env铆o pulsando en el bot贸n 鈥A帽adir m茅todo de env铆o鈥, despu茅s en el desplegable seleccionamos 鈥Env铆o gratuito鈥 y pulsamos en 鈥A帽adir m茅todo de env铆o鈥:

Editamos el nuevo m茅todo de env铆o haciendo clic en el:

En el desplegable 鈥淓l env铆o gratuito requiere鈥鈥 seleccionaremos 鈥Una cantidad m铆nima de pedido鈥, cabe destacar que tambi茅n podr铆amos utilizar cupones para el env铆o gratuito, en este ejemplo vamos a aplicar el env铆o s贸lo a aquellos pedidos que superen el precio que establezcamos para el env铆o gratuito, sin utilizar cupones:

Al seleccionar esta opci贸n aparecer谩n dos nuevos campos, en el primero indicaremos la cantidad m铆nima de pedido a partir de la cual queremos aplicar el env铆o gratuito, por ejemplo 70 euros, y despu茅s tenemos una casilla que marcaremos si queremos que en caso de tener un cup贸n de descuento queremos que el pedido m铆nimo se aplique con el precio antes de aplicar el cup贸n de descuento o con el precio final de despu茅s de aplicar el descuento.

Finalmente pulsamos en 鈥Guardar los cambios鈥.

Recogida local

Si tienes un local f铆sico y quieres dar la opci贸n de recoger en la tienda el producto el proceso ser谩 id茅ntico, a帽adiendo un nuevo m茅todo de env铆o y seleccionando 鈥淩ecogida local鈥:

Lo normal en este caso ser铆a poner precio cero:

Opciones de env铆o

A las opciones de env铆o accedemos haciendo click en el enlace 鈥Opciones de env铆o鈥 en WooCommerce鈫 Ajustes 鈫 Envio.

Aqu铆 vamos a dejar las opciones que vienen por defecto, no vamos a modificar nada, en 鈥Destino del env铆o鈥 dejaremos seleccionada la opci贸n 鈥Por defecto a la direcci贸n de facturaci贸n del cliente鈥.

Clases de env铆o

A las opciones de env铆o accedemos haciendo click en el enlace 鈥Clases de env铆o鈥 en WooCommerce鈫 Ajustes 鈫 Envio.

Aqu铆 configuraremos los tipos de env铆os que por sus caracter铆sticas tengan un coste diferente, por ejemplo art铆culos voluminosos. Si por el tipo de productos que vendes no vas a tener un tipo de env铆o especial no necesitas configurar nada aqu铆, en cualquier caso vamos a ver como se hace:

Tenemos que pulsar en el bot贸n 鈥A帽adir clase de env铆o鈥:

En el campo 鈥Nombre de la clase de env铆o鈥 ponemos por ejemplo 鈥淧roducto voluminoso鈥, el campo 鈥Slug鈥 se crea autom谩ticamente al guardar, no es necesario introducir nada.

En 鈥Descripci贸n鈥 podemos poner 鈥淓nv铆o para productos voluminosos鈥, finalmente pulsaremos en  鈥Guardar clases de env铆o鈥.

Una vez guardado, volvemos a 鈥Zonas de env铆o鈥 y seleccionamos la zona que hab铆amos creado en este ejemplo 鈥Env铆o nacional鈥:

Despu茅s en m茅todos de env铆o vamos a hacer click en 鈥Precio fijo鈥 ya que el resto son gratuitos:

Vemos que ahora hay un nuevo campo llamado Coste de la clase de env铆o 鈥淧roducto voluminoso鈥. Aqu铆 pondremos el coste que tendr谩n los productos catalogados como voluminosos. Podemos introducir un coste (sin impuestos) o la suma. Podemos utilizar [qty] para indicar el n煤mero de art铆culos, [cost] para el coste total de art铆culos y 

[fee percent=”10″ min_fee=”20″ max_fee=””] para cargos en porcentaje. 

Por ejemplo podemos poner 8 * [qty] para indicar que el coste de env铆o de los productos voluminosos sea de 8 euros por cada art铆culo:

Por 煤ltimo en el campo 鈥Tipo de c谩lculo鈥 dejaremos seleccionada la opci贸n 鈥Por clase鈥.

Vamos a dejarlo aqu铆 por hoy, en el pr贸ximo post seguiremos con los ajustes de Woocommerce configurando la pesta帽a Pagos.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 6 – Ajustes de Woocommerce – Impuestos.

Vamos a continuar con el tutorial para aprender a configurar los ajustes necesarios de Woocommerce para nuestra tienda, hoy vamos a ver la pesta帽a impuestos.

En el momento de crear un negocio de compra venta on line, es necesario informarse sobre los impuestos que gravan estos productos. En el caso de Espa帽a el impuesto que grava a las transacciones de compra-venta ser铆a el IVA (Impuesto sobre el

Valor A帽adido)

En el link de la Agencia tributaria aparece toda la informaci贸n actualizada relacionada sobre el IVA, desde el tipo de IVA que corresponde a cada producto hasta c贸mo se comportan las exportaciones de productos a pa铆ses comunitarios o extracomunitarios.

Os dejamos el link de la Agencia Tributaria:

https://www.agenciatributaria.es/AEAT.internet/Inicio/La_Agencia_Tributaria/Campanas/IVA/_INFORMACION/Informacion_General/Informacion_General.shtml

No obstante, es aconsejable que te informes a trav茅s de un asesor fiscal qu茅 impuestos se aplican en tu pa铆s para la venta online de productos o servicios.

En nuestro ejemplo vamos a vender productos a particulares dentro del estado espa帽ol, a estos productos les tenemos que aplicar un 21% de IVA.

Accedemos a las opciones de Impuestos seleccionando WooCommerceAjustes y despu茅s haciendo clic en la pesta帽a Impuesto.

Si por alg煤n motivo no ves la pesta帽a Impuesto vuelve a la pesta帽a 鈥General鈥 y comprueba que tengas marcada la casilla de los impuestos.

Tabla de contenidos

Opciones de impuestos

Precios con impuestos incluidos

Si activamos la opci贸n de introducir los precios con impuestos incluidos tendremos que poner el precio a nuestros productos con el IVA ya incluido.

Por el contrario, si seleccionamos introducir los precios sin impuestos a la hora de poner el precio a nuestros productos lo haremos con la base imponible sin el IVA.

Es mejor seleccionar la segunda opci贸n ya que si se produce un cambio de impuestos en el pa铆s no tienes que cambiar el precio de todos los productos.

Calcular el impuesto basado en

Aqu铆 lo m谩s recomendable es elegir 鈥Direcci贸n de pedido del cliente鈥, ya que los  impuestos se calcular谩n en base a los datos de facturaci贸n del cliente.

En cualquier caso, ante cualquier duda sobre los impuestos a aplicar es recomendable consultar a un asesor fiscal.

Clase de impuesto por env铆o

Es el impuesto (en nuestro caso el IVA a 21%) que se va a aplicar al transporte, seleccionamos 鈥Est谩ndar

Redondeo

Lo dejamos sin marcar.

Clases de impuestos adicionales

Por defecto tenemos el impuesto est谩ndar, que en el caso de espa帽a es el IVA al 21%, pero podemos a帽adir a mano nuevas clases de impuestos, si vendemos art铆culos que tienen IVA reducido, por ejemplo libros, lo a帽adiremos a la lista:

Cuando  guardemos los cambios aparecer谩 arriba el impuesto que acabamos de a帽adir.

Mostrar precios en la tienda

Aqu铆 vamos a seleccionar  鈥Impuestos incluidos鈥 para que se muestre el precio final en la tienda.

Mostrar precios en el carrito y en el pago

Aqu铆 vamos a dejar seleccionado 鈥Sin impuestos鈥 para que salga el precio desglosado en el carrito.

Sufijo al mostrar el precio

Pondremos aqu铆 el texto que queremos que se muestre en la tienda despu茅s del precio, por ejemplo si queremos informar de que el precio contiene el IVA incluido podemos poner el texto 鈥淚VA incluido鈥.

Visualizaci贸n del total de impuestos

Aqu铆 vamos a dejar seleccionado 鈥Detallado鈥.

Finalmente guardaremos los cambios pulsando en el bot贸n 鈥Guardar cambios鈥.

Configurar tarifas

Vamos a configurar las distintas tarifas de impuestos que vayamos a utilizar.

Debemos estar en la pesta帽a impuesto de los ajustes de Woocommerce,  si no lo est谩s accedemos seleccionando WooCommerceAjustes y despu茅s haciendo clic en la pesta帽a Impuesto.

Vamos a determinar la tarifa est谩ndar, para ello, en los enlaces de arriba haremos clic en 鈥淭arifa est谩ndar鈥:

Ahora tenemos que pulsar el bot贸n 鈥Insertar fila鈥.

Introducimos el C贸digo del pa铆s, en el caso de Espa帽a es 鈥ES鈥, c贸digo de provincia, c贸digo postal y ciudad si se aplica el mismo impuesto a todo el pa铆s lo dejamos como est谩.

En 鈥Tarifa鈥 vamos a poner en nuestro caso 21 que es el IVA est谩ndar para Espa帽a, y como nombre del impuesto vamos a poner 鈥IVA 21%鈥.

Prioridad lo dejamos en 鈥1鈥.

El campo 鈥Compuesto鈥 lo dejamos sin marcar y 鈥Env铆o鈥 lo dejamos marcado para indicar que queremos que se aplique a los env铆os tambi茅n el 21%.

Una vez introducidos los valores pulsaremos el bot贸n 鈥Guardar los cambios鈥.

Si vendemos a otros pa铆ses tendremos que crear un fila por cada pa铆s y a帽adir el IVA que corresponda.

Para configurar otro impuesto, por ejemplo el IVA reducido de 4% que hemos a帽adido antes lo realizaremos del mismo modo, seleccionamos 鈥Tarifas IVA reducido 4%鈥 en los enlaces de arriba, despu茅s pulsamos en el bot贸n 鈥Insertar fila鈥, introducimos el c贸digo del pa铆s, la tarifa, el nombre del impuesto y pulsamos en guardar los cambios.

Para no hacer demasiado largo este post vamos a dejarlo aqu铆 por hoy, en el pr贸ximo post veremos seguiremos con los ajustes de Woocommerce configurando la pesta帽a Env铆o.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 5 – Ajustes de Woocommerce.

En el post anterior vimos c贸mo instalar Woocommerce, hoy vamos a continuar con el tutorial para aprender a configurar los ajustes necesarios de Woocommerce para nuestra tienda.

Tabla de contenidos

Ajustes de WooCommerce

Vamos a configurar los ajustes de Woocommerce seleccionando Woocommerce 鈫 Ajustes en el men煤 de la izquierda:

Pesta帽a General

En la pesta帽a 鈥General鈥 tenemos una serie de opciones muchas de las cuales ya tendr谩s definidas si has rellenado el formulario que te aparece al instalar Woocommerce, en cualquier caso aqu铆 puedes cambiarlas en caso de ser necesario, veamos cuales son esas opciones:

Direcci贸n de la tienda

Esta es la direcci贸n f铆sica de tu tienda (si la tienes), las tasas de impuestos y tasas de env铆o usar谩n esta direcci贸n.

Opciones generales

Ubicaciones de venta:

En esta opci贸n seleccionamos a qu茅 pa铆ses queremos vender. Si vendes productos virtuales puedes poner todos los pa铆ses, pero si vendes productos f铆sicos tendr谩s que seleccionar aquellos pa铆ses a los que tengas capacidad para distribuir tus productos, dependiendo el acuerdo que tengas con tu empresa de mensajer铆a. Si solo vas a vender a nivel nacional deber谩s elegir tu pa铆s, para ello seleccionaremos 鈥Vender a pa铆ses espec铆ficos鈥 en el desplegable y seleccionamos el pa铆s o pa铆ses a los que vayamos a vender nuestros productos:

En nuestro ejemplo vamos a seleccionar que vamos a vender solo en Espa帽a:

Ubicaci贸n(es) de env铆o

La opci贸n m谩s l贸gica aqu铆 es dejar seleccionada 鈥Enviar a todos los pa铆ses a los que vendes鈥.

Ubicaci贸n del cliente por defecto

Esta opci贸n determina la ubicaci贸n del cliente por defecto. 

Como en nuestro ejemplo solo vamos a vender en Espa帽a y se aplicar谩n los mismos impuestos a todos los clientes vamos a dejar marcado 鈥Sin ubicaci贸n por defecto鈥, si en tu caso necesitas aplicar diferentes tasas en funci贸n de la ubicaci贸n del cliente deber谩s marcar 鈥Geolocalizar鈥.Si usas la geolocalizaci贸n woocommerce detectar谩 desde donde te est谩n comprando para aplicar los impuestos que correspondan. WooCommerce utiliza MaxMind para la funci贸n de geolocalizaci贸n del cliente, necesitar谩s crearte una cuenta de usuario en el servicio de MaxMind y crear una clave API que hay que introducir despu茅s en la pesta帽a Integraci贸n de las opciones de WooCommerce.

Activar impuestos

Depende de la legalidad vigente en tu pa铆s. Si se aplican impuestos sobre la venta de productos, por ejemplo el IVA debe estar seleccionado.

Activar cupones

Activaremos esta casilla si vamos a utilizar cupones de descuento en nuestra tienda.

Si la activas aparecer谩 la opci贸n 鈥Calcular descuentos de cupones secuencialmente鈥, si no se va a aplicar m谩s de un cup贸n de descuento la dejaremos sin activar.

Opciones de moneda

Moneda

Aqu铆 elegiremos la moneda de nuestro pa铆s, si estamos en Espa帽a elegiremos el euro:

Ubicaci贸n de la moneda

Es donde queremos que aparezca el s铆mbolo de la moneda al lado del precio, en el caso del euro lo normal es a la derecha.

Separador de miles

Es el separador de miles en los precios mostrados, en Espa帽a es el punto.

Separador decimal

Si los precios tienen decimales es el separador de decimales que se mostrar谩 en el precio. En el caso de Espa帽a se utiliza la coma.

N煤mero de decimales

Esto establece el n煤mero de decimales que se muestran en los precios mostrados.

Si hemos realizado alg煤n cambio en la configuraci贸n pulsaremos en el bot贸n 鈥Guardar cambios鈥.

Pesta帽a Productos

Accedemos seleccionando WooCommerceAjustes y despu茅s haciendo clic en la pesta帽a Productos.

P谩ginas de la tienda

P谩gina de la tienda

Por defecto ya viene seleccionada la p谩gina de nuestra tienda, a no ser que quieras utilizar una p谩gina personalizada lo dejaremos con la p谩gina Tienda.

Comportamiento de a帽adir al carrito

Dejaremos sin seleccionar la opci贸n 鈥Redirigir a la p谩gina del carrito tras a帽adir productos correctamente鈥 ya que si quieres comprar varios productos es molesto que te mande a la p谩gina del carrito todo el rato y tengas que volver atr谩s para seguir comprando.

Dejaremos seleccionada la opci贸n 鈥Activar botones AJAX de a帽adir al carrito en los archivos鈥 para que inmediatamente aparezca en el carrito el producto que compramos sin necesidad de recargar la p谩gina.

Imagen del marcador de posici贸n

Es el id de la imagen que se muestra por defecto en la tienda cuando un producto no tiene imagen, la que trae por defecto es esta:

De momento para no complicarnos vamos a dejar la que viene por defecto, m谩s adelante si quieres puedes usar una imagen personalizada subiendo una imagen a la galer铆a e introduciendo su id en este campo.

Medidas
Unidad de peso

En nuestro caso lo dejaremos en kilogramos.

Unidad de las dimensiones

En nuestro caso vamos a dejar seleccionado cent铆metros.

Valoraciones

Activa las valoraciones

Dejamos seleccionado 鈥Activar valoraciones del producto鈥 si queremos que los compradores puedan dejar valoraciones de los productos que compran, estas valoraciones aparecer谩n en la p谩gina del producto.

Dejaremos seleccionada la opci贸n 鈥Mostrar la etiqueta 芦propietario verificado禄 en las valoraciones de los clientes鈥.Vamos a dejar tambi茅n marcada la opci贸n 鈥淟as rese帽as solo las pueden dejar 芦propietario verificados禄鈥 para que solo la gente que ha comprado el producto en nuestra tienda pueda valorarlo y evitar valoraciones 鈥渕alintencionadas鈥.

Rese帽as de productos

Aqu铆 dejaremos marcadas las dos opciones:

Antes de seguir guardamos los cambios pulsando en el bot贸n 鈥Guardar cambios鈥.

Inventario

Vamos a configurar ahora las opciones de inventario, para ello en los ajustes de Woocommerce, dentro de la pesta帽a Productos seleccionamos el Inventario.

Gestionar inventario

Si vendemos productos f铆sicos dejaremos marcada la opci贸n 鈥Activar la gesti贸n de inventario鈥, si vendemos servicios o archivos descargables lo dejamos sin marcar.

Mantener en inventario (en minutos)

Esta opci贸n sirve para que reserve el producto en la cesta durante el tiempo que le indiquemos y no lo pueda comprar otra persona.

Si pasa ese tiempo y no se ha realizado la compra se la compra se cancela y vuelve a estar disponible en el stock.

Avisos:

Dejaremos las dos opciones marcadas para que nos avise cuando queden pocas existencias o se haya agotado un producto.

Destinatario de los avisos

Aqu铆 pondremos el email de la persona que gestiona el inventario de la tienda para que reciba avisos sobre el inventario. Si lo gestionas t煤 mismo podr谩s aqu铆 tu email.

Umbral de pocas existencias

Dependiendo del tipo de producto que vendamos aqu铆 indicaremos a partir de cuantas unidades queremos que nos avise de que quedan pocas existencias.

Umbral de inventario agotado

Lo dejamos en cero.

Visibilidad de inventario agotado

Si lo dejamos activado el cliente tambi茅n ver谩 los art铆culos agotados, si no queremos que el cliente pueda ver en la tienda aquellos art铆culos que est谩n agotados lo dejamos sin marcar. Por posicionamiento en los buscadores es mejor que siga apareciendo aunque aparezca como agotado, por lo tanto lo vamos a dejar sin marcar.

Formato de visualizaci贸n del inventario

Aqu铆 le indicamos c贸mo se muestran las cantidades del inventario en la tienda, podemos elegir entre mostrar siempre la cantidad restante, mostrarlo solo cuando quedan pocas unidades o no mostrar nunca la cantidad restante de inventario. Si no te interesa que el cliente sepa cu谩nto stock te queda seleccionaremos que no lo muestre nunca, en caso contrario puede ser una buena estrategia que muestre la cantidad de producto que hay en stock 鈥solo mostrar la cantidad restante del inventario cuando sea baja, pj: solo quedan 2 unidades鈥  para que el usuario sienta la necesidad de comprar antes de que se agote el producto.

Como siempre, guardamos los cambios pulsando en el bot贸n 鈥Guardar cambios鈥.

Productos descargables

Los productos descargables son aquellos productos digitales que se pueden descargar, como por ejemplo eBooks, fotos, archivos de audio, archivos de v铆deo, etc.

Si no vas a vender productos descargables puedes ignorar esta opciones, por el contrario si vendemos productos descargables configuraremos sus opciones en los ajustes de Woocommerce, dentro de la pesta帽a Productos haciendo clic en 鈥Productos descargables.

M茅todo de descarga de archivos

Dejamos marcado forzar descargas, de esta forma ocultamos la URL de tus archivos.

Restricci贸n de acceso

Dejamos sin marcar 鈥淟as descargas requieren inicio de sesi贸n鈥 y dejamos marcada 鈥淧ermitir acceso a los productos descargables despu茅s del pago鈥

Nombre de archivo

Dejamos marcada la opci贸n 鈥A帽ade una cadena 煤nica al nombre del archivo por motivos de seguridad鈥. Con esta opci贸n conseguiremos que nuestros archivos descargables tengan un nombre con un a帽adido de caracteres aleatorios lo que dificultar谩 que alguien pueda descargar el archivo directamente si no lo ha comprado.

Como siempre, guardaremos los cambios pulsando en el bot贸n 鈥Guardar cambios鈥.

Para no hacer demasiado largo este post vamos a dejarlo aqu铆 por hoy, en el pr贸ximo post veremos seguiremos con los ajustes de Woocommerce configurando la pesta帽a Impuestos.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 4 – Instalar Woocommerce.

Vamos a continuar con el tutorial para aprender a crear tiendas online con WordPress y Woocommerce. Hoy vamos a ver c贸mo instalar woocommerce para convertir nuestro WordPress en una tienda online.

Instalar Woocommerce:

Lo siguiente que haremos es instalar el plugin de WooCommerce.

Como vimos en la introducci贸n, WooCommerce es un plugin que permite implementar una tienda online totalmente funcional en tu web sin necesidad de escribir una sola l铆nea de c贸digo.

Para instalarlo desde la parte de administraci贸n de wordpress posicionamos el rat贸n sobre la secci贸n 鈥Plugins鈥 del men煤 de la barra de la izquierda y hacemos clic en 鈥A帽adir nuevo鈥. 

Ahora debemos escribir 鈥woocommerce鈥 en el buscador de plugins:

Una vez tengamos localizado el plugin de Woocommerce pulsaremos en su bot贸n 鈥Instalar ahora鈥:

Tras unos segundos se habr谩 instalado el plugin, ahora debemos activarlo, por lo que vamos a hacer clic en el bot贸n 鈥Activar鈥:

Configuraci贸n inicial de Woocommerce

Cuando activas el plugin la primera vez aparece una serie de campos que tenemos que rellenar para configurar nuestra tienda, en primer lugar tenemos que introducir la direcci贸n f铆sica de nuestra tienda en caso de que dispongamos de una, esto es para que Woocommerce configure las opciones de moneda y las reglas de env铆o autom谩ticamente. Esta informaci贸n no ser谩 visible p煤blicamente y puedes cambiarla f谩cilmente m谩s tarde, por lo que si no est谩s seguro de que direccion poner en este momento puedes poner cualquier direcci贸n, la tuya por ejemplo, y pulsar en el bot贸n 鈥Seguir鈥:

Puede que te aparezca el siguiente mensaje para compartir datos con Woocommerce para que los desarrolladores puedan conocer datos de uso de la herramienta y realizar mejoras:

Dejo a tu elecci贸n pulsar en 鈥溌i, cuenta conmigo!鈥 o 鈥淣o, gracias鈥, no variar谩 en nada el desarrollo de este tutorial.

En el siguiente paso seleccionaremos a qu茅 sector pertenece nuestra tienda:

Elige el que m谩s se ajuste a lo que vas a vender, si no coincide ninguno puedes seleccionar otra. Despu茅s hacemos clic en 鈥Seguir鈥.

En la siguiente pantalla tenemos que seleccionar que tipo de productos vamos a vender, si vendemos productos f铆sicos seleccionaremos 鈥淧roductos f铆sicos鈥, si vendemos productos virtuales seleccionaremos 鈥Descargas鈥, estas dos opciones son gratuitas, el resto son de pago, como en nuestro tutorial vamos a vender productos f铆sicos seleccionamos 鈥Productos f铆sicos鈥 y pinchamos en 鈥Seguir鈥:

En la siguiente pantalla seleccionaremos cu谩ntos productos vamos a tener en nuestra tienda, pon lo que quieras, si no lo tienes claro puedes poner que a煤n no tienes productos, en realidad estos datos no son relevantes. Tambi茅n puedes indicar si est谩s configurando la tienda para un cliente:

A la pregunta de si actualmente vendes en otro lugar mejor le decimos que n贸, si le decimos otra opci贸n nos har谩 preguntas sobre nuestros ingresos, en caso de que no te importe dar esa informaci贸n puedes responder lo que consideres oportuno.
Para continuar una vez m谩s hacemos clic en el bot贸n 鈥Seguir鈥.

Despu茅s nos mostrar谩 una opci贸n para instalar una serie de plugins 鈥渞ecomendados鈥. no queremos en este momento recargar nuestra tienda con m谩s plugins de lo necesario, recuerda que la idea es mantener todo lo m谩s simple posible as铆 que vamos a desmarcar la casilla 鈥A帽ade caracter铆sticas de negocios recomendadas para mi sitio鈥 y pulsamos en 鈥Seguir鈥:

En el 煤ltimo paso tenemos que seleccionar el tema que vamos a utilizar, como nosotros ya hemos instalado el tema Astra pulsamos el bot贸n 鈥淪eguir con mi tema activo鈥:

Al terminar nos mostrar谩 una pantalla de bienvenida:

Pulsamos en Siguiente hasta llegar a la 煤ltima pantalla y despu茅s pulsamos en el bot贸n 鈥淰amos鈥:

Ahora debemos estar en la secci贸n WooCommerce 鈫  Inicio, si por alg煤n motivo has cerrado la pesta帽a tienes que entrar al panel de administraci贸n y acceder a esta secci贸n desde el men煤 de la barra de la izquierda.

En el cuadro 鈥Finalizar configuraci贸n鈥 vamos a seleccionar la 煤ltima opci贸n, 鈥淧ersonalizar mi tienda鈥:

Aqu铆 vamos a importar algunos productos de prueba para que podamos ver c贸mo queda el aspecto de nuestra tienda, cuando todo est茅 preparado los eliminaremos y dejaremos solo nuestros productos, pero ahora nos van a venir bien para empezar a dar forma a nuestra tienda, pulsaremos por lo tanto en el bot贸n 鈥淚mportar los productos鈥.

Una vez se hayan importado los productos, en el paso 2 vamos a crear una p谩gina de inicio, despu茅s la modificaremos a nuestro gusto, pero de momento ser谩 un punto de partida, pulsamos por lo tanto en el bot贸n 鈥Crear una p谩gina de inicio鈥:

Esto nos habr谩 creado una p谩gina de inicio, veremos luego el resultado.

En el paso 3 ya estar谩 seleccionado el logotipo de nuestra tienda que definimos anteriormente, de no ser as铆 podremos seleccionarlo aqu铆. 

Debemos pulsar en 鈥Ejecutar鈥 para pasar al siguiente paso:

Por 煤ltimo en 鈥Establece un aviso de la tienda鈥 nos permite a帽adir un texto destacado que se mostrar谩 en todas las p谩ginas de la tienda, es opcional y podemos dejarlo en blanco, para finalizar pulsaremos en 鈥Tarea completada鈥:

El resto de opciones las configuraremos m谩s adelante desde los ajustes de WooCommerce. 

Al instalar WooCommerce se han creado nuevas secciones en el panel de wordpress:

Tenemos una nueva secci贸n llamada 鈥Woocommerce鈥 donde configuraremos todo lo relacionado con la tienda online, gestionaremos los pedidos, veremos los clientes etc.

Tambi茅n se ha creado una secci贸n llamada 鈥淧roductos鈥 donde introduciremos y gestionaremos los productos que vamos a vender en nuestra tienda.

En 鈥An谩lisis鈥 veremos estad铆sticas de ventas de nuestra tienda.

Tambi茅n se ha creado una secci贸n llamada 鈥Marketing鈥 donde podemos crear cupones e instalar algunas herramientas de marketing.

WooCommerce nos ha creado tambi茅n una serie de p谩ginas autom谩ticamente, en las opciones de la barra de la izquierda seleccionamos 鈥P谩ginas鈥 y 鈥Todas las p谩ginas鈥 y podemos ver qu茅 p谩ginas tenemos creadas en este momento:

Como vemos WooCommerce nos ha creado varias p谩ginas que son las p谩ginas est谩ndar de cualquier tienda online y que nos ofrecen toda la funcionalidad que necesitamos para gestionar todo el proceso de compra sin que necesitemos escribir ni una sola l铆nea de c贸digo.

Las p谩ginas que WooCommerce ha creado para nosotros son:

  • Carrito: Es la p谩gina donde veremos los productos que hemos a帽adido al carrito.
  • Finalizar compra: Es la p谩gina donde se realiza el pago.
  • P谩gina de inicio: Es la portada de nuestra web, es lo primero que van a ver nuestros clientes cuando accedan a nuestra tienda online. 
  • Mi cuenta: Es la p谩gina con los datos del usuario.
  • Tienda: Es la p谩gina de la tienda donde se muestran los productos.

M谩s adelante veremos c贸mo personalizar nuestra tienda.

Llegados a este punto vamos a ver qu茅 aspecto tiene ahora nuestra tienda, arriba a la izquierda encontraremos un icono de una casa y el nombre que le hemos dado a nuestra tienda, si pinchamos en 茅l y seleccionamos 鈥Visitar el sitio鈥 accederemos a la parte p煤blica de nuestra web:

El aspecto de nuestra tienda ser谩 algo similar a esto:

No est谩 nada mal, sin apenas esfuerzo tenemos la estructura de una tienda creada.

Tenemos una portada que muestra lo que ofrecemos en nuestra tienda. 

Podemos incluso hacer el proceso de compra de un producto, sin embargo no es posible terminar el proceso de compra ya que no hemos configurado los m茅todos de pago, tambi茅n hay otras muchas cuestiones que configurar para dejar tu tienda a punto para empezar a vender. Pero solo con lo que hemos visto ya podemos intuir la potencia de Woocommerce y todo lo que nos ofrece ya predise帽ado sin tener que escribir ni una sola l铆nea de c贸digo.

El pr贸ximo post veremos c贸mo configurar los ajustes de Woocommerce.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Tutorial: Crear tienda online con WooCommerce – parte 3 – Instalar un theme y configurar la apariencia.

Vamos a continuar con el tutorial para aprender a crear tiendas online con WordPress y Woocommerce. Hoy vamos a ver c贸mo instalar un theme y configurar algunos aspectos para cambiar la apariencia de nuestra web.

Tabla de contenidos

Apariencia: Temas

Lo primero que vamos a hacer es instalar un tema para nuestra tienda.
Los temas son plantillas que dan un estilo predeterminado a nuestra web y que normalmente nos permiten configurar ciertas caracter铆sticas como la cabecera, colores, fuentes etc.

Existen infinidad de temas, algunos gratuitos y otros de pago. Algunos vienen ya preparados para una tem谩tica en concreto y traen consigo un mont贸n de funcionalidades preestablecidas, algunas incluyen un maquetador visual (veremos m谩s adelante qu茅 son) y un mont贸n de widgets preestablecidos. Los widgets son elementos que se pueden colocar en determinados espacios de tu web, como por ejemplo, la barra lateral o el pie de p谩gina.

Hay muchos tipos de widgets: pueden ser im谩genes, texto, formularios de suscripci贸n, botones de redes sociales, men煤s, categor铆as, etc.


Sin embargo, cuanto m谩s complejo sea un tema m谩s pesado es y m谩s tiempo tarda en cargarse, y la velocidad es clave para el posicionamiento de tu web en los buscadores.
Adem谩s las plantillas que incluyen muchas funcionalidades hacen que si m谩s adelante decides cambiar a otro tema no puedas recrear esas funcionalidades y tengas problemas de compatibilidad y eso hace que sea mucho m谩s complicado mantener la web. Puede que la empresa o el desarrollador que en su d铆a realiz贸 el tema no lo mantenga actualizado en el futuro y tengas problemas a la hora de actualizar la versi贸n de wordpress.

Yo prefiero usar el principio KISS (del ingl茅s Keep It Simple, Stupid!:芦隆Mantenlo sencillo, est煤pido!禄) es un acr贸nimo usado como principio de dise帽o.

El principio KISS establece que la mayor铆a de sistemas funcionan mejor si se mantienen simples que si se hacen complejos.

Por lo tanto un tema debe servir para dar un aspecto visual a nuestra web, pero para las funcionalidades extra que podamos necesitar usaremos plugins, el concepto de plugin lo veremos m谩s adelante, pero de momento qu茅date con que un plugin es un a帽adido que se instala en wordpress y da funcionalidades extra a nuestra web.

Instalar el tema Astra

El tema que vamos a utilizar en este tutorial se llama Astra, es uno de los m谩s populares, es r谩pido, f谩cil de configurar y ofrece una flexibilidad m谩s que suficiente para adaptarlo a nuestras necesidades. Tiene una versi贸n de pago, pero la versi贸n gratuita es suficiente para las necesidades que vamos a tener a la hora de montar nuestra tienda online.

Para instalar un nuevo tema en las opciones de la barra de la izquierda pulsamos en 鈥淎pariencia鈥 y seleccionamos 鈥淭emas鈥:

Con la instalaci贸n de WordPress vemos que ya viene incluido por defecto tres temas, para a帽adir el tema Astra pulsaremos el bot贸n 鈥淎帽adir nuevo鈥:

Al ser uno de los temas m谩s populares es posible que ya te aparezca entre los primeros, si no es as铆 en el cuadro de b煤squeda escribiremos 鈥Astra鈥 para que aparezca el tema que queremos instalar:

Despu茅s posicionamos el cursor con el rat贸n encima del tema y pulsamos en el bot贸n 鈥Instalar鈥:

Una vez instalado pulsamos en el bot贸n 鈥Activar鈥:

Ya tenemos nuestro tema instalado, vamos a acceder a la parte p煤blica de nuestra web para ver como ha cambiado el aspecto, para ello en la parte superior izquierda ponemos el rat贸n sobre el nombre de nuestra tienda al lado del icono de la casita y hacemos clic en 鈥Visitar el sitio鈥:

Como podemos observar el aspecto de nuestra web ha cambiado, aunque sigue sin ser gran cosa, no te preocupes, poco a poco iremos dando forma a nuestra web.

Quitar la barra lateral

De momento vamos a hacer un peque帽o ajuste, vamos a quitar la barra lateral, por lo que vamos a volver al panel de administraci贸n de WordPress, para ello en la barra de arriba, a la izquierda posicionamos el rat贸n sobre el nombre de nuestra tienda y hacemos clic en 鈥Escritorio鈥:

Ahora en las opciones de la barra de la izquierda seleccionamos 鈥Apariencia鈥 y hacemos click en 鈥Personalizar鈥:

En el siguiente men煤 de opciones seleccionamos 鈥Barra lateral鈥:

En el desplegable 鈥Dise帽o por defecto鈥 debemos seleccionar 鈥Sin barra lateral鈥 y despu茅s debemos pulsar en el bot贸n 鈥Publicar鈥 de arriba para que se haga efectivo el cambio.

Una vez publicado los cambios vamos a volver al men煤 anterior pulsando en la flecha izquierda 鈥<鈥:

A帽adir un logotipo

Para situarnos, en este momento tenemos que estar en Apariencia 鈫  Personalizar, si vienes del apartado anterior ya est谩s situado.

Vamos a a帽adir un logotipo y vamos a quitar el t铆tulo de la tienda, para ello en el men煤 de personalizaci贸n vamos a hacer clic en 鈥Maquetador de cabeceras鈥:

En el siguiente men煤 debemos seleccionar 鈥T铆tulo y logotipo del sitio鈥:

El siguiente paso que vamos a dar es hacer clic en 鈥Seleccionar El logotipo鈥:

Al hacer clic en 鈥Seleccionar El logotipo鈥 se abrir谩 la galer铆a de im谩genes para que seleccionemos una. En estos momentos no tenemos todav铆a ninguna imagen en la galer铆a,  para subir nuestro logo vamos a hacer clic en  鈥Seleccionar archivos鈥:
En el siguiente post veremos el panel de administraci贸n de WordPress aprenderemos a configurar todo lo necesario.

Se abrir谩 el navegador de archivos para que seleccionamos la imagen del logotipo de nuestra tienda que tengamos en en nuestro ordenador, una vez subida pulsamos en el bot贸n 鈥Seleccionar鈥 que se encuentra abajo a la derecha:

Despu茅s nos da la opci贸n de recortar la imagen, ajusta el recuadro como creas conveniente para que se ajuste bien a tu logo y pulsa en 鈥淩ecortar la imagen鈥 o en 鈥Omitir el recorte鈥 si no quieres hacer ning煤n recorte:

Ahora vamos a ajustar el ancho del logotipo hasta que quede bien. En mi caso lo voy a dejar en 200 pixels, prueba distintos tama帽os moviendo la barra hasta que te guste como queda:

Como nuestro logo ya incluye el t铆tulo de la tienda vamos a ocultarlo desactivando el selector 鈥Mostrar t铆tulo del sitio鈥:

El peque帽o icono que hay al lado del selector indica como se ver谩 en cada uno de los posibles tama帽os de pantalla (ordenador, m贸vil, tablet鈥), vamos a desactivar la opci贸n 鈥Mostrar el t铆tulo鈥 para todos los tama帽os de pantalla, para ello debemos pulsar en el peque帽o icono con forma de pantalla y desactivar la opci贸n:

Por 煤ltimo guardamos los cambios pulsando en el bot贸n 鈥Publicar鈥 y volvemos al men煤 anterior haciendo clic en la flecha para volver atr谩s:

Y de nuevo en la flecha de la izquierda para volver al men煤 principal de personalizaci贸n:

Personalizar colores:

El tema Astra trae unos colores por defecto para el texto, los enlaces, los botones etc. Lo normal es personalizar estos colores para que queden bien con el dise帽o de nuestra p谩gina, por ejemplo si ya tenemos definidos unos colores corporativos para nuestro logo.

Para personalizar los colores en el men煤 principal de personalizaci贸n (Apariencia 鈫 Personalizar) seleccionamos la opci贸n 鈥Global鈥:

En el siguiente men煤  vamos a seleccionar 鈥Colores鈥:

En 鈥Color de tema鈥 hacemos clic en el c铆rculo del color y seleccionamos el color principal que va a tener la web, yo por ejemplo he seleccionado el mismo color que el carrito del logo:

Una vez seleccionado el color pulsamos el bot贸n 鈥Publicar鈥.

En 鈥Color de los enlaces鈥 voy a seleccionar el mismo color otra vez, tu elije el color que m谩s te guste, aqu铆 es donde entra en juego tu creatividad:

Por 煤ltimo guardamos los cambios pulsando el bot贸n 鈥Publicar鈥 y cerramos el editor de configuraciones pulsando en el aspa (鈥淴鈥) de arriba a la izquierda:

M谩s adelante haremos m谩s cambios en el dise帽o de nuestra web, pero de momento ya tenemos la base para empezar a trabajar. 

El pr贸ximo post veremos c贸mo instalar WooCommerce para a帽adir la funcionalidad de tienda online en nuestra web.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon: