Subir las redes sociales al área de cabecera  

Hola Francisco.

No hace falta un plugin para eso.
.- Edita el archivo functions.php y añade lo siguiente:

 function add_fontawesome_kit() {
    wp_register_script( 'fa-kit', 'https://kit.fontawesome.com/4861f2b45b.js', array( 'jquery' ) , '5.9.0', true ); // -- From an External URL
// Javascript - Enqueue Scripts
    wp_enqueue_script( 'fa-kit' );
}
add_action( 'wp_enqueue_scripts', 'add_fontawesome_kit', 100 );

.- Accede apariencia -> Menú y crea un nuevo menú por ejemplo " menú secundario "
.- Añade los enlaces de las redes que quieres mostrar y asignarles los iconos:

.- Añade lo siguiente al archivo style.css que encontrarás dentro de la carpeta storefront.

.secondary-navigation a[href*="dribbble.com"], .secondary-navigation a[href*="facebook.com"], .secondary-navigation a[href*="flickr.com"], .secondary-navigation a[href*="foursquare.com"], .secondary-navigation a[href*="plus.google.com"], .secondary-navigation a[href*="instagram.com"], .secondary-navigation a[href*="linkedin.com"], .secondary-navigation a[href*="pinterest.com"], .secondary-navigation a[href*="reddit.com"], .secondary-navigation a[href*="tumblr.com"], .secondary-navigation a[href*="twitter.com"], .secondary-navigation a[href*="vimeo.com"], .secondary-navigation a[href*="wordpress.com"], .secondary-navigation a[href*="wordpress.org"], .secondary-navigation a[href*="youtube.com"], .secondary-navigation a[href*="mailto:"], .secondary-navigation a[href*="twitch.tv"], .secondary-navigation a[href$="/feed/"] {
  text-indent: -9999px; }

.secondary-navigation a[href*="dribbble.com"]:after, .secondary-navigation a[href*="facebook.com"]:after, .secondary-navigation a[href*="flickr.com"]:after, .secondary-navigation a[href*="foursquare.com"]:after, .secondary-navigation a[href*="plus.google.com"]:after, .secondary-navigation a[href*="instagram.com"]:after, .secondary-navigation a[href*="linkedin.com"]:after, .secondary-navigation a[href*="pinterest.com"]:after, .secondary-navigation a[href*="reddit.com"]:after, .secondary-navigation a[href*="tumblr.com"]:after, .secondary-navigation a[href*="twitter.com"]:after, .secondary-navigation a[href*="vimeo.com"]:after, .secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after, .secondary-navigation a[href*="youtube.com"]:after, .secondary-navigation a[href*="mailto:"]:after, .secondary-navigation a[href*="twitch.tv"]:after, .secondary-navigation a[href$="/feed/"]:after {
    text-indent: 0;
    display: block;
    float: left; }

.secondary-navigation a[href*="dribbble.com"]:after, .secondary-navigation a[href*="facebook.com"]:after, .secondary-navigation a[href*="flickr.com"]:after, .secondary-navigation a[href*="foursquare.com"]:after, .secondary-navigation a[href*="plus.google.com"]:after, .secondary-navigation a[href*="instagram.com"]:after, .secondary-navigation a[href*="linkedin.com"]:after, .secondary-navigation a[href*="pinterest.com"]:after, .secondary-navigation a[href*="reddit.com"]:after, .secondary-navigation a[href*="tumblr.com"]:after, .secondary-navigation a[href*="twitter.com"]:after, .secondary-navigation a[href*="vimeo.com"]:after, .secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after, .secondary-navigation a[href*="youtube.com"]:after, .secondary-navigation a[href*="twitch.tv"]:after {
    font-family: "Font Awesome 5 Brands";
    font-weight: 400; }

.secondary-navigation a[href*="mailto:"]:after, .secondary-navigation a[href$="/feed/"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; }

.secondary-navigation a[href$="/feed/"]:after {
  content: "f09e";
  color: #ff9900; }
.secondary-navigation a[href*="twitch.tv"]:after {
  content: "f1e8";
  color: #6441A5; }
.secondary-navigation a[href*="mailto:"]:after {
  content: "f0e0"; }
.secondary-navigation a[href*="youtube.com"]:after {
  content: "f167";
  color: #bb0000; }
.secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after {
  content: "f19a";
  color: #0073aa; }
.secondary-navigation a[href*="vimeo.com"]:after {
  content: "f194";
  color: #aad450; }
.secondary-navigation a[href*="tumblr.com"]:after {
  content: "f173";
  color: #32506d; }
.secondary-navigation a[href*="reddit.com"]:after {
  content: "f231"; }
.secondary-navigation a[href*="twitter.com"]:after {
  content: "f099";
  color: #00aced; }
.secondary-navigation a[href*="dribbble.com"]:after {
  content: "f17d";
  color: #ea4c89; }
.secondary-navigation a[href*="facebook.com"]:after {
  content: "f09a";
  color: #3b5998; }
.secondary-navigation a[href*="flickr.com"]:after {
  content: "f16e";
  color: #ff0084; }
.secondary-navigation a[href*="foursquare.com"]:after {
  content: "f180";
  color: #0072b1; }
.secondary-navigation a[href*="plus.google.com"]:after {
  content: "f0d5";
  color: #dd4b39; }
.secondary-navigation a[href*="instagram.com"]:after {
  content: "f16d";
  color: #517fa4; }
.secondary-navigation a[href*="linkedin.com"]:after {
  content: "f0e1";
  color: #007bb6; }
.secondary-navigation a[href*="pinterest.com"]:after {
  content: "f231";
  color: #cb2027; }

.- accede apariencia ->Personalizar
.- Selecciona Menús - Menú secundario.
.- En ubicaciones selecciona la opción " Menú Secundario "

Con estos pasos se añadirán los icones justo debajo del logo.

Tienes más información en esta documentación:

-> https://docs.woocommerce.com/document/create-a-social-icon-menu/#

Un saludo

Ok, voy a hacer eso, sólo una pregunta
No los quiero debajo del logo sino arriba a la derecha.
Me puedes apoyar con eso, por favor

Es decir, estoy muy feliz con el plugin que ya tengo por lo que buscaba sólo una regla CSS que me apoyara con eso.

Hola Francisco,

Claro que puede implementarse como lo requieres, te sugiero que primero realices todo el procedimiento que te indicó Pepe, luego vemos el resultado y afinamos detalles.

Saludos.

Ya he hecho los pasos indicados por Pepe,
Ya están los logos debajo del logo.
Sin embargo, el correo no funciona y el número de móvil no sé si funciona o no ya que en el celular no me aparecen los botones.

Por lo que me gustaría poder corregir lo del correo y lo del número del mobil y después ver la posibilidad de colocarlos arriba del logo pero hasta el lado derecho (en linea con el buscador y el carrito de compras). Y ver cómo podemos activar esta sección en el móvil también

Muchas gracias Pepe y Bulmaro

Hola Francisco.

estoy muy feliz con el plugin que ya tengo por lo que buscaba sólo una regla CSS
El problema con el plugin es que se esconden debajo del fondo que tienes en ese bloque y no se mostrarían.

corregir lo del correo
Para el correo en la opción URL del enlace tienes que añadir lo siguiente:
mailto:tu_correo@tudominio.xxx

Añades la etiqueta mailto: seguido de la cuenta de correo a la que quieres que se envie los correos.

-> http://www.tutorialspark.com/html5/HTML5_email_mailto.php

el número de móvil

Para el teléfono tienes que añadir la etiqueta tel
tel:+34666666666

Una vez realizado eso añade lo siguiente al archivo style.css:

 .menu-item span {
     display:none;
 }

@media (min-width: 768px){
i._mi._before.genericon {
    float: left;
    background-color: #d12e8f !important;
    border-radius: 3px;
    color: #ffffff !important;
    border: 0px #ffffff solid !important;
    font-size: 20px;
    padding-left:6px;
    padding-right:7px
}
}

Un saludo

Pepe muchas gracias por tu apoyo, he realizado los cambios que me has dicho y lo del celular sí ha funcionado
Sin embargo lo del correo aún no.
Te mando foto de donde hice los cambios para que me digas en dónde estoy mal.
Y todavía no se han podido mover los íconos al lado superior derecho.

Saludos.

Hola

Veo que has añadido mailto + el correo en el CSS, esto es incorrecto, en el CSS no va el correo, sólo deja mailto, como estaba inicialmente

El mailto con el correo completo va en el enlace, es decir al crear el enlace por HTML o como en tu caso con un ítem de menú (ver imagen adjunta)

Saludos.

Gracias Jhon

Ya he borrado el mail en el área de Style.css, y ahora lo he puesto sólo en el área de Menú.

Sin embargo, si lo dejo sólo con mailito así

A la hora de guardarlo me lo borra

Y si lo pongo completo: con el http o https... no me funciona nada.

de hecho así lo he dejado.

Gracias... espero vuestra ayuda

Hola

Por lo visto WordPress tiene una validación para urls en el menú y no podrás agregar el mailto desde esa pantalla

Podrías agregarlo a través de código en el archivo functions.php, tendría que saber el id de la posición del menú que asumo es secondary y luego reemplazar el email, prueba usar código HTML, revisa:

add_filter( 'wp_nav_menu_items', 'dcms_items_login_logout', 10, 2);

function dcms_items_login_logout( $items, $args ) {

	if ($args->theme_location == 'secondary') {	
		$items .= '

					prueba
					
';
	}
	
	return $items;
}

Artículo de referencia:
https://decodecms.com/agregar-login-y-logout-en-un-menu-de-wordpress/

PD. Ten en cuenta que es mejor llevarlo a un formulario de contacto en lugar de usar mailto, que en realidad es poco usado ya que no todos los usuarios tienen un cliente de correos, además de que los bots spam te detectarán el correo y tendrías que instalar plugins adicionales de protección.

Saludos.

Me ha funcionado de maravilla... Gracias.

Dudas:

1. Cómo puedo modificar el ícono del mail? ya que la verdad no sé dónde quedó, como los otros los añadí mediante Menú secundario sí puedo ponerles la imagen, icono o SVG que quiera, pero el del código dónde lo modifico.

2. Cómo puedo ponerlos todos esa sección en la parte superior derecha del logotipo?

Gracias.

También me surgió otro par de dudas:

Cómo puedo hacer más grande el logo, ya que a la hora de elegir el ícono sí me da oportunidad de elegir pero por más grande que lo ponga no cambia, por lo que parece que el tamaño está bloqueado por el código.

El ícono de correo sale mucho más separado que el resto.

Hola Francisco.

Cómo puedo modificar el ícono del mail? ya que la verdad no sé dónde quedó, como los otros los añadí mediante Menú secundario sí puedo ponerles la imagen, icono o SVG que quiera, pero el del código dónde lo modifico.

los iconos que puedes utilizar son los que muestra el menú, no puedes variar esas imágenes.

En esta entrada del blog de woocommerce tienes información:
-> https://docs.woocommerce.com/document/create-a-social-icon-menu/

Los iconos que utiza son los de font Awesone:
-> https://fontawesome.com/

veo que lo cambiaste todo y ahora no se exactamente como estás añadiendo esas imágenes, si vamos cada uno por un sitio al final no terminamos de solucionarlo.

Un saludo

He intentado utilizar un plugin llamado Menu Icons, pero en realidad no me ha subido los íconos que he subido sino que sólo me los ha coloreado.

Y he seguido cada uno de tus pasos y añadí el paso que me ofreció Jhon Marreros, así que los códigos y todo sigue igual.

Entonces, ¿no es posible subirlos al lado derecho del logo?