¿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.
.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="{"base_url":"","in_default_wishlist":false,"is_single":false,"show_exists":false,"product_id":3092,"parent_product_id":3092,"product_type":"simple","show_view":false,"browse_wishlist_text":"Explorar la lista de deseos","already_in_wishslist_text":"\u00a1El producto ya est\u00e1 en tu lista de deseos!","product_added_text":"\u00a1Producto a\u00f1adido!","heading_icon":"fa-heart-o","available_multi_wishlist":false,"disable_wishlist":false,"show_count":false,"ajax_loading":false,"loop_position":"after_add_to_cart","item":"add_to_wishlist"}">
</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 <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&qtytytuantity=10" class="MI-NUEVO-BOTON">NUEVO BOTON</a>
</div>
<a>
no un botón, así que tu CSS debería hacer lo que tu le pongas a la clase de dicha ancla...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é nuncacss
del tema Flatsome