• Ir a navegación principal
  • Ir al contenido principal

CASUALWEBS

ANA PASCUAL WEB ESTUDIO

  • Proyectos
  • Tiendas online
  • Hola
  • Blog
  • Contacto

Pequeños cambios

Aviso en toda la tienda WooCommerce

4 septiembre, 2019 by apascual001

Hola!

Hoy hablaremos de WooCommerce y del aviso en toda la tienda.

Cuando tienes WooCommerce activo aparece una pestaña en el personalizador para este plugin. Una de las opciones se llama aviso en la tienda y se muestra en la parte superior de nuestra web. Éste es un ejemplo:

Aviso en toda la tienda WooCommerce

Activar el aviso WooCommerce

Para activar el aviso tendremos que ir a Apariencia / Personalizar / WooCommerce / Aviso en la tienda

WooCommerce aviso tienda

Una vez dentro del bloque veremos un checkbox para activar el aviso en la tienda y un cuadro de texto para rellenar:

WooCommerce activar aviso tienda

Programar el aviso

Este aviso además es programable. Todos los cambios que hacemos en el personalizador son programables para una fecha y hora. Una vez que hacemos cambios en el personalizador veremos que a la derecha de el botón de Publicar tenemos una rueda de configuración:

WooCommerce programar aviso tienda

Una vez clicamos en la rueda veremos que se nos aparecen distintas opciones. Además de la de publicar por defecto, también tenemos la opción de guardar los cambios hechos en el personalizador como borrador o la opción de Programar. Si accedemos a esta última se nos abrirá la opción de introducir una fecha y hora para hacer visibles nuestros cambios. De esta manera podemos programar el aviso de nuestra tienda para una fecha señalada.

WooCommerce programar aviso tienda

Sólo nos quedará clicar el botón de Programar para ver nuestros cambios en acción.

Archivado en:Pequeños cambios, Tips, WooCommerce

CSS para oscurecer o colorear una imagen

26 enero, 2018 by apascual001

Uno de los recursos CSS que más ultilizo es el de oscurecer o colorear las imágenes.
Lo leí hace un tiempo en CSS-Tricks y lo sigo usando. Se trata de añadir un gradiente de color al background así podemos ponerlo por encima de la imagen.

Vamos a verlo con un ejemplo. Crearemos un div con la clase «oscurecer»:

<div class="oscurecer"></div>

Y luego en nuestro CSS le vamos a asignar un background que contendrá el gradiente y la imagen de fondo. El gradiente será el color negro con una opacidad del 0.5. El truco es hacer un gradiente con el mismo color! 😉
Recordar también dar un ancho y una altura al div igual a las medidas de la imagen:

.oscurecer {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://www.comolademo.es/demos/colorear-foto.jpg);
height: 480px;
width: 720px;

}

Para añadir CSS a tu tema puedes seguir esta entrada donde lo expliqué en detalle.

Esta es la foto original:

Veamos el resultado con la clase oscurecer:

 

Ahora vamos a hacer lo mismo pero con un color que no sea negro; por ejemplo en rojo.

Crearemos un div con la clase «colorear».

<div class="colorear"></div>

Y luego creremos el CSS con el gradiente en rojo para el background.

