Storefront Theme: cómo instalarlo y configurarlo

Publicado: 2018-01-12

Storefront es uno de los temas más flexibles y extensibles cuando se trata de lanzar una tienda WooCommerce usando WordPress.

Debido a su arquitectura de código limpio, se hizo muy popular entre los usuarios y actualmente más de 100,000 tiendas en línea usan Storefront como su tema de WordPress.

Instalación del tema de escaparate de WooCommerce

Hay dos formas de instalar el tema Storefront, ya sea buscando el tema desde su panel de WP o cargando el tema manualmente.

Instalación usando el panel de WordPress

La forma más rápida de instalar Storefront es a través del panel de control de WordPress. Siga estos pasos para instalar Storefront a través del panel de WordPress.

Vaya a Apariencia > Temas > Agregar nuevo
Escribe ' tienda ' en el cuadro de búsqueda y pulsa Intro.
Pasa el cursor sobre la captura de pantalla de Storefront.
Seleccione el botón ' Instalar '.
Haga clic en Activar

Instalar Storefront manualmente

Descargue la última versión de Storefront de wordpress.org
Vaya a Apariencia > Temas > Agregar nuevo
Haga clic en Cargar tema y elija el archivo zip descargado previamente.
Haga clic en Instalar ahora
Haga clic en Activar

Configuración de la página de inicio

Storefront tiene una plantilla de página de inicio integrada que está bien pensada. Su estructura limpia ayudará a tu audiencia a encontrar fácilmente los productos que vendes.

Hay 6 secciones en la plantilla predeterminada de la página de inicio de Storefront. Pero puede agregar o eliminar la sección según sus necesidades.

Secciones predeterminadas de la página de inicio:

Contenido de página
Categorías de Producto
Productos recientes
Productos Destacados
productos populares
Productos en venta
Productos más vendidos

Asignación de plantilla de página de inicio

Para configurar la plantilla de la página de inicio, siga estos pasos:

Vaya a Panel -> Páginas y cree una página titulada " Inicio " o lo que desee.
Agregue cualquier contenido de bienvenida que desee, que se mostrará arriba de los productos.
En el lado derecho, encontrará un cuadro titulado " Atributos de página "
Seleccione " Página de inicio" en el menú desplegable " Plantilla ".
Haga clic en Publicar o Actualizar para guardar el cambio.

Visualización de la plantilla de la página de inicio

Después de publicar la página, ahora debe mostrar esta página de inicio como la página principal de su sitio web. Entonces, cualquiera que llegue a su sitio web primero vea esta página. Para configurar esto, siga estos pasos:

Vaya a Panel de control > Configuración > Lectura
En las pantallas de su página de inicio, seleccione Una página estática (seleccione a continuación)
Seleccione la página de asignación de la plantilla de la página de inicio anterior en el menú desplegable de la página de inicio.
Haga clic en Guardar cambios

Reordenar las secciones de la página de inicio de la tienda

Puede cambiar el orden de las secciones de la página de inicio de Storefront usando ganchos o usando un complemento llamado Control de página de inicio. Siga los pasos a continuación para reordenar las secciones de su página de inicio:

Descargar e instalar el control de la página de inicio
Vaya a Apariencia -> Personalizar -> Control de página de inicio
Arrastra y reordena las secciones según tus necesidades.
Haga clic en Guardar y publicar para guardar los cambios.

Configuración del menú de navegación

En el tema Storefront, puede mostrar el menú en 3 ubicaciones.

Menú principal: aparece justo debajo del logotipo del sitio.
Menú secundario: al lado del logotipo cerca del cuadro de búsqueda.
Menú portátil: menú para dispositivos móviles.

Configuración de los menús

De forma predeterminada, si no se establece un menú principal específico, WordPress muestra todas sus páginas como su menú principal. A veces, confunde a los usuarios y les dificulta descubrir cómo llegaron estas páginas al menú.

Crear un nuevo menú y agregarle páginas

Vaya al panel de administración y luego, Apariencia > Menús
En la parte superior encontrará el campo Nombre del menú. Escribe aquí el nombre de tu menú.
Desde el lado izquierdo, haga clic en Páginas (asumiendo que desea agregar páginas al menú)
Haga clic en Ver todo para obtener una lista de todas las páginas publicadas.
Marque las páginas que desea que aparezcan en el menú.
Después de seleccionar la página, haga clic en el botón Agregar al menú.
Arrastre y suelte el elemento del menú para reorganizarlos según su gusto.
Haga clic en Guardar Menú

Asignación del menú

Después de crear el menú, asigne el menú a la ubicación donde desea que se muestre. Vaya a Apariencia > Menús > Configuración del menú y marque la ubicación en la casilla de verificación Mostrar ubicación .

Adición de categorías de productos a su menú

Vaya al panel de administración y luego, Apariencia > Menús
Haga clic en Opciones de pantalla en la parte superior izquierda y verifique Categorías de productos
Ahora, en el panel izquierdo, aparecerá una pestaña de Categorías de productos.
Haga clic en la pestaña Categorías de productos para expandir, seleccione las categorías
Después de seleccionar, haga clic en el botón Agregar al menú .
Arrastre y suelte el elemento del menú para reorganizarlos según su gusto.
Haga clic en el menú Guardar

Configuración de widgets

Storefront le permite mostrar seis regiones de widgets en 3 áreas diferentes.

Barra lateral: izquierda o derecha del contenido del sitio principal,
Debajo del encabezado: justo debajo del encabezado del sitio y arriba del contenido.
Columna de pie de página 1 – Área de pie de página
Columna de pie de página 2 – Área de pie de página
Columna de pie de página 3 – Área de pie de página
Columna de pie de página 4 – Área de pie de página

