Opt In Image
DESCARGA GRATIS
1.- Guía para crear una tienda online de éxito
2.- Guía SEO para Prestashop
  • Recibe todos los domingos las últimas entradas del blog.
  • Recibe contenidos exclusivos.

Te puedes dar de baja en cualquier momento. Nada de spam

 

Para añadir los iconos de compartir en redes sociales a las páginas de productos de Woocommerce vamos a usar un clásico, el plugin: AddToAny Share button

Éste, es un plugin gratuito del repositorio de WordPress que puedes encontrar aquí:

Plugin AddToAny Share Button

Lo que más me gusta de este plugin es que se pueden personalizar los colores de los iconos, sus dimensiones, diferentes opciones de visualización (normal y flotante), aporta widgets y mucho más.

 

 

 

1.- Acceso a configuración del plugin AddToAny Share button

 

Una vez instalado el plugin podrás acceder a sus opciones de configuración de dos maneras:

 

  • Plugins: puedes ir a la página de plugins y hacer clic en el enlace “Ajustes” del plugin “Botones de compartir de AddToAny”
  • Ajustes: también puedes ir al menú lateral del panel de administración de wordpress y hacer clic en: “Ajustes > AddToAny”

 

 

2.- Opciones de configuración del plugin para compartir productos Woocommerce en redes sociales.

 

Una vez accedes a la configuración del plugin para compartir productos en redes sociales verás que hay dos pestañas diferentes:

 

  • Standar: Desde aquí personalizaremos el diseño de los iconos y las opciones de visualización estándar de los iconos de compartir. En los productos aparecerán justo bajo la referencia y categorías a la que pertenece el producto.
  • Floating: con esta opción de visualización los iconos de compartir aparecerán flotantes (horizontal o verticalmente) cuando se haga scroll en la página.

 

 

2.1.- Pestaña “Standar” de configuración de plugin compartir productos woocommerce

 

Como antes te he comentado en esta pestaña personalizaremos el diseño de iconos (todos) y configuraremos la visualización estándar de iconos de compartir en redes sociales de productos. En los productos, se situarán justo debajo de donde aparece la referencia y categorías a las que pertenece el producto.

Recuerda hacer clic en el botón “Guardar cambios” cuando realices alguna modificación,

 

 

i.- Estilo de icono:

 

a.- Tamaño: desde aquí personalizaremos el tamaño en píxeles de los iconos

 

b.- Background: color de fondo de los botones en los cuales se inscriben los iconos de redes sociales. Podremos elegir entre original (colores por defecto de cada red social), Transparent (transparente) o custom (personalizado).

En el caso de elegir “Custom” luego tendremos que elegir el color de fondo que queremos para los botones en los que aparecen los iconos de redes sociales.

 

En este post puedes ver como gestionar los iconos de redes sociales en la plantilla Divi: iconos redes sociales Divi

 

c.- Foreground: se refiere al color de primer plano. Es decir, el color que va tener el icono de la red social. Podremos elegir entre las mismas opciones que en el apartado interior.

Estas opciones son muy interesante ya que podemos hacer que todas las redes sociales tengan un color de fondo y primer plano diferente al habitual de cada red social y que pegue más con el diseño de la tienda online.

 

iconos para compartir productos woocommerce en redes sociales

Iconos de compartir productos en redes sociales con su color original

 

iconos de compartir productos woocommerce con diseño personalizado

Iconos para compartir productos con colores personalizados

 

 

ii.- Botones para compartir

 

Desde aquí seleccionaremos que iconos queremos que aparezcan en la ficha de producto.

Para ello haremos clic en “Añadir / Quitar servicios”, aparecerán un montón de iconos de redes sociales e iremos haciendo clic en los que queremos que se muestren.

 

Elegir redes sociales que queremos que se muestren en los productos woocommerce

Elegir redes sociales que queremos que se muestren en los productos

 

 

iii.- Botón universal

 

Además de los iconos que hemos añadido en el apartado anterior podemos añadir un nuevo icono que sirva para poder compartir el producto en cualquier otra red social (aunque no sea de las seleccionadas en el apartado anterior)

 

icono para compartir producto en cualquier red social

Botón para compartir ficha de producto en cualquier red social

 

Este botón para mostrar el resto de redes sociales lo podrá hacer de diferentes formas:

  • a.- Botón “+”: aparecerá un botón con el signo “+” en su interior para compartir en otras redes sociales.
  • b.- URL de la imagen: podemos poner la url de la imagen de un icono que hayamos subido previamente a la biblioteca de wordpress, para que se muestre dicho icono.
  • c.- Text only: podemos poner un texto en vez de un botón.
  • d.- Ninguna: esta opción sirve para Desactivar el botón universal.
  • e.- show cont: para que se muestre un cartel con el número de veces que se ha compartido el producto en redes sociales.

 

boton de compartir en redes sociales universal

Opciones para compartir a través de otras redes sociales

 

 

iv.- Compartir encabezado:

 

