Selector de moneda flotante en WooCommerce: ajustes, páginas, móvil y CSS

El selector de moneda flotante de WooCommerce de FOX es un panel fijado al borde izquierdo o derecho de la pantalla. Permanece visible mientras el visitante se desplaza y no necesita un área de widgets, un shortcode ni cambios en el tema: lo activas en los ajustes del plugin y aparece en todas las páginas que permitas. Esta guía cubre sus ajustes, cómo limitarlo a ciertas páginas y dispositivos, las soluciones a los problemas habituales en móvil y el CSS para los detalles que los ajustes no alcanzan.

Activa el selector de moneda flotante

Abre WooCommerce → Ajustes → moneda (Currency) → Lado (Side) y activa Habilitar deshabilitar (Enable / Disable). Las demás opciones aparecen una vez que está activado:

Ambas opciones de campo admiten marcadores que FOX sustituye para cada moneda: __CODE__ (USD), __SIGN__ ($), __FLAG__ (la imagen de la bandera) y __DESCR__, el texto de la columna descripción (Description) de la moneda en la pestaña Divisas (Currencies). Para cambiar un texto como "USA dollar", edita esa descripción. Si un campo se deja vacío, FOX muestra el código de la moneda, así que un Campo (s) de desplazamiento (Hover field(s)) vacío no elimina el texto al pasar el cursor; el CSS de abajo sí lo hace.

El selector lista todas las monedas cuyo interruptor Visible en la pestaña Divisas (Currencies) está activado. Una moneda que falta en el panel es casi siempre una con Visible desactivado. Las opciones de estilo del desplegable y la pestaña Diseñador (Designer) se aplican al selector [woocs], no a este panel.

Elige las páginas donde aparece

Mostrar en las páginas (Show on the pages) y Ocultar en las páginas (Hide on the pages) aceptan ID de páginas y palabras clave, separados por comas sin espacios. FOX divide la lista en cada coma y no recorta los espacios, así que en product, shop la segunda entrada es " shop" y nunca coincide; escribe product,shop.

Los números se tratan como ID de página y solo funcionan con las páginas de WordPress; el ID de un producto o de una entrada no coincide con nada. Cuando Mostrar en las páginas (Show on the pages) tiene algún valor, el selector se oculta en todas las demás. Una entrada en Ocultar en las páginas (Hide on the pages) se impone a la lista de mostrar. Por ejemplo, woocommerce,cart en la lista de mostrar mantiene el panel en el catálogo y en el carrito y lo quita del blog y de finalizar compra.

Para mantenerlo fuera únicamente de finalizar compra hay una opción más sencilla: Ocultar conmutador en la página de pago (Hide switcher on checkout page) en la pestaña Opciones (Options) oculta el selector lateral en las páginas de finalizar compra y de pago del pedido, y también el selector [woocs] en la página de finalizar compra.

Condiciones que los campos no pueden expresar

Las entradas del blog, los productos y las páginas de cursos son todos contenidos "single", así que los campos no pueden distinguirlos. Tras aplicar sus ajustes, FOX pasa su decisión por el filtro woocs_show_side_swither, y lo que devuelvas se impone. El nombre del hook se escribe swither en el plugin; úsalo exactamente así.

/*
 * FOX side switcher: final decision on where it is shown.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woocs_show_side_swither', function ($show) {
    if (is_singular('post') || is_home()) {
        return false; // blog posts and the blog page
    }
    if (is_singular('course')) {
        return true;  // replace "course" with your custom post type
    }
    return $show;     // everywhere else the Side tab settings decide
});

Teléfonos y tabletas

Comportamiento de los dispositivos (Behavior for devices) tiene la prioridad más alta: cuando oculta el selector, no se consultan ni las listas de páginas ni el filtro. Usa la función de WordPress wp_is_mobile(), que examina en el servidor el agente de usuario del navegador. Esto tiene dos consecuencias:

• Con una caché de página, el HTML creado para el primer visitante se sirve a todos. Si la caché no guarda copias separadas para los dispositivos móviles, un teléfono puede recibir la versión de escritorio, con el selector incluido, o al revés.
• Algunas tabletas, los iPad en particular, se identifican como navegadores de escritorio y cuentan como escritorio.

Cuando alguna de las dos cosas importe, deja Mostrar en todos los dispositivos (Show on all devices) y oculta el panel por ancho de pantalla con CSS, algo que el navegador decide en cada visita a la página:

/* Hide the FOX side switcher on screens up to 767px wide */
@media (max-width: 767px) {
    body .woocs_auto_switcher {
        display: none !important;
    }
}

No se pueden tocar los botones que quedan bajo el selector

Bloques clásicos (Classic blocks) ocupa una caja fija y transparente de 200 píxeles de ancho y 220 de alto, y Rollo de bloques (Roll blocks) una columna de 90 píxeles. En un teléfono, esa caja puede cubrir la flecha de un slider, un botón de añadir al carrito o el icono del menú, y los toques caen en la parte vacía del selector. Seleccionar ronda (Round select) deja pasar los toques mientras está cerrado. Reduce la caja al tamaño de su contenido y bájala por debajo de las capas del propio tema:

/* FOX side switcher: no invisible area, below sticky headers and menus */
body .woocs_auto_switcher {
    width: auto;
    height: auto;
    z-index: 99;
}
/* Round select has its own, stronger rule for the stacking order */
body .woocs_auto_switcher.cd-stretchy-nav {
    z-index: 99;
}

El orden de apilamiento por defecto del selector es 99999 (9999 para Seleccionar ronda (Round select)), por encima de casi todo lo que dibuja un tema. Con 99, el menú, el cajón del carrito o el aviso de cookies del tema se abren por encima de él. Si entonces el tema tapa el propio selector, sube el número poco a poco.

Un toque cambia la moneda por accidente

Las pantallas táctiles no tienen hover, así que el panel deslizante de Bloques clásicos (Classic blocks) puede abrirse con un toque y quedar sobre la página, y el siguiente toque en esa zona cambia la moneda. Desactiva el panel en las pantallas táctiles:

/* Classic blocks: no slide-out panel on touch screens */
@media (hover: none) {
    body ul.woocs_auto_switcher li a span {
        display: none !important;
    }
}

Una lista larga no cabe en la pantalla

Un panel fijo no se desplaza, así que con muchas monedas las últimas quedan por debajo del borde inferior de la pantalla de un teléfono y no se pueden alcanzar. Muestra menos monedas (el interruptor Visible) o haz que el panel se desplace con la página en pantallas pequeñas:

/* The panel scrolls with the page on small screens */
@media (max-width: 767px) {
    body .woocs_auto_switcher,
    body .woocs_auto_switcher.cd-stretchy-nav {
        position: absolute;
    }
}

Para un panel más estrecho, establece Campo (s) básico (s) (Basic field(s)) en __SIGN__ o __FLAG__. Para tener ajustes distintos en los teléfonos, usa el filtro del final de esta guía.

Recetas de CSS

Añade el CSS en el CSS adicional de tu tema (Apariencia → Personalizar → CSS adicional, o Estilos → CSS adicional en el Editor del sitio de un tema de bloques) y vacía la caché de página. El prefijo body hace que las reglas sean más fuertes que los estilos propios del plugin. Empieza por Principio de color (Main color) y Color de libración (Hover color); las reglas de abajo cubren lo que ellos no alcanzan.

/* Smaller flags (Classic blocks and Roll blocks), default 35px */
body .woocs_auto_switcher img.flag_auto_switcher {
    width: 24px;
}

/* Classic blocks: let a long hover text wrap instead of overflowing */
body ul.woocs_auto_switcher li a span {
    height: auto;
}
body ul.woocs_auto_switcher li a span div {
    white-space: pre-wrap;
}

/* Classic blocks: gradient buttons; the current currency keeps the Hover color */
body ul.woocs_auto_switcher li a {
    background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
}

/* Round select: gradient background of the opened panel */
body .woocs_auto_switcher.cd-stretchy-nav .stretchy-nav-bg {
    background: linear-gradient(180deg, #1e3c72 0%, #2a5298 100%);
}

Si el panel no reacciona a una regla, inspecciónalo en las herramientas para desarrolladores del navegador: Bloques clásicos (Classic blocks) es un ul.woocs_auto_switcher, Rollo de bloques (Roll blocks) y Seleccionar ronda (Round select) son un nav.woocs_auto_switcher, con la clase left o right para el lado.

Ajustes distintos por dispositivo: woocs_side_switcher_data

Todos los ajustes del panel pasan por el filtro woocs_side_switcher_data antes de que se construya el panel. El array tiene las claves skin (classic_blocks, roll_blocks o round_select), side, top, color, hover_color, basic_field y add_field (el campo de desplazamiento). Este ejemplo muestra un botón redondo compacto a la derecha en los teléfonos y deja intactos los ajustes de escritorio:

/*
 * FOX side switcher: other settings on mobile devices.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woocs_side_switcher_data', function ($data) {
    if (wp_is_mobile()) {
        $data['skin']        = 'round_select';
        $data['side']        = 'right';
        $data['top']         = '30%';
        $data['basic_field'] = '__SIGN__';
    }
    return $data;
});

También depende de wp_is_mobile(), así que vale la observación anterior sobre la caché de página. Si prefieres un desplegable fijado a una esquina en lugar de un panel lateral, consulta cómo colocar el selector de moneda al pie del sitio.

Si aun así no aparece

• Habilitar deshabilitar (Enable / Disable) está activado en la pestaña Lado (Side) y los ajustes se guardaron.
• Las listas de páginas no tienen espacios y usan product_category, no product-category.
• Comportamiento de los dispositivos (Behavior for devices) y Ocultar conmutador en la página de pago (Hide switcher on checkout page) no lo ocultan en la página que estás probando.
• Al menos dos monedas tienen Visible activado.
• La caché de página y la caché del navegador se vaciaron tras el cambio, y ningún fragmento devuelve false desde woocs_show_side_swither.

Si el panel sigue sin aparecer o se comporta de forma distinta a los ajustes, abre un tema en el foro de soporte de FOX con el enlace de la página y los ajustes de tu pestaña Lado (Side), y lo revisaremos.