Configuración de WooCommerce

Instalación de WooCommerce

Vaya a Panel de control > Complementos > Agregar nuevo > Buscar complementos
Busque "WooCommerce".
Haga clic en Instalar ahora .
Haga clic en Activar .

Configuración de WooCommerce

Después de activar WooCommerce, se le pedirá que instale WooCommerce con un asistente. Se encargará de todos los ajustes iniciales. Se divide en 6 partes.

Configuración de página: configura automáticamente las páginas esenciales (Tienda, Carrito, Pago, Mi cuenta).
Ubicación de la tienda : configure la ubicación de la tienda, la moneda y el impuesto sobre las ventas
Envío – Configurar unidad de peso y unidad de dimensión
Pagos : configurar la pasarela de pago.
Tema : instala un tema compatible con WooCommerce.
Listo : (opcional) permite que WooCommerce recopile información de uso.

Puede realizar todas estas configuraciones cuando lo desee desde el panel de control de WooCommerce.

Agregar un producto a WooCommerce

Ir al Panel de WordPress
Haga clic en Productos > Agregar nuevo
Escriba el nombre o título de su producto en el campo Nombre del producto.
Escriba la descripción de su producto en el editor a continuación.
Ahora debe cargar una imagen destacada de su producto y una imagen adicional a una galería de productos.
Uno a la derecha encontrará el cuadro titulado Imagen del producto y galería de productos.
Cargue la imagen destacada en la imagen del producto e imágenes adicionales en la galería del producto
Haga clic en Publicar .

Configuración de precio y atributo del producto

Para configurar el precio del producto Vaya a Panel de control > Productos y seleccione cualquier producto. Luego, desplácese hacia abajo hasta la sección Datos del producto. Aquí hay una breve descripción de todas las configuraciones de la sección de datos del producto:

tipo de producto

Producto simple : Un solo producto simple.
Producto agrupado : Un producto que forma parte de una colección.
Producto externo/afiliado : producto que aparece en su tienda pero el producto real se vende en otro lugar.
Producto variable : un producto con variaciones (tamaño, colores)
Producto virtual : Un producto que no requiere envío.
Producto descargable : un producto en el que debe proporcionar un archivo descargable.

General

Precio Regular : Precio regular del producto.
Precio de venta : precio del producto con descuento.

Inventario

SKU : la unidad de mantenimiento de existencias (SKU) realiza un seguimiento de los productos
Administrar stock : habilitar la gestión de stock
Estado del stock : Si el producto está o no en stock o agotado.
Vendido individualmente : se puede vender en un solo pedido.

Transporte

Peso: Peso del producto.
Dimensiones: Largo, ancho y alto del producto.
Clase de envío: Agrupa productos de tipo similar a cierto método de envío.

Productos vinculados

Upsells : Muestre productos relacionados debajo de una página de detalles del producto.
Ventas cruzadas : muestra productos relacionados en la página del carrito.
Atributos : seleccione el atributo global de sus productos.

Avanzado

Nota de compra : Nota a enviar al cliente después de finalizar la compra.
Orden de menú : posición de pedido personalizada para este producto.
Habilitar reseñas : habilite o deshabilite las reseñas de productos.

Personalización de escaparate

Cómo agregar un logotipo

Siga estos pasos para agregar y mostrar un logotipo en su sitio web:
1. Vaya a Administración de WordPress y luego Apariencia > Personalizar
2. Luego vaya a Identidad del sitio > Logotipo
3. Haga clic en Seleccionar logotipo para cargar la imagen de su logotipo. (Tamaño de imagen recomendado: 470px X 110px)
4. Haga clic en Publicar.

Dónde cargar el favicon del sitio

Siga estos pasos para agregar y mostrar favicon en su sitio web:
1. Vaya a Administración de WordPress y luego Apariencia > Personalizar
2. Luego vaya a Identidad del sitio > Ícono del sitio
3. Haga clic en Seleccionar imagen para cargar la imagen de su logotipo. (Tamaño de imagen recomendado: 512px X 512px)
4. Haga clic en Publicar.

Cómo cambiar el archivo de publicaciones o el diseño del blog

Vaya a Apariencia > Personalizar > Personalizador de blog > Archivos de publicaciones
Seleccione el diseño de Diseño de archivo posterior
Haga clic en Publicar

Cómo cambiar el archivo de publicaciones o la columna del blog

Vaya a Apariencia > Personalizar > Personalizador de blog > Archivos de publicaciones
Seleccione el número de columna (ancho completo, 2 columnas, 3 columnas y 4 columnas) de la columna del archivo posterior
Haga clic en Publicar

Cómo cambiar el diseño de una sola publicación o artículo

Vaya a Apariencia > Personalizar > Personalizador de blog > Publicación única
Seleccione el diseño de Diseño de publicación única
Haga clic en Publicar

Cómo cambiar la fuente

Vaya a Apariencia > Personalizar > Estilos generales > Tipografía
Seleccione la fuente de Emparejamientos de fuentes
Haga clic en Publicar

Personalización de WooCommerce

Cómo cambiar el diseño de la página de la tienda

Vaya a Apariencia > Personalizar > WooCommerce > Página de la tienda – Listados de productos
Seleccione el diseño del diseño del archivo de productos
Haga clic en Publicar

Cómo cambiar el diseño de la página de detalles del producto

Vaya a Apariencia > Personalizar > WooCommerce > Página de la tienda – Listados de productos
Seleccione el diseño del diseño del archivo de productos
Haga clic en Publicar