-1

Quiero reducir el espacio existente debajo del botón de añadir al carrito los productos en la página de catálogo.

introducir la descripción de la imagen aquí

Aqui muestro todas las clases que tiene el contenedor de productos en mi tema de WordPress

Con esto espero que puedan ver que debo editar para conseguir eliminar ese espacio

<div class="product-small col has-hover product type-product post-967 status-publish instock product_cat-galleteria-ecologica shipping-taxable purchasable product-type-simple">
    <div class="col-inner">
      <div class="badge-container absolute left top z-1">
        <div class="product-small box">
          <div class="box-image">
            <div class="image-none">
              <a href="http://" target="_blank" rel="noopener noreferrer">Titulo del Producto</a>
            </div>
            <div class="image-tools is-small top right show-on-hover">
              <div class="wishlist-icon">
                <button>Boton wishlist-icon</button>
              </div>
            </div>
            <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
              <a class="quick-view quick-view-added" href="http://" target="_blank" rel="noopener noreferrer">VISTA
                RAPIDA
              </a>
            </div>
           
          </div>
          <div class="box-text box-text-products text-center grid-style-2" style="height: 203.828px;">
            <div class="title-wrapper"></div>
            <div class="price-wrapper"></div>
            <form action="?add-to-cart=785" class="cart" method="post" enctype="multipart/form-data">
              <div class="quantity buttons_added form-flat">
              </div>
              <button type="submit" data-quantity="1" data-product_id="785"
                class="button alt ajax_add_to_cart add_to_cart_button product_type_simple">AÑADIR AL CARRITO></button>
            </form>
          </div>
        </div>
      </div>
    </div>

Muestro el toda la estructura del contenedor del producto en la imagen, ya que no se a que elementos debo dar el margin-bottom o padding-bottom:

introducir la descripción de la imagen aquí

He dado un margin-bottom a la clase product-small , a la clase box-text, a la clase box-text-products, pero esto no funciona, no se a que clase debo aplicar el css. ¿ En que clase debo aplicar exactamente el css para que se reduzca el espacio debajo del botón ?

Seria interesante tambien separar los contenedores de productos a izquierda y derecha, arriba y abajo, pero quizá deba hacer otra pregunta para esto

4
  • Podrías probar reduciendo el tamaño de la card que lo contiene, por lo general contiene la imagen, y un height aparte para el contenido además de la imagen. Considero que viendo cual sea el contenedor, y dándole un poco menos de height ya bastaría. En su defecto, si eso no funcionase, puedes usar padding negativo, que lo haga bajar un poco mas al botón dependiendo de cual sea el contenedor para el mismo. Saludos
    – Alexuy
    Commented el 1 ene. 2023 a las 18:28
  • Ya, pero yo no lo veo tan fácil, si no das más detalles... En la pregunta esta toda las clases que tienen los contenedores, yo hice la pregunta porque despues de horas haciendo pe¡ruebas, no lo consigo
    – Mari Cruz
    Commented el 1 ene. 2023 a las 18:36
  • Sería genial si agregaras un snippet para que podamos emularlo, ocurre que no sabemos las propiedades que contienen todas las clases de tus divs. En mi opinión, puede ser que wordpress está traslapando una de sus clases con tus estilos. Commented el 1 ene. 2023 a las 18:47
  • 2
    El código debe ir en formato texto y no en imagen. Haz clic en editar y cambia lo que haga falta. Saludos Commented el 2 ene. 2023 a las 20:22

1 respuesta 1

1

Para solucionar lo del espacio extra debajo del botón debes colocar un margin-bottom: 0; en el la etiqueta form que esta dentro de la caja del producto, y también al botón de agregar al carrito, puedes hacerlo agregando este código en el css:

form.cart, button.add_to_cart_button {
    margin-bottom: 0!important;
}
13
  • 1
    Veo que en la seccion de la caja que tiene el boton hay un height de 238px, puede ser eso que esta produciendo el espacio al final, ya que el height de tu caja seria fijo y si es muy alto, se vera ese espacio de sobra siempre, prueba a reducirlo, te recomiendo editar desde el inspector para que pruebes sin tener que cambiar en el codigo a cada momento Commented el 1 ene. 2023 a las 18:18
  • 1
    Tienes algun plugin de jquery o js que pueda estar causando eso alli? Porque es un estilo aplicado directamente en la etiqueta HTML, hay plugins que suelen hacer eso de editar elementos directamente cambiando el valor en la etiqueta (lo que ocasiona que no se pueda editar desde el css porque se cambia al recargar) Commented el 1 ene. 2023 a las 18:38
  • 1
    Tienes la web alojada en algun dominio? Commented el 1 ene. 2023 a las 18:53
  • 1
    Ya edite la respuesta, avísame si eso te funciona Commented el 1 ene. 2023 a las 19:10
  • 1
    Donde estas haciendo el cambio? En el panel de wordpress? Commented el 1 ene. 2023 a las 19:46

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.