5

¿Qué debo hacer para alinear el nuevo botón con el de WooCommerce?

He colocado un nuevo botón "AÑADIR AL CARRO" en algunos de los productos de WooCommerce. Se crea mediante php, por lo que no está dentro de la estructura del contenedor de WooCommerce:

echo '<a href="?add-to-cart='. $product_id .'&quantity=10" class="MI-NUEVO-BOTON">NUEVO BOTON</a>';

Los botones tienen una clase determinada por el tema de WordPress que utilizamos en la tienda.

primary is-small mb-0 button product_type_simple add_to_cart_button ajax_add_to_cart is-outline

Yo le di mi clase para tratar de personalizarlo y diferenciarlo del botón por defecto:

Pero el botón nuevo no esta en el mismo div, por ello, a pesar de tener sus clases, no se alinea horizontalmente, siempre queda a la izquierda.

He probado añadiendo nuevas clases, le coloque dentro de un div al nuevo botón, sin embargo no consigo que se alineen horizontalmente.

Muestro toda la estructura html. Los estilos del tema Flatsome WodPress que usamos no los he colocado.

¿Qué debo hacer para alinear horizontalmente estos botones sin romper la estructura que tienen por defecto los productos y botones de WooCommerce?

Muestro una imagen para ver los detalles del bontón al que me refiero.

introducir la descripción de la imagen aquí

   .MI-NUEVO-BOTON {
    position: absolute;

    transform: translateY(-20%); /* Alinea verticalmente al centro */
    background-color: #a1ceed;
    color: #3d3131; 
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
}

.MI-NUEVO-BOTON:hover {
    background-color: #1ab6c5;
}
<div class="col-inner">

    <div class="badge-container absolute left top z-1">

    </div>
    <div class="product-small box ">
      <div class="box-image">
        <div class="image-zoom">
          <a href="#" aria-label="Cofre Timewise: Illuminea">
            <img width="92" height="92" src="#" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
              alt="cofre Navidad" decoding="async" loading="lazy"> </a>
        </div>
        <div class="image-tools is-small top right show-on-hover">
          <div class="wishlist-icon">
            <button class="wishlist-button button is-outline circle icon" aria-label="Lista de deseos">
              <i class="icon-heart"></i> </button>
    
              <div class="yith-wcwl-add-to-wishlist add-to-wishlist-3092  wishlist-fragment on-first-load"
                data-fragment-ref="3092"
                data-fragment-options="{&quot;base_url&quot;:&quot;&quot;,&quot;in_default_wishlist&quot;:false,&quot;is_single&quot;:false,&quot;show_exists&quot;:false,&quot;product_id&quot;:3092,&quot;parent_product_id&quot;:3092,&quot;product_type&quot;:&quot;simple&quot;,&quot;show_view&quot;:false,&quot;browse_wishlist_text&quot;:&quot;Explorar la lista de deseos&quot;,&quot;already_in_wishslist_text&quot;:&quot;\u00a1El producto ya est\u00e1 en tu lista de deseos!&quot;,&quot;product_added_text&quot;:&quot;\u00a1Producto a\u00f1adido!&quot;,&quot;heading_icon&quot;:&quot;fa-heart-o&quot;,&quot;available_multi_wishlist&quot;:false,&quot;disable_wishlist&quot;:false,&quot;show_count&quot;:false,&quot;ajax_loading&quot;:false,&quot;loop_position&quot;:&quot;after_add_to_cart&quot;,&quot;item&quot;:&quot;add_to_wishlist&quot;}">
              </div>
            </div>
          </div>
        </div>
        <div class="image-tools is-small hide-for-small bottom left show-on-hover">
        </div>
        <div class="image-tools grid-tools text-center hide-for-small bottom hover-slide-in show-on-hover">
          <a class="quick-view" data-prod="3092" href="#quick-view">Vista Rápida</a>
        </div>
      </div>

      <div class="box-text box-text-products text-center grid-style-2">
        <div class="title-wrapper">
          <p class="category uppercase is-smaller no-text-overflow product-cat op-7">
            Fragancias </p>
          <p class="name product-title woocommerce-loop-product__title"><a
              href="#"
              class="woocommerce-LoopProduct-link woocommerce-loop-product__link">Cofre Timewise: Illuminea</a></p>
        </div>
        <div class="price-wrapper">
          <span class="price"><span class="woocommerce-Price-amount amount"><bdi>65,00&nbsp;<span
                  class="woocommerce-Price-currencySymbol">€</span></bdi></span></span>
        </div>
        <!-- ESTE ES EL BOTON POR DEFECTO DE WooCommerce -->
        <div class="add-to-cart-button"><a href="?add-to-cart=3092" data-quantity="1"
            class="primary is-small mb-0 button product_type_simple add_to_cart_button ajax_add_to_cart is-outline"
            data-product_id="3092" data-product_sku="" aria-label="Añade “Cofre Timewise: Illuminea” a tu carrito"
            aria-describedby="" rel="nofollow">Añadir al carrito</a></div>
      </div>
    </div>
   <!--  ESTE ES MI NUEVO BOTON -->
    <a href="?add-to-cart=3092&amp;qtytytuantity=10" class="MI-NUEVO-BOTON">NUEVO BOTON</a>
  </div>

6
  • 1
    Yo, con una clase propia, he logrado hacer todo lo que quiero desde el CSS personalizado, tienes algún indicio de porque no logras hacerlo en tu web? Cuando pones "Los botones tienen una clase determinada por el tema de WordPress que utilizamos en la tienda" no se a que te refieres, tu usas un ancla <a> no un botón, así que tu CSS debería hacer lo que tu le pongas a la clase de dicha ancla...
    – OCHOA
    Commented el 7 oct. 2023 a las 9:23
  • Gracias por la apreciación @OCHOA, creo que usted se ha molestado en aprender y yo no he dedicado el tiempo ni el interes necesario para entenderlo, gran diferencia . decir que tiene la clase del tema de WP, es la clase que muestra el 2º fragmento de código de la consulta. No consigo porque quizá no empleo bien el css, me da miedo aplicarlo a <a>y que afecte a todos los enlaces de la web. He conseguí alinear con el código que te mostrare encontrado en otra pregunta, pero no se si es la mejor forma: ´position: absolute; left: 55%; margin-left: -100px;` Y de este modo no lo entenderé nunca
    – Diana
    Commented el 7 oct. 2023 a las 11:16
  • 1
    Pero como bien dice usted, para entender como funciona CSS o lo que sea, le debe dedicar su tiempo. Aun con el Snippet que ha puesto es difícil recrear lo que usted quiere hacer porque WP tiene tanto CSS y tantas clases en cada elemento que tocar algo puede afectar a mucho. Talvez, talvez, si pone la url de la web yo pueda revisar un poco, por lo demás es complicado... Si lo hace, ponga, "necesito el botón mas arriba, abajo, derecha o izquierda de donde esta ahora" algo así para saber donde ponerlo...
    – OCHOA
    Commented el 7 oct. 2023 a las 16:11
  • Gracias de nuevo por su tiempo. he añadido una imagen a la consulta, y el html es exactamente el mismo que hay en la consulta. El sitio es de pruebas, si no puede ayudarme con esto, lo subiré a un servidor para que revise más a fondo. ¿ le parece bien @OCHOA ? Unicamente falta el css del tema Flatsome
    – Diana
    Commented el 7 oct. 2023 a las 18:00
  • No se va a comportar igual un Snippet acá que toda una web WP. Si puede subirla, hoy bien, sino regreso el martes, creo...
    – OCHOA
    Commented el 8 oct. 2023 a las 7:49

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.