() translation by (you can also view the original English article)
WooCommerce es la plataforma más popular y "personalizable de eCommerce para construir tu negocio online". Puedes descargar WooCommerce de forma gratuita, pero únicamente descubrirás su potencial cuando empieces a usar temas y plugins de WordPress para WooCommerce.
Pero, ¿necesitas realmente usar un tema especifico para WooCommerce?
Aunque no es necesario, lo considero muy recomendable.
Los temas para WooCommerce no solo están enfocados al eCommerce desde el punto de vista del diseño, sino que el tema en sí mismo se centra íntegramente en los estilos de diseño intrínsecos a WooCommerce. El CSS que usa WooCommerce para definir la manera en la que los productos se muestran es usado después por el tema WordPress de WooCommerce para unificarlo todo—consiguiendo así algunos de los diseños de tiendas eCommerce más atractivos.
Por no mencionar el hecho de que la instalación y configuración de un nuevo tema de WordPress para WooCommerce no es más complicada de lo que es configurar cualquier otro tema de WordPress.
Déjame enseñarte a hacerlo
Cómo Instalar y Configurar un Nuevo Tema WooCommerce en WordPress
Si ya tienes WooCommerce instalado, ¡genial! Si no es así, te recomiendo encarecidamente que leas la Guía de Inicio a WooCommerce: Introducción de Rachel McCollin. Esto te introducirá a WooCommerce y te llevará a través de todos los pasos necesarios para obtener tu tienda online lista y funcionando.
Ahora, empecemos por cómo instalar y configurar un nuevo tema WooCommerce en WordPress.
Paso 1: Instala Información Ficticia
Si ya has añadido tus productos a WooCommerce, te recomiendo que te saltes este paso y empieces con el siguiente.
Instalar información falsa añade productos ficticios al frente de tu tienda para ayudarte a visualizarla con productos. Cuando hayas completado la instalación y configuración de tu nuevo tema WooCommerce para WordPress, querrás eliminar toda la información ficticia antes de añadir tus productos. Si no lo haces así corres el riesgo de eliminar accidentalmente la información de tus propios productos.
La información ficticia se incluye en tu plugin WooCommerce. Si has instalado WooCommerce desde el área de Administración de WordPress, continúa y descarga el plugin desde el Directorio de Plugins de WordPress a tu ordenador. Será más sencillo descargarla así que hacerlo accediendo a tu FTP, dirigiéndote después a tu directorio de plugins para descargar la información ficticia desde allí.
Una vez se haya completado la descarga, descomprime el archivo para poder importar el archivo de datos ficticios Productos de WooCommerce (CSV).
Desde Herramientas pulsa Importar:
No te confundas con el archivo "Tasas de impuestos de WooCommerce (CSV)". Podrás hacer esto más tarde si quieres. Para la Información Ficticia de WooCommerce (Dummy Data), querrás elegir WordPress.
Es muy probable que no tengas el plugin WordPress Importer instalado, así que pulsa Instalar Ahora.
Una vez instalado, prosigue con Activar el Plugin y Ejecutar importador.
¿Recuerdas el lugar en el que descargaste y descomprimiste el plugin WooCommerce? ¡Genial! Ahora tienes que pulsar sobre Elegir Archivo y seleccionar la ruta hasta él.
Tu información ficticia debería estar en tu carpeta descomprimida: (woocommerce.version.number) > woocommerce > dummy-data.
Abre la carpeta dummy-data, selecciona dummy-data.xml, y ya puedes subir el archivo e importarlo.
Esto es lo último que tendrás que hacer antes de importar toda la información ficticia.
Algunas de estas cosas dependen de las preferencias personales, pero aquí tienes lo que yo hago (capturas de pantalla más abajo):
Importa el autor por defecto "wooteam" en lugar de crear un nuevo autor o usar uno preexistente. De esta forma sabrás qué contenido fue importado/creado durante este proceso basándote en el nombre del autor (te recomiendo eliminar el autor una vez elimines los datos ficticios cuando hayas terminado con la instalación y configuración del nuevo tema de WooCommerce para WordPress).
También te recomiendo Descargar e importar los adjuntos de manera que tengas a tu disposición las imágenes asociadas con cada producto (una vez más, querrás asegurarte de que los archivos media son eliminados cuando hayas terminado con los datos ficticios).
Una vez hayas realizado estas selecciones, envíalas:
Visita tusitioweb.com/shop/ y entonces deberías ser capaz de ver una tienda completamente importada.
¡Guau! ¡Lo lograste!
No está muy bien diseñada, ¿cierto? La buena noticia es que vamos a instalar un atractivo tema de WooCommerce para WorPress como es el Savoy.
(Nota: una vez hayas terminado de instalar y configurar tu tema, no te olvides de eliminar los productos y las imágenes de la importación de datos ficticios antes de empezar a añadir tus propios productos.)
Paso 2: Instalar un Tema WooCommerce en WordPress
Ahora, veamos cómo instalar un tema WooCommerce. Si todavía no has descargado tu tema de Comercio para Wordpress, descárgalo a tu ordenador (asegúrate de donde lo descargas, para acceder más tarde con facilidad).
Existen dos formas diferentes de instalar tu tema:
- Accediendo a tu sitio web vía FTP
- Desde la Administración de WordPress
Cargar Tu Tema Vía FTP
Si te sientes cómodo usando FPT, conecta con tu servidor y dirígete a tu directorio wp-content > themes. Ahí es donde debes alojar tu tema. Antes de enviar tu carpeta descomprimida a tu servidor, cerciórate de que estás subiendo tu tema. Echemos un vistazo más de cerca a modo de ejemplo con un tema de ThemeForest.
Tras descomprimir tu descarga, verás que aparecen varias carpetas distintas.
No todos los temas que descargues estarán empaquetados así. Algunas veces la carpeta comprimida que descargas ya es en sí la carpeta del tema. Siempre es una buena idea comprobarlo, ya que suele variar de un proveedor a otro.
El tema Savoy - Minimalist AJAX WooCommerce Theme incluye algunos elementos extra como documentación, complementos, etc. Si miras en la carpeta Theme Files de savoy, encontrarás el tema en sí (savoy.zip).
Si lo estás instalando vía FTP, sube la carpeta comprimida de tu tema (por ejemplo: "savoy") al directorio de temas. Si no estás seguro de como usar el método FTP o prefieres instalarlo desde el Administrador de WordPress, también es posible. Yo también prefiero usar el área de Administración de WordPress.
Desde WordPress Admin
Instalar un tema desde la Administración de WordPress requiere que la carpeta del tema esté comprimida (themefolder.zip). Como ya hemos comentado, querrás asegurarte de que estás haciéndolo con la carpeta del tema actual y no con la carpeta en la que éste podría estar empaquetado.
Desde WordPress Admin, dentro del menú Apariencia, pulsa Temas:
Añadir un nuevo tema:
Cargar el tema:
¿Recuerdas dónde está el archivo zip de tu tema?
(Nuestro tema de ejemplo se denomina: savoy.zip)
Pulsa Elegir Archivo y busca la ruta hacia su localización:
Una vez instalado, puedes visitar nuevamente Apariencia > Temas en tu Administración de WordPress para comprobar que ha sido instalado o para activarlo directamente.
Como puedes ver (abajo), el tema Savoy ha sido instalado con éxito, así que haz clic sobre Activar:
Ahora que ya tienes tu tema WooCommerce para WordPress instalado y activado satisfactoriamente, configurémoslo.
Paso 3: Configurar un Tema WooCommerce en WordPress
No todos los temas se personalizan exactamente de la misma manera. Depende en gran medida de como haya sido diseñado y desarrollado, así que es posible que encuentres algunas diferencias entre lo que veamos en este tutorial y lo que tu encuentres. No obstante, generalmente esto te debería ayudar a configurar tu tema WooCommerce en WordPress—sin importar qué tema WooCommerce estés usando, ya sea de ThemeForest o cualquier otro proveedor.
Plugins Recomendados/Requeridos
Después de instalar y activar el tema Savoy, serás notificado con recomendaciones relativas a plugins:
En ocasiones tu tema te notifica sobre plugins recomendados mientras otros incluyen estas recomendaciones dentro de sus archivos de documentación. Pueden existir funciones relativas al diseño del tema— como sliders opcionales—que no están ya incorporados mediante código al tema, pero para los que está preparado.
Pulsa sobre Begin installing plugins (Comenzar la instalación de plugins) en el tema Savoy para ver el listado de plugins recomendados.
Nuevamente, esto puede variar de un tema a otro, pero en este caso, podrías querer o no instalarlos todos.
Por ejemplo, aunque Savoy recomienda la instalación de Contact Form 7 e incluye estilos para él, podrías preferir usar otro plugin para formularios en lugar de éste. Quizá quieras usar algo como Gravity Forms o Ninja Forms.
Un plugin como Regenerate Thumbnails (regenerar miniaturas) es excelente para aquellos que tengan una tienda online existente y sus imágenes configuradas según los requisitos de un tema anterior. Este plugin recorrerá los archivos de tu Librería Multimedia de WordPress y redimensionará todas tus imágenes para que funcionen correctamente con tu nuevo tema. Puede que quieras o no hacer esto con la información ficticia, y en consecuencia igual prefieres obviar el plugin (pero te recomiendo que lo instales, de manera que los tamaños de las imágenes se adapten bien al tema, aunque sea solo para realizar comprobaciones).
Sin embargo un plugin como Envato Toolkit, es muy valioso para los temas adquiridos en ThemeForest, asegurándote que serás notificado cada vez que el tema se actualice.
Te recomendaría que instales todos los plugins recomendados cuando estés en tus comienzos. Siempre podrás eliminar un plugin más tarde si no lo necesitas, mientras que si no instalas un plugin necesario, podrías sentirte frustrado porque el tema parece no "funcionar" o no está haciendo algo que viste en su demo.
Una vez hayas instalado todos, algunos, o ninguno de los plugins recomendados y/o requeridos, no te olvides de activarlos:
Si estás usando un tema aquirido en ThemeForest, como el Savoy en nuestro ejemplo, no olvides introducir tu nombre de usuario y clave secreta de la API (Secret API Key) en Envato WordPress Toolkit para asegurar las pertinentes actualizaciones del tema.
Personalizar
Esta es la parte de la instalación y configuración de los ajustes de tu tema WooCommerce para WordPress en la que el asunto se pone interesante y empiezas a ver que tu web empieza a cobrar vida.
Puedes acceder el Personalizador de WordPress (WordPress Customizer) desde el menú: Apariencia > Personalizar. O ir a la página Temas bajo Apariencia > Temas y allí pulsar el botón Personalizar:
Bienvenido al Personalizador de WordPress:
Aquí es donde realizaremos algunos cambios antes de adentrarnos en configuraciones más complejas.
Lo primero que verás es Identidad del sitio. Y es en lugar en el que puedes cambiar el Título del Sitio y su Descripción corta.
Con frecuencia también se puede añadir desde aquí una imagen de cabecera y/o Icono del sitio (esto puede variar de un tema a otro).
Lo siguiente es configurar tus menús.
Si se trata de una configuración nueva de WooCommerce o una en la que todavía no hayas creado ninguna página, no tendrás muchas cosas para personalizar aquí. En cualquier caso, cuando instalas WooCommerce, automáticamente se añaden algunas páginas que estoy seguro querrás tener en tu menú.
Puedes añadir o crear un menú nuevo facilmente:
Una vez hayas añadido un menú (o varios), podrás seleccionar el lugar en el que quieres que aparezca así como los elementos que lo componen (p. ej. enlaces personalizados, entradas, páginas, productos, etc.).
Esto te proporciona mucha flexibilidad a la hora de determinar cómo funcionará tu tienda. No tengas miedo a realizar pruebas con él o cambiarlo más tarde.
Antes de salir del Personalizador de WordPress, querrás indicarle que la página principal del sitio se corresponda con la de la tienda:
Marca la Página frontal muestra como Una página estática y selecciona para la Portada la página de tu Tienda. La página Tienda se creó automáticamente cuando instalaste el plugin WooCommerce.
La página Entradas, depende de si quieres o no disponer de un blog o sección de noticias en tu sitio WooCommerce. Si es así, necesitarás crear una página para el blog y seleccionarla como la página correspondiente a ese propósito desde el Personalizador de WordPress o desde el menú de Admin, Ajustes de WordPress > Lectura.
Los Resultados
Con alguna configuración básica, ya puedes ver lo estupenda que puede acabar siendo tu tienda online usando un tema WooCommerde para WordPress.
Las páginas para producto individual son increíbles:
Incluso incluye productos relacionados:
El tema Savoy - Minimalist AJAX WooCommerce Theme te permite ajustar con precisión muchos elementos desde dentro del sitio y puedes ir incluso más allá de lo que yo te he mostrado en este tutorial (asegúrate de leer la documentación de tu tema para aprender más sobre sus especificaciones). Solo te he mostrado los cambios que pueden realizarse desde el Personalizador de WordPress y que además se pueden llevar a cabo con prácticamente cualquier tema que uses.
Conclusión
Has podido ver lo sencillos que pueden ser los primeros pasos de configuración de tu nuevo tema WooCommerce para WordPress y lo bien que se ven—todo ello gracias al uso de un tema diseñado específicamente para WooCommerce.
Existen muchos plugins de WordPress útiles para WooCommerce disponibles en CodeCanyon y también elegantes y eficaces temas de WooCommerce para WordPress en ThemeForest.
Podría estar bien echar un vistazo a los temas de ThemeForest para WooCommerce más vendidos para empezar (Savoy sigue siendo mi favorito). estoy seguro de que encontrarás algo que encaje perfectamente con tu tienda eCommerce. O navega a través de nuestro muestrario para encontrar lo más adecuado a tu tienda:
¿Estás usando WooCommerce para vender?
