Recursos Tutorial Cómo Crear Una Tienda Online (WolfStore)

Enlaces y Recursos Útiles

Muestra de la Web que Aprenderás a Crear hoy

Lista de Comprobación:

Obtener Dominio y Alojamiento:

LISTADO DE PLUGINS USADOS EN ESTE TUTORIAL

Blocksy Companion ( CreativeThemes )

WPForms ( WPForms )

Code Snippets ( Code Snippets Pro )

WooCommerce ( Automattic )

Stackable ( Gambit Technologies, Inc )

VoxelSlider ( VoxelartStudio )

Imágenes usadas en este Tutorial:

Editar Y OPTIMIZAR IMÁGENES PARA LA WEB

OPTIMIZAR (Aún Más) las IMÁGENES PARA LA WEB

Generar Paletas de Color Web

Obtener Imágenes GRATUITAS de Calidad para Tu Web

Quitar Fondo Imágenes (Si fuera necesario)

Generar Textos de Muestra Automáticamente

Generador Política Privacidad, Cookies, Devoluciones, etc

CSS para Rematar la Web

/* Letras Fondo Bloques Heading */
.heading-el-ella .stk-block-heading__text:after,
.heading-mas-vendidos .stk-block-heading__text:after,
.heading-servicios .stk-block-heading__text:after, 
.heading-novedades-blog .stk-block-heading__text:after,
.heading-precios .stk-block-heading__text:after,
.heading-equipo .stk-block-heading__text:after
{
    position: absolute;
    z-index: -1;
    top: -7%;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-weight: 800;
    line-height: 1;
    color: var(--paletteColor7);
    text-shadow: -1px 0 rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1), 1px 0 rgba(255, 255, 255, 0.1), 0 -1px rgba(255, 255, 255, 0.1);
    left: 0;
    justify-content: initial;
    font-size: clamp(42px, 10vw, 120px);
}

/* Heading Para el o Ella - Pag. Inicio */
.heading-el-ella .stk-block-heading__text:after{
    content: "¿Para El o Ella?";
}

/* Heading Los + Vendidos - Pag. Inicio */
.heading-mas-vendidos .stk-block-heading__text:after{
    content: "Los + Vendidos";
}

/* Heading Servicios - Pag. Inicio */
.heading-servicios .stk-block-heading__text:after{
    content: "Servicios";
}

/* Heading Novedades Blog - Pag. Inicio */
.heading-novedades-blog .stk-block-heading__text:after{
    content: "Novedades Blog";
}



/* Heading Precios - Pag. Servicios */
.heading-precios .stk-block-heading__text:after{
    content: "Precios";
}



/* Heading Nuestro Equipo - Pag. Quienes Somos */
.heading-equipo .stk-block-heading__text:after{
    content: "Nuestro Equipo";
}





/* #################### */

/* Efecto Hover sobre imagen productos mas vendidos - Pag. Inicio */
.wc-block-product-best-sellers img:hover {
    opacity: 0.5;
}





/* #################### */

/* Efecto Hover sobre Cuadricula Destacada */
.stk-block-feature-grid .stk-container {
    transition: all 0.2s ease;
}

.stk-block-feature-grid .stk-container:hover {
    background-color: var(--paletteColor1) !important;
    transform: scale3d(1.05, 1.05, 1);
}





/* #################### */

/* Mejora los márgenes por defecto de los Widgets del pie de página */
[data-column="widget-area-1"] .widget_block:nth-child(2){
    margin-top:20px;
}

[data-column="widget-area-1"] .widget_block:nth-child(4){
    margin-top:0px;
}

[data-column="widget-area-2"] .widget_block:nth-child(2){
    margin-top:20px;
}

[data-column="widget-area-4"] .widget_block:nth-child(2){
    margin-top:20px;
}

[data-column="widget-area-4"] .widget_block:nth-child(3){
    margin-top:20px;
}

[data-column="widget-area-4"] .widget_block:nth-child(4){
    margin-top:10px;
}

[data-column="widget-area-4"] .widget_block:nth-child(5){
    margin-top:24px;
}





/* #################### */

/* Fondo título páginas y entradas */
.page-title {
    position: relative;
}

.blog .page-title:after,
.page .page-title:after {
    content: attr(title);
    position: absolute;
    z-index: -1;
    top: -7%;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(50px, 15vw, 200px);
    font-weight: 800;
    line-height: 1;
    color: var(--paletteColor7);
    text-shadow: -1px 0 rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1), 1px 0 rgba(255, 255, 255, 0.1), 0 -1px rgba(255, 255, 255, 0.1);
}





/* #################### */

/* Mejora el margen inferior de los títulos de los elementos de la barra lateral del blog */
.ct-sidebar h3 {
 margin-bottom: 20px;
}





/* #################### */

/* Elimina el padding y los bordes indeseados de los atributos en los productos variables */
form.variations_form table.variations th {
    padding: 0;
    border: none;
}





/* #################### */
 
