Boton de whatsApp con join.chat y barra storefront

Themes
1

Les consulto, estoy usando el theme Storefront, y bueno también instalé el botón de whatsApp con un plugin llamado Join.chat.
El tema es que en la versión web todo perfecto, pero en la versión de celular, el botón de whatsApp queda tapado por la barra inferior de storefront, la barra fija donde se ve la cuenta, el buscador y el carrito.
En principio con un snippet hice desaparecer la barra de storefront… pero realmente me gustaría saber si hay alguna forma de poder mantenerla y que no solape al botón de whatsApp.
Saludos
Pablo

2

Hola.
Probaste configurar el icono de whatsapp a la izquierda?

3

Hola Pablo. La forma más fácil de resolver eso es mediante CSS, teniendo un theme hijo de StoreFront, en el archivo functions.php agregar una llamada a un archivo .css propio, y en ese archivo .css definir cuál es la clase o id que tiene el div en donde está contenido el icono de WhatsApp de Join.Chat.
Dentro del código del archivo .css tenés que especificar un z-index bien alto, que sea más alto que el que tenga lo que esté mostrando StoreFront, y ya con eso no te quedaría tapado. Incluso también podrías hacer que te posicione ese div/icono en la ubicación que vos quieras, más a la derecha, más a la izquierda, más arriba o más abajo (hablando a nivel eje X o eje Y), ya que el z-index te va a manejar a nivel eje Z.
Saludos!

1 me gusta
4

También, otra posibilidad, es tener un archivo header.php o footer.php y en cualquiera de esos archivos escribir directamente el código CSS dentro de los tags style, y ahí no dependés de llamar a códigos que carguen el css desde function.php, sino que lo hacés directo

1 me gusta
5

Gracias @damian1979 te comento nunca toqué código en wordpress, aunque se algo de PHP. Vos me podés oriental un poco como lo hago? directamente desde el FTP? gracias…

6

De nada! Lo primero, y más importante para este caso, es saber si tenés creado un tema hijo (child theme) para StoreFront.
Si no lo tenés, vas a necesitar crear una carpeta dentro de wp-content/themes que se llame storefront-child y dentro de esa carpeta vas a necesitar 3 archivos:
El primero, que se llame index.php y esté en blanco.

El segundo, que se llame functions.php y contenga lo siguiente:

if ( ! defined( 'ABSPATH' ) ) { exit; }
function fn_child_storefront() {
    wp_enqueue_style( 'child_sf_parent', get_template_directory_uri().'-child/style.css' );
}
add_action( 'wp_enqueue_scripts', 'fn_child_storefront', 100 );

Y el tercero, que se llame style.css y contenga lo siguiente:

/*
Theme Name: StoreFront Child
Theme URI:
Description: Tema hijo de StoreFront
Author: Pablo
Textdomain: storefront
Author URI:
Template: storefront
Version: 1.0
License:
License URI:
*/

Además de ese código, ahí mismo podrías agregarle eso que te decía antes sobre el z-index. Habría que ver cuál es la clase o el id que usa el DIV contenedor de Join.Chat.
Te pongo un ejemplo, aunque no necesariamente va a ser así el nombre de la clase o id, pero sí el contenido:

.joinchat {
    z-index: 9999;
}

Todo lo que quieras configurarle ahí, sería en código CSS y te serviría para modificar varias cuestiones del aspecto de StoreFront u otros plugins, siempre que conozcas el nombre del clase o id al que le quieras modificar los parámetros…

Y como último paso, tendrías que hacer que el theme activo sea este último y ya no StoreFront, desde Apariencia->Temas, para que lo hecho quede activado y funcionando.

Los archivos crealos y editalos todos en modo local y luego por FTP creás esa carpeta que te decía y le subís los archivos ahí.

Saludos!!

2 Me gusta
7

Me fijé en el código CSS de ese plugin y si, la clase se llama así como te puse en el ejemplo y originalmente tiene un z-index de 1000, por lo que podrías usar el texto tal cual como te lo pasé y estimo que con 9999 tendría que ir sobrado en cuanto a altura. Y si hiciera falta subirlo más, podés probar con 99999.
Por otro lado, si quisieras que se viera más arriba verticalmente hablando, podrías agregar el código:

bottom: 150px;

Poniéndolo abajo de z-index. Y el valor de 150 lo podés ir cambiando en base a donde quieras que quede realmente, pero que el número y “px” queden sin espacio entre medio.

Después comentá si pudiste hacerlo funcionar.
Saludos!

8

Muchas gracias @damian1979 mil gracias por tu tiempo en la respuesta! lo voy a chequear con tiempo y te comento… me orientaste bastente… si te alguna duda a la hora de hacerlo te chifo… saludos! :smile: