Subir las redes sociales al área de cabecera  

Hola Francisco...

En el icono que corresponde a WhatsApp tienes Whatsapp

Si lo usarás para que al dar click sobre él entonces se redirija al usuario a WhatsApp modifícalo por:

Whatsapp

Si quieres que la acción del click sea la de una llamada telefónica:

Telefono

Revisa si aplicaste el CSS que te pedimos anteriormente:

.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
}
}

Comentabas: "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".

En ese momento nos has confundido. El motivo del enlace https://docs.woocommerce.com/document/create-a-social-icon-menu/ para que vieras qué clases utilizar para las diferentes redes sociales y mail.

Si optas por plugins podrías implementarlo como te muestro en la siguiente captura:

Para implementarlo puedes revisar el siguiente enlace --> https://wooassist.com/how-to-add-a-top-bar-in-storefront-theme/, básicamente necesitarás 2 plugins:

1. Social Icons WordPress Plugin – AccessPress Social Icons -> descárgalo aquí
2. Storefront Top Bar -> descárgalo aquí

El plugin de Social Icons te permitirá crear un menú de redes sociales y creará un widget llamado AccessPress Social Icon Widget. El plugin de Storefront topbar creará 2 nuevas áreas de widgets, Topbar 1 y topbar 2, las cuales debes configurar en Apariencia -> Personalizar -> Top Bar, define a top bar 1 con alineación derecha.

En Apariencia -> Widgets verás Top bar 1 y 2, al primero asígnale el widget de AccessPress Social Icon Widget, ahora verás el menú de redes sociales a la derecha del logo y arriba.

Para alinear el top bar justo a media altura del logo y éste hacerlo más grande necesito que me digas cómo agregaste el logo, cómo lo centraste, es decir qué archivos modificaste (recuerdo que anteriormente en otra consulta que hiciste mencionaste que lo habías insertado con un código que encontraste en internet).
Saludos.

Muchas gracias a todos los que me han apoyado con este pequeño detalle.

Especialmente gracias, Bulmaro, tu respuesta ha sido de súper fácil ejecución, en especial, para personas que somos completos desconocidos en el cómo hacer códigos.

En lo referente a los íconos, decidí lanzarme por el plugin que ya tenía que era Simple Social Icons sólo tuve que agregarle el plugin de Top Bar, excelente.

Por lo que tuve que descartar todos los códigos que tan amablemente me dieron.

En cuanto al CSS que me habían proporcionado, sí, lo coloqué en su lugar y no hubo cambio alguno en mis redes, seguían en el mismo lugar (en el centro y bajo el logo).

Para lo del código CSS que utilicé para agrandar el logotipo y centrarlo me pasaron la siguiente información:
1. El logo fue agregado de forma normal en Apariencia/Identidad del sitio.
2. Para Centrarlo me pasaron unas reglas CSS que coloqué en el área de Apariencia/CSS Adicional
/* center logo*/
.site-branding{
width:100% !important;

text-align:center;
}

.site-header .site-branding img {
margin: 0 auto;
}
También me compartieron otra regla para centrar el menú y el carrito de compras:
/* center menu */
nav#site-navigation {
width: 100%;
text-align: center;
margin-right: 0px;
margin-bottom:25px;
}

@media (min-width: 768px){
.woocommerce-active .site-header .site-header-cart {
width: 21.7391304348%;
margin: 0 auto;
float:none;
}
}

3. Para agrandar el logo me pasaron la siguiente regla que también agregué en Apariencia/CSS Adicional:
Cambiar el tamaño del logo

@media (min-width: 768px){
.site-header .site-branding img {
height: auto;
max-width: 500px !important;
}}

Muchas gracias, Saludos.