WOOCS - Cambiador de divisas de WooCommerce

Cómo personalizar la vista del conmutador de divisas de woocommerce

"Diseñador inteligente"(desde v.2.3.5 / 1.3.5) es parte de la funcionalidad de WooCommerce Currency Switcher que permite crear un conmutador desplegable de múltiples monedas utilizando un panel de control conveniente. Puede crear un número ilimitado de diseños desplegables para diferentes lugares de su sitio e incluso insertarlos directamente en el código del sitio. También puede crear un contenedor de código corto personalizado para mostrar conmutadores de moneda de diferentes diseños según las páginas del sitio o por cualquier otra condición lógica, un ejemplo:

add_shorctode ('woocs_set1', function ($ args) {global $ post; // $ args - aquí puede haber un cambio de parámetros personalizados ($ post-> ID) {caso 17: echo do_shortcode ('[woocs sd = 2]') ; break; case 27: echo do_shortcode ('[woocs sd = 3]'); break; case 44: echo do_shortcode ('[woocs sd = 4]'); break; predeterminado: echo do_shortcode ('[woocs sd = 1 ]'); rotura; } });

En el ejemplo anterior, usando un shortcode personalizado [woocs_set1 custom_param = 1] permite mostrar diferentes diseños de conmutadores de moneda en función de las páginas del sitio.

En la misma página se puede colocar un número ilimitado de conmutadores, por ejemplo: en el encabezado '[woocs sd = 1] ', en la barra lateral' [woocs sd = 2] ', en el pie de página' [woocs sd = 3] '. Esto agrega más sensación de funcionalidad para los clientes de su sitio y, de la misma manera, los cambiadores de moneda se adaptan fácilmente al panorama de su sitio.

Para crear uno de esos diseños, debe ir a la pestaña "Unícos"En la página de opciones de WOOCS, y presione el botón"Crean“. Después de la creación, haga clic en el botón 'editar'de diseño recién creado. En el panel de opciones de diseño, verá 4 secciones: General, Título, Descripción, Destacar. Puede navegar por las secciones usando el menú en la parte superior derecha. El resultado de la edición es instantáneo y puede ver el menú desplegable modificado en la parte superior de la página con la configuración aplicada.

Cada sección tiene sus propias opciones. Revisemos:

Sección "General":

  • control deslizante de rango "Ancho”: Ancho del menú desplegable de moneda en píxeles, los valores mínimos son 80 px y el máximo uno es 900 px
  • conmutador "Ancho 100%": Si está habilitado, el menú desplegable tendrá el 100% del ancho del contenedor donde se coloca
  • control deslizante de rango "Escalable”: Establece la escala de los menús desplegables. Agrega conveniencia para que sea más pequeño para colocarlo, por ejemplo, en el pie de página del sitio.
  • control deslizante de rango "Ancho del borde”: Ancho del borde del menú desplegable del conmutador de moneda en píxeles, los valores mínimos son 0 y el máximo uno es 10px
  • control deslizante de rango "Radio de borde"- radio del borde del menú desplegable del conmutador de moneda en porcentajes, los valores mínimos son 0 y el máximo uno es 100%
  • selector de color "Color del borde”- color del borde del conmutador. Después de hacer clic en el botón selector, puede seleccionar qué combinación de colores desea usar: RGB, HSL, HEX
  • selector de color "Color de fondo": Color de fondo para cada opción
  • selector de color "Color del puntero": Color del puntero de los menús desplegables que puede ver en los menús desplegables de la derecha
  • selector de color "Opciones de color del divisor"- color de las líneas que divide las opciones cuando se abre el conmutador de divisas
  • control deslizante de rango "Opciones de tamaño del divisor"- ancho del borde de la línea que divide las opciones cuando se abre el conmutador de moneda, los valores mínimos son 0 y el máximo uno es 10px
  • control deslizante de rango "Altura máxima abierta”- altura máxima del menú desplegable abierto. Si la suma de las alturas de las opciones es más, aparece una barra de desplazamiento vertical

Sección de título":

  • conmutador "Mostrar título”: Permite mostrar u ocultar el texto del título en cada opción del selector desplegable de divisas.
  • entrada de texto "Valor del título”- contenido del texto del título de cada opción. Utilice palabras clave especiales y su combinación: __CODE__ [DÓLAR ESTADOUNIDENSE], __FIRMAR__ [$], __DESCR__ [cualquier texto]. También puede utilizar texto estático habitual. Ejemplo: __CODE__ - __SIGN__ [verá: USD - $]
  • control deslizante de rango "Tamaño de fuente del título”: Tamaño de fuente del texto del título en píxeles para cada opción, los valores mínimos son 8 px y el máximo uno es 48 px
  • conmutador "Título en negrita": Si el texto del título habilitado tiene un grosor de fuente en negrita para cada opción
  • selector de color "Color del título": Color del texto del título de cada opción
  • entrada de texto "Fuente del titulo": Cada opción, título, texto, familia de fuentes

Sección "Descripción":

  • conmutador "Mostrar descripcion”: Permite mostrar u ocultar el texto de la descripción en cada opción del selector desplegable de divisas.
  • control deslizante de rango "Descripción tamaño de fuente”: Tamaño de fuente del texto de descripción en píxeles para cada opción, los valores mínimos son 8 px y el máximo uno es 48 px
  • selector de color "Descripción color": Color del texto de descripción de cada opción
  • entrada de texto "Fuente de descripción"- cada familia de fuentes de texto de descripción de opción

 

Sección "Bandera":

  • conmutador "Mostrar bandera”: Permite mostrar u ocultar la imagen de la bandera para cada opción del selector desplegable de divisas.
  • conmutador "Posición de la bandera”- permite establecer el lado de la imagen de la bandera para cada opción: derecha o izquierda
  • control deslizante de rango "Altura de la bandera": Establece la altura de la imagen de la bandera en píxeles para cada opción, los valores mínimos son 5 px y el máximo uno es 100 px
  • control deslizante de rango "Posición vertical de la bandera": Establece la posición vertical de la bandera para cada opción en píxeles, los valores mínimos son -20px y el máximo es 30px

Con la navegación de la sección ubicada en la parte superior derecha, puede navegar rápidamente por la configuración de diseño actual y configurar las opciones. No olvide hacer clic en el botón "Guardar" que siempre encontrará fijo en la parte inferior de la ventana del navegador. Después de editar los ahorros de diseño, salga del panel de diseño y copie el código corto, por ejemplo, “[woocs sd = 7]”. Ahora puede colocarlo en el widget de texto habitual, en el contenido de texto de la página de su sitio o directamente en los archivos php del sitio, por ejemplo, en el archivo. footer.php usando el siguiente código:


Página de demostración de WOOCS SD.