Modificación de botón " añadir a carrito dentro de la imagen...

Victor

Respuestas: 86

Estimable Member

Topic starter

Translate ▼

Buenos días hemos introducido este codigo php para colocar un boton de añadir a carito dentro de las imagenes donde se muestran los productos. ( add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 20 );

Con esta configuracion css

/* Posiciona el botón sobre la imagen */
.woocommerce ul.products li.product .button {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.3s ease;
z-index: 10;
}

/* Muestra el botón al pasar el ratón (Hover) */
.woocommerce ul.products li.product:hover .button {
opacity: 1;
}

Hay posibilidad de que solo fuera un simbolo "+" dentro de un circulo y posicionarlo siempre en la esquina derecha abajo, ahora mis mismo la posición en formato escritorio es correcta pero en formato movil no se adapta al tamaño. Podrían ayudarme a configurar la css de ese boton?

Contenido solo visible a usuarios registrados

Respondido : 19/02/2026 12:40 pm

Karen Rios

Respuestas: 19407

Illustrious Member Moderator

Translate ▼

Hola Victor.

En este caso prueba si el siguiente codigo CSS te permite ajurar lo que necesitas:

.woocommerce ul.products li.product .button.add_to_cart_button {
position: absolute;
bottom: 10px;
right: 10px;
top: auto;
left: auto;
transform: none;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: #ffffff;
border: 2px solid #333333;
color: transparent;
font-size: 0;
padding: 0;
line-height: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
z-index: 10;
cursor: pointer;
}

.woocommerce ul.products li.product .button.add_to_cart_button::before {
content: "\e015";
font-family: "ETmodules";
font-size: 16px;
line-height: 1;
color: #333333;
display: block;
font-style: normal;
font-weight: normal;
}

.woocommerce ul.products li.product:hover .button.add_to_cart_button {
opacity: 1;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover {
background-color: #333333;
border-color: #333333;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover::before {
color: #ffffff;
}

@media (max-width: 768px) {
.woocommerce ul.products li.product .button.add_to_cart_button {
opacity: 1;
width: 34px;
height: 34px;
bottom: 8px;
right: 8px;
}

.woocommerce ul.products li.product .button.add_to_cart_button::before {
font-size: 14px;
}
}

Verificalo y nos comentas como va todo

Un Saludo

Respondido : 19/02/2026 2:29 pm

Victor

Respuestas: 86

Estimable Member

Topic starter

Translate ▼

La verdad que se parece mucho a lo que quiero.

¿ Hay posibilidad de que el circulo este fijo y cuando pase el raton cambie el fondo como esta ahora, el circulo ahora mismo no esta fijo y en vez de tener una flecha puede haber un simbolo +?

¿ Posibilidad de quitar el simbolo que esta rodeado en rojo?

¿ Y la posición del circulo verde que este en la esquina derecha de la imagen no del conjunto?

Muchísimas gracias por la ayuda.

Respondido : 19/02/2026 3:53 pm

Karen Rios

Respuestas: 19407

Illustrious Member Moderator

Translate ▼

Hola Victor,

En lugar del codigo anterior prueba con el siguiente codigo CSS, elimina el anterior y añade el sigueinte:

.woocommerce ul.products li.product .button.add_to_cart_button {
position: absolute;
bottom: 5px;
right: 10px;
top: auto;
left: auto;
transform: none;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
border: 2px solid #333333;
color: transparent !important;
font-size: 0 !important;
padding: 0;
opacity: 1;
transition: all 0.3s ease;
z-index: 10;
cursor: pointer;
text-indent: -9999px;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover {
background-color: #333333 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
border-color: #333333 !important;
}

@media (max-width: 768px) {
.woocommerce ul.products li.product .button.add_to_cart_button {
width: 34px;
height: 34px;
bottom: 3px;
right: 8px;
background-size: 16px 16px;
}
}

Para eliminar el icono encima de la imagen prueba con este codigo

.woocommerce ul.products li.product .et_overlay {
display: none !important;
}

Verificalo y nos comentas como va todo

Ub Saludo

Respondido : 19/02/2026 4:18 pm

Victor

Respuestas: 86

Estimable Member

Topic starter

Translate ▼

Exacto esto es lo que quiero, aunque existe la posibilidad de meter el botón dentro del recuadro de la imagen, ahora mismo esta abajo derecha pero dentro del contenedor general y me gustaría abajo derecha pero dentro del contenedor de la imagen. Es posible?

Respondido : 19/02/2026 6:42 pm

Karen Rios

Respuestas: 19407

Illustrious Member Moderator

Translate ▼

Hola Victor,

Elimina el codigo anterior y prueba el siguiente:

.woocommerce ul.products li.product {
position: relative;
}

.woocommerce ul.products li.product .button.add_to_cart_button {
position: absolute;
bottom: 80px;
right: 10px;
top: auto;
left: auto;
transform: none;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
border: 2px solid #333333;
color: transparent !important;
font-size: 0 !important;
padding: 0;
opacity: 1;
transition: all 0.3s ease;
z-index: 10;
cursor: pointer;
text-indent: -9999px;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover {
background-color: #333333 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
border-color: #333333 !important;
}

.woocommerce ul.products li.product .et_overlay,
.woocommerce ul.products li.product a .et_overlay,
.woocommerce ul.products li.product .et-cart-info {
display: none !important;
}

@media (max-width: 768px) {
.woocommerce ul.products li.product .button.add_to_cart_button {
width: 34px;
height: 34px;
bottom: 70px;
right: 8px;
background-size: 16px 16px;
}
}

Si luego de ello aun no puedes posicionarlo como necesitas es posible necesites codigo personalizado, en este caso puedes consultar con nuestro directorio de colaboradores quienes puden ayudarte a añadir lo que necesitas.

Un Saludo

Respondido : 19/02/2026 7:24 pm

Bruno

Respuestas: 6841

Illustrious Member Moderator

Translate ▼

Que tal Victor,

Considerando los estilos sugeridos por mi compañera, puedes modificar el valor de "bottom" en ambos casos

Dejo código de referencia (modificar los estilos originales)

.woocommerce ul.products li.product .button.add_to_cart_button {
bottom: 80px;
}


@media (max-width: 768px) {
.woocommerce ul.products li.product .button.add_to_cart_button {
bottom: 80px;
}
}

Teniendo un resultado como el siguiente

Lo quieres mas arriba? Aumentas el valor de "bottom"

Saludos!

Respondido : 19/02/2026 7:26 pm

Victor

Respuestas: 86

Estimable Member

Topic starter

Translate ▼

Muchas gracias equipo. Desde luego tenéis uno de los mejores servicios.

Respondido : 20/02/2026 8:38 am

Pepe

Respuestas: 42195

Illustrious Member Admin

Translate ▼

Hola Victor.

Genial !!! Me alegra que fuese lo que buscabas.

Cualquier consulta que tengas no dudes en comunicarlo.

Un Saludo

Respondido : 20/02/2026 9:37 am

[Resuelto] Modificación de botón " añadir a carrito dentro de la imagen"