Avisos
Vaciar todo

[Resuelto] Añadir fotos al método de pago en checkout  

 
Fran
 Fran
Usuario experto

Hola,

Me gustaría añadir unas fotos al lado del método de pago en el checkout para que sea mas vistoso. Algo como esto:

imagen

¿Cómo podría hacerlo?

Saludos.

Contenido solo visible a usuarios registrados

Respondido : 14/03/2022 12:36 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fran, 

Una opción para añadir esto es hacerlo a través de código CSS, para probarlo puedes verífica si el siguiente código te permite añadir lo que necesita

li.wc_payment_method.payment_method_redsys.et_pb_checked label::after {
content: url(https:tudominio.com/tarjeta.png);
}

li.wc_payment_method.payment_method_bacs label::after {
content: url(https:tudominio.com/tranferencia.png);
}

li.wc_payment_method.payment_method_ppcp-gateway label::after {
content: url(https:tudominio.com/paypal.png);
}

li.wc_payment_method.payment_method_cod label::after {
content: url(https:tudominio.com/contrarembolso.png);
}

Ten en cuenta que debes añadir la URL de la imagen según el método de pago, de preferencia añade un tamaño a tus imágenes que ya se ajuste a esta sección. Este codigo puedes añadirlo en Divi -> Opciones del tema ->General -> CSS Personalizado

Verifica si con esto puedes añadir lo que necesitas

Un Saludo 

Respondido : 14/03/2022 1:36 pm

Fran
 Fran
Usuario experto

Hola Karen,

estoy probando el código y se han añadido las fotos, pero se quedan pegadas al texto haciendo que se vea raro y en el caso del pago con tarjeta desaparece si no tienes seleccionada la opción

imagen
imagen

También he probado a poner el código en el styles.css de mi tema hijo por no tener código disperso y no lo coge.

Gracias, un saludo.

Esta publicación ha sido modificada el hace 2 años por Fran
Respondido : 15/03/2022 10:01 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Fran, 

A que te refieres que se encuentran pegadas las imágenes, actualmente veo que se crea una separación entre la imagen y el texto

Screenshot   2022 03 15T083708.476

Por otro lado, para que siempre esté visible la opción de la tarjeta puedes modificar en el código anterior el primero que es para el icono de a tarjeta

li.wc_payment_method.payment_method_redsys label::after {
content: url(https:tudominio.com/tarjeta.png);
}

Ten en cuenta que en Divi los codigos CSS se aplican directamente desde sus opciones, pero si deseas añadirlo en el style.css debes añadir una sentencia !important al final de cada línea, por ejemplo

li.wc_payment_method.payment_method_redsys label::after {
content: url(https:tudominio.com/tarjeta.png) !important;
}

De esta forma se le dará prioridad a este código, ten en cuenta vaciar las cache de tu sitio web para que es muestren los cambios de forma correcta. 

Un Saludo 

Respondido : 15/03/2022 12:47 pm

Fran
 Fran
Usuario experto

Hola Karen,

a lo que me refiero es a que están muy pegadas al texto y es un poco antiestético, para mí lo ideal sería aprovechar el ancho de la sección y ponerlas alineadas a la derecha, donde está el recuadro rojo.

imagen

Un saludo. 

Respondido : 16/03/2022 9:24 am
Fran
 Fran
Usuario experto

Vale lo he solucionado con un float: right; en cada uno de los selectores 🤓.

Gracias!

Respondido : 16/03/2022 9:26 am