Cómo esconder el precio en Squarespace

Hay ocasiones en que necesitamos personalizar nuestra tienda de Squarespace mas allá de lo que nos ofrecen sus características básicas y para lograrlo es necesario hacerle unos pequeños hacks a nuestra pagina.

En esta publicación veremos como esconder el precio de diferentes formas ya que las necesidades de esconder precios en nuestras tiendas de squarespace pudieran ser diferentes.

La manera de hacerlo es muy sencillo y para este tutorial no necesitas saber código, solo seguir las instrucciones de esta publicación al pie de la letra.

Esconder el precio en general de todo el sitio.

Dependiendo de lo que estemos vendiendo es posible que nuestros interesados deban contactarnos antes de comprar, sobre todo por ejemplo cuando vendemos productos muy caros.

Pongamos un ejemplo drástico… una tienda de carros usados.

Siendo honestos nadie va a meter su tarjeta de crédito para pagar $3,000 dólares de una, sobre todo si no tiene certeza de si el carro que va a comprar está en buenas condiciones.

¿Estás de acuerdo?

En este ejemplo de la tienda de autos no solo deberemos esconder el precio, también deberemos esconder el botón de agregar al carrito.

Para esconder los precios en general lo que debemos hacer es dirigirnos al menu principal y seguir las siguientes instrucciones:

Inicio >> Diseno >> Avanzado >> CSS Personalizados

Vemos que se nos presenta una pequeña ventana donde podremos agregar estilos CSS.

Los estilos que agreguemos aquí afectaran a toda tu pagina, sé muy precavido con lo que insertas en los CSS personalizados ya que podrías romper la estructura general de tu sitio web.

Para esconder todos los precios en general del sitio web deberas copiar y pegar el siguiente código CSS en tu plantilla de squarespace, no te saltes ni un solo punto o guión pues podrías afectar el comportamiento de tu sitio.

.sqs-money-native{ display: none; }

Da clic en Guardar y listo, con esto se esconderá en general el precio de todos tus productos en tu sitio web, si quieres volver a mostrarlos basta con borrar el código anterior y volver a dar clic en Guardar.

Sin embargo no tiene sentido esconder el precio si el botón de “Agregar al carrito” sigue visible ¿cierto?

Para ocultarlo en general, agregaremos la siguiente linea de código debajo de la que acabamos de insertar:

.sqs-add-to-cart-button-wrapper{ display: none; }

Tu código deberá verse similar a lo siguiente:

.sqs-money-native{ display: none; }
.sqs-add-to-cart-button-wrapper{ display: none; }

O bien para agregar ambas de una sola con comentarios inserta el siguiente código en lugar de las dos lineas anteriormente mencionadas, de esta forma podrás identificarlas después si te arrepientes y quieres borrarlas para regresar tu sitio web a su estado original.

/* INICIA OCULTAR PRECIOS Y BOTON DE AGREGAR AL CARRITO */
/*Autor: Gerardo Sosz - Web: https://squareavocado.com */
.sqs-money-native, .sqs-add-to-cart-button-wrapper { 
    display:none;
}
/* FINALIZA OCULTAR PRECIOS Y BOTON DE AGREGAR AL CARRITO */

Listo, tu sitio web ya no muestra precios ni botones de “Agregar al Carrito” en general. Recuerda que para regresarlo a su estado original, basta con regresar a los CSS Personalizados y borrar ambas líneas de código.


Esconder el precio en algunos productos

Esta solución es para aquellas tiendas que necesiten tener algunos productos disponibles con precio para que los clientes puedan comprar en linea pero también para deshabilitar la compra de algunos otros artículos.

Por ejemplo retomando el ejemplo de la tienda de autos, supongamos que tenemos en la tienda en linea la venta de autos pero también de refacciones.

Las refacciones tienen un tamaño considerablemente mas pequeño, algunos accesorios son mas accesibles, por lo tanto esta tienda puede tener deshabilitados los precios en los autos pero habilitados en algunas o en todas sus refacciones.

¿Me explico?

Si es tu caso, bueno, te tengo la solución.

Javascript en Inyeccion de Codigo

Para hacer este hack deberemos insertar algo de código en el área de inyección de código de squarespace.

Primero nos dirigimos a:

Inicio >> Configuración >> Avanzado >> Inyección de Código
inyeccion de codigo squarespace squareavocado.com
Inyección de código en Squarespace

Una vez dentro, veremos una parte editable que dice “Encabezado” otra que dice “Pie de pagina” , otra que dice “Pagina bloqueada” y otra que dice “Pagina de confirmación de orden”.

Para que funcione este hack el código que te pongo en esta publicación debemos insertarlo en el area de Encabezado

encabezado inyeccion codigo squarespace squareavocado.com

Insertaremos el siguiente código de Javascript en nuestro Encabezado.

Cópialo tal cual aparece a continuación, con todo y las etiquetas de <script></script> y pégalo en el Encabezado de la sección de Inyección de Código.

<script>
  // Foster: Cambia los precios 0.00 a PSP
window.Squarespace.onInitialize(Y, function(){
  var products = document.querySelectorAll('.ProductItem, .ProductList-item'), i, len = products.length;
  for (i=0; i<len; i++) {
    var price = products[i].querySelector('.sqs-money-native');
    if (price.textContent === '0.00') {
      price.parentNode.textContent = 'PSP';  
    }
  }
});
</script>

Damos clic en Guardar.

Este código lo que hace es que le aplicará el formato de esconder el precio a todos aquellos productos que tengan como precio “0.00” (sin comillas).