Esta opción sirve para poner un texto encima de los iconos de compartir en redes sociales del producto. El texto podría ser del tipo: “comparte este producto:” o algo así

 

 

v.- Ubicación del botón:

 

Desde este apartado podremos elegir en qué tipos de páginas mostraremos los iconos de compartir en redes sociales.

 

a.- Mostrar en el …. De las entradas: en este apartado podremos elegir si queremos que los iconos de redes sociales aparezcan en las entradas de blog y en qué posición.

 

b.- Mostrar en el inferior de las páginas: para mostrar los iconos de redes sociales en la parte inferior de las páginas de wordpress.

 

En este post puedes ver como con Divi Booster se pueden añadir más redes sociales a Divi: Divi Booster

 

c.- Mostrar en el inferior de productos: para mostrar los iconos de redes sociales en los productos de woocommerce

 

ubicación iconos de compartir redes sociales woocommerce

Lugar en que se mostrarán los iconos de redes sociales

 

 

vi.- Menú de opciones:

 

Con esta opción podemos personalizar el diseño del bloque de compartir en otras redes sociales. Para ello debes hacer clic en “Abrir el personalizador de estilos”, personalizar colores y copiar el código resultante y pegarlo en el campo de texto “Javascript adicional”.

 

diseño iconos de resto de redes sociales

Personalizar diseño botones de compartir resto de redes sociales

 

 

2.2.- Pestaña “Floating” de configuración de plugin para compartir productos en Woocommerce

 

Esta pestaña está dividida en dos apartados: Botones verticales y Botones Horizontales

 

  • Botones Verticales: en este apartado configuraremos opciones de botones flotantes verticales.
  • Botones horizontales: en este apartado configuraremos opciones de botones flotantes horizontales.

 

 

2.2.1.- Botones Verticales (botones flotantes con formato vertical)

 

a.- Ubicación del botón: aquí podremos seleccionar tres opciones diferentes.

Acoplado a la izquierda: para que el bloque flotante de iconos de compartir salga en el lateral izquierdo de la interface.

Acoplado a la derecha: para que el bloque flotante de iconos de compartir salga en el lateral derecho de la interface.

Ninguno: DESACTIVAR el bloque flotante de iconos de compartir en formato vertical

 

b.- Ajustable: desde aquí podremos indicar una condición para que aparezca el bloque de iconos solo si la interface tiene una anchura superior a un determinado número de píxeles (esto nos puede servir para no mostrar los botones en móviles)

 

c.- Posición: aquí estableceremos la distancia en píxeles desde la parte superior de la web y el bloque de iconos flotante.

 

d.- Offset: aquí podemos establecer un margen en píxeles entre el bloque de iconos de compartir flotante y su lateral vertical más cercano.

 

e.- Tamaño de icono: aquí estableceremos el tamaño de los iconos.

 

f.- fondo: aquí opcionalmente podremos establecer un color de fondo para el bloque flotante que contiene los iconos de compartir. Transparente es la opción marcada por defecto, pero también podemos poner un color personalizado.

 

 

2.2.2.- Botones horizontales (botones flotantes con formato horizontal)

 

Desde aquí elegiremos si queremos mostrar un bloque flotante de iconos de redes sociales en formato horizontal.

También podremos elegir entre las diferentes opciones de personalización, que son exactamente las mismas que describíamos en el apartado anterior al que te remito.

 

 

3.- Compartir url de la ficha de producto por email

 

Habrás visto que entre los iconos de redes sociales que podemos añadir hay un icono con forma de sobre y nombre “email”.

Este icono es bastante interesante, y si un cliente hace clic sobre dicho icono se abrirá la aplicación de correo electrónico que use en su ordenador con la url del producto en el contenido de un nuevo email.

Es decir, es un icono que sirve para recomendar productos a un amigo por email.

 

 

4.- Widgets de iconos de redes sociales

 

El plugin AddToAny Share Button incluye dos widgets que podremos usar en la barra lateral de la tienda o en el footer:

 

a.- Widget AddToAny Follow: este widget sirve para mostrar los iconos de las redes sociales en los que está presente nuestra tienda online.

En su configuración deberemos poner las urls de las redes sociales en las que estamos presentes. También podremos personalizar el tamaño de los iconos.

Nota: no debes poner la url completa de la red social, sino solo la parte que viene después del dominio.

Es decir, de la url:

https://www.facebook.com/horizonwebMurcia

Solo habría que  poner:

horizonwebMurcia

widget wordpress con iconos de redes sociales

Iconos de redes sociales en widget

 

b.- Widget AddToAny Share: con este widgets podremos insertar los iconos de redes sociales para compartir en la barra lateral o footer.

Las opciones de personalización serán las configuradas en las opciones generales de personalización del plugin.

 

 

Bloguer especializado en Woocommerce / WordPress, Divi y Prestashop. Me dedico a impatir formación y a la creación de páginas web, blogs y tiendas online.Mi otro blog, especializado en WordPress y Divi: horizonweb.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información Aquí,plugin cookies

ACEPTAR
Aviso de cookies