.colorear { 
background-image: linear-gradient(
      rgba(255, 0, 0, 0.3), 
      rgba(255, 0, 0, 0.3)
    ),
 url(https://www.comolademo.es/demos/colorear-foto.jpg); 
height: 480px; 
width: 720px; 
}

El resultado:

 

 
Y finalmente haremos un gradiente de dos colores, un azul y un rosa. Crearemos un div con la clase «gradiente»:

<div class="gradiente"></div>

Y en este caso el CSS serà:

.gradiente { 
background-image: linear-gradient(
      rgba(25, 209, 231, 0.5),
      rgba(243, 17, 224, 0.5)
    ),
 url(https://www.comolademo.es/demos/colorear-foto.jpg); 
height: 480px; 
width: 720px; 
}

Comprobemos el efecto:

 

 
Pues ya lo véis que fácil es dar un toque colorista a vuestras imágenes.
Saludos y espero vuestros comentarios o consultas!

Ana

Archivado en:Pequeños cambios, Redecorar

Ocultar los productos relacionados en WooCommerce

18 enero, 2018 by apascual001

En la página de los productos individuales de los temas con WooCommerce se muestran en la parte inferior unos productos relacionados:

Outfitter Productos-relacionados
Outfitter Productos-relacionados

Estos productos son de la misma categoría del que se muestra individualmente.
Para evitar que se muestren podemos añadir este código al archivo functions.php del tema activo:

 //Eliminar productos relacionados
 
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Archivado en:Pequeños cambios, Tips, WooCommerce

Outfitter Pro – Añadir categorías de producto en la home con widget de imagen

27 diciembre, 2017 by apascual001

Después de haber visto como añadir las categorías de la tienda a la portada de nuestra web con shortcodes, vamos a hacerlo de nuevo con el widget de Imagen.
Para ello he preparado unas imágenes que nos sugieren el contenido de cada categoría.
También enlazaremos cada imagen con los artículos de la categoría correspondiente.

Os dejo una imagen de como nos va a quedar y las explicaciones detalladas en el vídeo.

Outfitter con categorías de nuestra tienda en portada
Outfitter con categorías de nuestra tienda en portada

Archivado en:Outfitter pro, Pequeños cambios

Outfitter Pro – Añadir categorías de producto en la home con shortcodes

20 diciembre, 2017 by apascual001

Hoy vamos a ver como insertar las categorías de nuestros porductos en la home del tema Outfitter Pro de StudioPress.

Vamos a añadir un nuevo widget en la Front Page 1 con un shortcode de WooCommerce que nos muestre las categorías.

Tema Outfitter con categorías de producto en la home
Tema Outfitter con categorías de producto en la home

Empecemos; el primer paso es ir a Apariencia/Personalizar/Widgets/Front Page 1 y añadir un widget de html. Añadiremos un shortcode de WooCommerce que nos muestra las categorías de la tienda:

[product_categories number="4"]

En este caso hemos limitado el número de categorías a 4.

Una vez añadido este widget las categorías ya se mostrarán el la home:

Tema Outfitter con shortcode WooCommerce en Front Page 1
Tema Outfitter con shortcode WooCommerce en Front Page 1

Luego vamos a tener que ajustar los estilos de la plantilla para que estas 4 categorías se muestren en una sola fila ocupando cada una de ellas el 25% del ancho.

También ajustaremos los mediaqueries para mantener una buena visualización en todos los dispositivos.

Os dejo el CSS para aplicar todos estos cambios:

.front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(6n+1), .front-page-1	.woocommerce ul.products li.product.masonry-brick {
    width: 25%;
}

@media only screen and (max-width: 1023px) {
	.js .front-page-1	 .masonry-brick:nth-of-type(3n+1), .js .front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(3n+1), .woocommerce.full-width-content div.product div.images.woocommerce-product-gallery{
    width: 25%;
}
	
}
@media only screen and (max-width: 600px) {
	.js .front-page-1	 .masonry-brick:nth-of-type(3n+1), .js .front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(3n+1), .woocommerce.full-width-content div.product div.images.woocommerce-product-gallery, .front-page-1	.woocommerce ul.products li.product.masonry-brick:nth-of-type(6n+1), .front-page-1	.woocommerce ul.products li.product.masonry-brick{
    width: 100%;
}
	
}

En el vídeo os lo explico con todo detalle:

Finalmente he añadido un poco más de CSS para que los títulos de las categorías se muestren igual que los títulos de los productos:

/*título categorias*/

.woocommerce ul.products li.product .woocommerce-loop-category__title {
	background: #ffffff;
	color: #000;
	left: 0;
	padding: 10px 30px;
	margin-right: 70px;
	position: absolute;
	text-align: left;
	text-decoration: none;
	top: 20px;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title:before {
	background-color: #548200;
	bottom: -2px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	-webkit-transform: scaleX(0);
	transform:         scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition:         all 0.3s ease-in-out 0s;
	visibility: hidden;
	width: 100%;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title:hover:before {
	-webkit-transform: scaleX(1);
	transform:         scaleX(1);
	visibility: visible;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition:         all 0.3s ease-in-out 0s;
	visibility: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title {
	font-size: 16px;
	font-size: 1.6rem;
}

.woocommerce ul.products li.product:focus .woocommerce-loop-category__title,
.woocommerce ul.products li.product.focused .woocommerce-loop-category__title,
.woocommerce ul.products li.product:hover .woocommerce-loop-category__title{
	opacity: 1;
	visibility: visible;
}

No olvidéis guardar los cambios!

Archivado en:Outfitter pro, Pequeños cambios, WooCommerce

¿Cómo hacer que el encabezado sea fijo en Outfitter Pro?

7 diciembre, 2017 by apascual001

Para hacer que el header o encabezado del tema Outfitter Pro de Genesis se mantenga fijo al hacer scroll, tendremos que hacer los siguientes cambios CSS.

Cambiar la position de relative a fixed del header .

Dar un ancho del 90% para que cuadre la caja del header con la del site-container.

También vemos que al hacer scroll se superponen los artículos al encabezado.  Por ello tendremos que dar un z-index al header inferior.

Por último quitamos el margen que tiene el site-container en la parte superior para fijar el encabezado arriba de todo.

En resumen, el codigo CSS que tenéis que añadir al tema es:

.site-header { 
    position: fixed;
    width: 90%;
    z-index: 1;
}

.site-container {
    padding: 0 20px 20px; 
}

También os dejo las instrucciones sobre como añadir CSS a tu plantilla.

 

 

Archivado en:Outfitter pro, Pequeños cambios, Tips

  • Ir a la página 1
  • Ir a la página 2
  • Ir a la página siguiente »

© 2022 · Aviso legal · Política de privacidad

Esta web solo instalará cookies analíticas y de publicidad si lo aceptas. Puedes informarte más sobre qué cookies estamos utilizando en los ajustes Ajustes Aceptar Rechazar Más información
Política de cookies

Resumen de privacidad

Esta web solo instalará cookies analíticas y de publicidad comportamiento si usted lo acepta. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles. Puede encontrar más información en nuestra política de cookies
Cookies estrictamente necesarias
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies analíticas
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares
GUARDAR Y ACEPTAR