Avisos
Vaciar todo

[Resuelto] Agregar boton add to cart  

 
Tomas
 Tomas
Usuario experto

Hola, quisiera saber como se puede poner un bot√≥n de a√Īadir al carrito desde la pagina de tienda para que no tengan que entrar a la pagina del producto para a√Īadirlo.

image

Para que debajo del nombre y el precio se vea ese boton.

Gracias

Contenido solo visible a usuarios registrados

Citar
Respondido : 22/12/2021 3:46 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Tomas, 

Para mostrar el bot√≥n de A√Īadir al carrito en la p√°gina de la tienda solo necesitas a√Īadir el siguiente c√≥digo en el function.php de tu tema (preferiblemente el tema hijo) o con un plugin como code snippets

// A√Īadir bot√≥n de a√Īadir al carrito en p√°gina de tienda
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

El resultado debe ser como se muestra en la captura

Screenshot (24)

Verifica si con esto logras a√Īadir lo que necesitas

Un Saludo 

ResponderCitar
Respondido : 22/12/2021 3:59 pm
Tomas
 Tomas
Usuario experto

@karen Perfecto, ahí quedo, se le podrá agregar CSS para que quede como este botón?

image
ResponderCitar
Respondido : 22/12/2021 4:15 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Tomas, 

En este caso verifica si el siguiente código te permite configurar lo que necesitas

.woocommerce-page a.button {
background: #0c4da2;
color: #ffffff;
border-radius: 100px;
font-size: 14px;
display: inline-block;
}

Revisa esto y nos comentas como ha ido todo

Un Saludo 

 
ResponderCitar
Respondido : 22/12/2021 4:59 pm
Tomas
 Tomas
Usuario experto

@karen me sali√≥ este mensaje cuando lo a√Īad√≠. Lo puse justo debajo del c√≥digo anterior, no se si ese ser√° el lugar correcto.

image
ResponderCitar
Respondido : 22/12/2021 5:04 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Tomas, 

El c√≥digo CSS no debe a√Īadirse en las opciones del function o code snippets, elim√≠nalo de esta secci√≥n y a√Ī√°delo en el apartado de Apariencia -> Personalizar -> CSS Adicional.

Screenshot (26)

Otra opci√≥n donde puedes a√Īadirlo, ya que tienes Divi puedes a√Īadirlo en Divi -> Opciones del tema -> General -> CSS Personalizar

Screenshot (25)

Verifica a√Īadirlo en la opci√≥n correcta y nos comentas como ha ido todo

Un Saludo 

ResponderCitar
Respondido : 22/12/2021 5:15 pm
Tomas
 Tomas
Usuario experto

@karen Ahí quedo perfecto, una cosa mas, se podrá cuando pasa el raton por arriba que se vea como antes pero con los bordes redondeados:

image

y que el símbolo en vez de ser una flechita sea un +?

ResponderCitar
Respondido : 22/12/2021 7:31 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Tomas, 

Verifica si el siguiente código te permite configurar lo que necesitas para el botón del hover

.woocommerce-page a.button:hover {
border-radius: 100px;
border-color: #0c4da2;
color: #0c4da2;
}
.woocommerce-page a.button:after {
content: "\4c";
font-size: 20px;
}

Revisa esto y nos comentas como ha ido todo

Un Saludo 

ResponderCitar
Respondido : 22/12/2021 7:45 pm