Ahora, fíjate en lo siguiente:

En el código recién insertado tenemos un “PSP” en la última linea que dice:

price.parentNode.textContent = “PSP

El PSP lo cambiaremos por el texto que sustituirá al precio, por ejemplo:

price.parentNode.textContent = “Comuníquese con nosotros para información

Este texto es el que va a sustituirse por el precio de 0.00

Sin embargo hasta este punto, no le hemos dicho a Squarespace qué producto o productos son los que queremos que funcionen con este código.

Para hacerlo simplemente nos dirigimos a los productos que queremos esconderles el precio y los vamos a editar.

Vamos a cambiar el precio por 0.00 y listo, recarga tu sitio y veras que todos los productos a los que hayas cambiado el precio por 0.00 ya no muestran el precio sino el texto que agregamos anteriormente.

Veamos el resultado:


Esconder el botón de “Agregar al Carrito”

No sé si te percataste que el código funciona y nos esconde exitosamente el precio en aquellos productos a los que les hemos definido un precio de 0.00

Sin embargo el botón de “Agregar al Carrito” sigue vigente y peor aún, funcional.

Imagina que pasaría si se te olvida y dejas la publicación de tu producto con “Inventario Disponible”.

Un desastre, porque si a alguien se le ocurre agregarlo al carrito, podrá comprarlo por $0.00

Así que para solucionar este detalle, deberemos hacer algo adicional para que Squarespace nos esconda los botones de “Agregar al Carrito” pero solo en aquellos productos que hayamos seleccionado… en este caso, aquellos que llevan un precio de $0.00

Para lograrlo, echaremos mano de la funcionalidad de etiquetas de Squarespace.

Paso 1

Agregaremos una etiqueta llamada “psp” (sin comillas) a todos aquellos productos que tengan $0.00 en el precio.

Paso 2

Damos clic en Guardar.

Después iremos al Menú Principal de nuestra cuenta de Squarespace y nos dirigiremos a la siguiente ruta:

Inicio >> Diseño >> Avanzado >> CSS Personalizados
CSS Personalizados Squarespace

Y obtenemos una ventana como la siguiente:

En esta ventana insertaremos el siguiente código, recuerda no borrar ni un solo punto de lo contrario puedes afectar el funcionamiento de tu sitio.

/* INICIA ESCONDER PRECIOS Y BOTON DE PRODUCTOS PSP 
Autor: Gerardo Sosz - https://squareavocado.com
*/
.tag-psp .ProductItem-summary .ProductItem-details .sqs-add-to-cart-button-wrapper, .tag-psp .ProductItem-summary .ProductItem-details .product-quantity-input {
  display: none;
}
/* TERMINA ESCONDER PRECIOS Y BOTON DE PRODUCTOS PSP */

Con este código muy sencillo de CSS, le decimos a Squarespace que esconda el botón de “Agregar al Carrito” en todos aquellos productos que lleven como etiqueta “psp“.

También esconde el cuadro de “Cantidad” porque sin botón de “Agregar al Carrito” y sin precio pues no tiene sentido que se esté mostrando el cuadro de Cantidad.

¿Estás de acuerdo?

Con el código anterior, obtenemos el siguiente resultado:

esconder precio squarespace squareavocado.com

Fácil ¿cierto?

Con un poco de CSS adicional he cambiado el color y el tamaño del mensaje de “Comuníquese con nosotros para información” y he agregado los textos de “Producto sobre pedido” y “Tel. +52”

Para agregar el texto de “PRODUCTO SOBRE PEDIDO” deberemos insertar en el área de CSS Personalizados el siguiente código:

/*Agregar texto sobre el precio editado
Autor: Gerardo Sosz - https://squareavocado.com
*/
.tag-psp .ProductItem-summary .ProductItem-details .product-price:before {
  color:#196AFF;   /*Aquí cambia el color del texto*/
  font-size:1.5em; /*Aquí cambia el tamaño del texto*/
  content: "<INSERTA AQUI TU TEXTO>\A\A";
  white-space:pre;
}
/*Agregar texto sobre el precio editado*/

Y para agregar el texto con el teléfono, hay que agregar este código adicional:

/*Agregar texto debajo del precio editado
Autor: Gerardo Sosz - https://squareavocado.com
*/
.tag-psp .ProductItem-summary .ProductItem-details .product-price:after {
  color:#0099cc; /*Aquí cambia el color del texto*/
  font-size:1.5em; /*Aquí cambia el tamaño del texto*/
  content: "\A\A Tel. <Inserta aquí el teléfono>";
  white-space:pre;
}
/*Agregar texto debajo del precio editado*/

Y finalmente para cambiarle el tamaño y color al texto de “Comuníquese con nosotros para información” hay que agregar el siguiente código:

/*CAMBIAR ESTILO DE TEXTO EN PRODUCTOS PSP
Autor: Gerardo Sosz - https://squareavocado.com
*/
.tag-psp .ProductItem-summary .ProductItem-details .product-price {
  color:red; /*Aquí cambia el color del texto*/
  font-size:1em; /*Aquí cambia el tamaño del texto*/
}
/*CAMBIAR ESTILO DE TEXTO EN PRODUCTOS PSP*/

¡Listo! si te fue de utilidad, ayúdame compartiendo esta publicación (en los botones de aquí abajo) para que más gente se beneficie de ella y si tienes alguna duda al respecto, puedes encontrarme en Twitter como @square_avocado todos los martes.

¡Hasta otra!

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *