¿Cómo mostrar la barra lateral de WooCommerce en la parte superior para dispositivos móviles?

Al activar Barra lateral WooCommerce en una tienda, carrito, página de pago y/o página de producto único, la barra lateral se muestra en un contenedor secundario.

¿Qué es un contenedor secundario?

Básicamente, un contenedor es donde aparece el contenido y la información principal. En general, si se omiten la cabecera y el pie de página, lo que queda es el contenedor. El área de contenido y la barra lateral son partes del contenedor. El área de contenido se denomina técnicamente contenedor primario, mientras que la barra lateral es el contenedor secundario.

En los dispositivos móviles, el contenedor primario se apila sobre un contenedor secundario. Así, el contenedor secundario se muestra debajo del contenedor primario.

Si desea mostrar la barra lateral por encima del contenedor principal en el móvil, tendrá que utilizar código CSS personalizado. A continuación se menciona el código CSS necesario para ambas barras laterales.

Para la barra lateral izquierda

@media (max-width: 768px){
  .ast-left-sidebar #content>.ast-container{.ast-container
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
      -moz-box-orient: horizontal;
      -moz-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
  }
}

Para la barra lateral derecha

@media (max-width: 768px){
    .ast-right-sidebar #content>.ast-container{
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .ast-right-sidebar #content>.ast-container>#primary {
        orden: 2;
    }
    .ast-right-sidebar #content>.ast-container>#secondary {
        order: 1;
    }
}

¿Dónde puedo colocar este código CSS personalizado?

Puede insertar este CSS de dos formas

1. En el Personalizador: Desde el backend de WordPress navega a Apariencia > Personalizar > CSS adicional y añade el código en el área de CSS personalizado. (Recomendado) O
2. A través del style.css del tema hijo: Edite el archivo style.css del tema hijo y añada un CSS obligatorio.

Otros enlaces útiles

1. ¿Cómo instalar Astra Child Theme?
2. ¿Cómo editar style.css en un tema hijo?