Soporte » Diseño – Temas y plantillas » Ocultar «Ordenar por» en WooCommerce

  • Resuelto Hector

    (@hecktoras)


    Hola,

    Estoy teniendo un problema al intentar ocultar o incluso cuando intento agregarle margin-bottom (en versión movil) al parecer no me estaría tomando el código CSS (si se ven los cambios cuando edito con el inspecionar del navegado, pero al momento de aplicarlo en el tema hijo no me lo toma). También puede ser que me esté equivocando al agregarlo, aunque no creo que así sea.

    Esperaré una respuesta y mientras intentaré solucionarlo.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • Moderador almendron

    (@almendron)

    Prueba con

    .woocommerce .woocommerce-ordering
    	display: none;
    }

    Para la versión móvil, usa https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Es conveniente que uses el mismo punto de ruptura que utilice el tema que usas.

    • Esta respuesta fue modificada hace 4 meses, 3 semanas por almendron.
    Iniciador del debate Hector

    (@hecktoras)

    Hola @almendron

    Recién me puse a mirar todo el código CSS del Tema Hijo. Lo que pasaba es que ya tenía el código CSS pero sin margin-bottom:

    .woocommerce-ordering select {
        font-size: 14px;
        font-weight: 500;
        padding: 10px 40px 10px 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100% !important;
        background: 0 0;
        border-color: rgba(0,0,0,.1);
        color: #001559 !important;
        cursor: pointer;
    }

    Lo que hacía era agregar

    .woocommerce-ordering select {
     margin-bottom: 20px;
    }

    Así que me quedaban dos veces .woocommerce-ordering select ¿podría haber sido este el problema?

    Ahora lo que hice fue agregar todo dentro de un solo

    .woocommerce-ordering select {
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 500;
        padding: 10px 40px 10px 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100% !important;
        background: 0 0;
        border-color: rgba(0,0,0,.1);
        color: #001559 !important;
        cursor: pointer;
    }

    Si ves que estoy haciendo algo mal en esto, te agradecería que me lo comentes.

    Gracias por la ayuda y también por la info del link de W3Schools, estaba usando ese código pero no me lo tomaba.

    Moderador almendron

    (@almendron)

    Pero… ¿qué quieres hacer? ¿Ocultarlo, moverlo…?

    Iniciador del debate Hector

    (@hecktoras)

    Estoy pensandolo, por ahora solo aumentar el espacio que hay entre «Ordenar por» y los productos, solo en la versión movil.

    Para ocultarlo no tengo problema, se que puedo hacerlo con PHP o CSS.

    Yo lo daría por solucionado porque he logrado lo que intentaba.
    El problema principal que tenía es que no tomaba el código CSS. Pero ya lo he solucionado.

    Moderador almendron

    (@almendron)

    Para que te coja los cambios, aplica a

    .woocommerce .woocommerce-ordering
    
    }
    Iniciador del debate Hector

    (@hecktoras)

    Muchas gracias @almendron

    Daré el tema por solucionado.

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • Debes estar registrado para responder a este debate.