/* Centra el Check de Selección de color en los productos variables en Firefox */
@-moz-document url-prefix() {
    .thwvsf-wrapper-ul .thwvsf-wrapper-item-li.attr_swatch_design_1.thwvsf-selected::after { 
        padding-top: 8px;
    }
}





/* #################### */

/* Cambia a verde el color del aviso de stock en producto con inventario */
.in-stock{
	color: green;
}

ShortCode Novedades en el Blog – Página Inicio

[blocksy_posts limit="3" has_pagination="no"]

Configuración SMTP Correo

//Obliga a WordPress a enviar los emails por SMTP sin tener que instalar un plugin para ello
add_action( 'phpmailer_init', 'voxelart_my_phpmailer' );
function voxelart_my_phpmailer( $phpmailer ){
     
    $nombre_tienda = 'Nombre de tu Tienda';
    $dominio = 'tutiendaonline.com';
    $email_corporativo = '[email protected]';
    $password_email_corporativo = 'ContraseñaDeTuEmailCorporativo';
     
    $phpmailer->isSMTP();
    $phpmailer->SMTPAuth = true;
    $phpmailer->Port = 465;
    $phpmailer->SMTPSecure = 'ssl';
    $phpmailer->ClearReplyTos();
    $phpmailer->Host = $dominio;
    $phpmailer->Username = $email_corporativo;
    $phpmailer->Password = $password_email_corporativo;
    $phpmailer->From = $email_corporativo;
    $phpmailer->FromName = $nombre_tienda;
    $phpmailer->addReplyTo($email_corporativo, $nombre_tienda);
     
}

Geolocalización WooCommerce

  1. https://www.maxmind.com/en/geolite2/signup ( Para registrarse en Maxmind )
  2. https://www.maxmind.com/en/account ( Para acceder a Maxmind para generar y consultar Licencia )

RECURSOS Recomendados para este tutorial

1 – COPIA EXACTA DE LA WEB DEL TUTORIAL YA DISEÑADA POR NOSOTROS Y LISTA PARA FUNCIONAR
Te facilitamos los archivos de la web ya diseñada para que los instales fácilmente y puedas tener tu web lista en unos clicks.
Muy útil para crear tu web más rápidamente y también para que puedas comparar nuestro diseño con el tuyo si lo deseas y puedas así detectar posibles errores si no te sale algo de lo que explicamos en el tutorial.

2 – PLUGIN DE DIAPOSITIVAS DINÁMICAS «VOXELSLIDER»
Recuerda que la primera impresión que se lleva tu visitante al acceder a tu web es la más importante y es lo que determinará si tu visitante acabará viendo el resto de tu página. Por eso es muy importante que tu cliente se lleve una primera buena impresión.
Con nuestro plugin de Diapositivas VoxelSlider dejarás boquiabiertos a tus visitantes y les darás una muy buena primera impresión.

3 – MINI CURSO – INSTALAR CHAT EN VIVO PARA TU WEB
En este Mini Curso aprenderás a añadirle un chat en vivo a tu web, para que puedas responder al momento a las dudas que puedan tener tus clientes que estén comprando en la web.
El chat en vivo lo podrás instalar en tu móvil, para que puedas responder a tus clientes en cualquier momento y cualquier sitio fácilmente.

4 – CURSO ACTIVAR COBROS CON TARJETA DE CRÉDITO/DÉBITO Y PAYPAL EN TU TIENDA ONLINE
Facilítale la vida a ti y a tu cliente activando estos cómodos métodos de pago, en los que tu cliente podrá pagarte tranquilamente desde el sofá de su casa, sin tener que dirigirse expresamente a ninguna oficina bancaria para pagarte. Para activar estos seguros métodos de pago, tan solo pincha en el siguiente botón que te llevará a nuestra plataforma de cursos donde aprenderás a activarlos.

5 – MINI CURSO – VER ESTADÍSTICAS USO DE WEB
En este Mini Curso aprenderás a añadirle una herramienta de analítica a tu web con la cual podrás ver como utilizan tu web los visitantes.
Podrás ver cuales son las páginas mas vistas de tu web, de que países son tus visitantes, desde qué dispositivos ven tu web tus visitantes, desde qué redes sociales te visitan tus clientes, etc

Productos EXTERNOS recomendados

TEMA BLOCKSY PRO
En el tutorial usaremos la versión gratuita del Tema «Blocksy», pero si deseas obtener la versión PRO por todas las interesantes ventajas que ofrece, obtenlo desde el siguiente botón y usa nuestro cupón especial de descuento VOXELART10, que te dará un 10% de descuento en tu compra.

PLUGIN STACKABLE PRO
El Plugin «Stackable» nos permite diseñar fácil y visualmente las páginas de la tienda. Este plugin tiene una versión gratuita y otra de pago. Para el tutorial usaremos la versión gratuita, pero si deseas obtener la versión PRO por todas las ventajas que ofrece, puedes adquirirla con un 10% de descuento desde el siguiente botón usando nuestro cupón VOXELART10, que te dará un 10% de descuento en la compra.

Volver a Página Principal Tutorial