Avisos
Vaciar todo

[Resuelto] Payment method  

Página 1 / 2
 
laura
 laura
Estimable Member

 

Captura de Pantalla 2021 01 06 a la(s) 22.27.40

 Estoy queriendo que mi checkout me quede con ese estilo. Ya logre hacerlo pegando un codigo con estilo y Boostrap en el tema, pero no logro que la parte de Payment method me quede asi.

Podrian indicarme si exite algun codigo o algo conocidoo para lograr que quede igual?

Desde ya mmuchas gracias!

Saludos,

LAura

Contenido solo visible a usuarios registrados

Respondido : 07/01/2021 1:29 am
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Laura,

Cual sería el proceso para ver la página que envias ya que al agregar un producto y tratar de ingresar al carrito me muestra un error 404, puedes indicarnos que producto agregar al carrito si es con uno en especifico?.

Un saludo 🖐️ 

Respondido : 07/01/2021 1:36 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

laura
 laura
Estimable Member

@argenis Gracias

La pantalla que te estoy mostrando es de https://yithemes.com/ y lo que yo quiero es lograr que mmi checkout quede asi con estilo como el de elloos y sobre todo en la parte que aparecen los pagos. No encuentro nada para poder hacerlo, ni con codigos, ni con plugins. Entonces quiero saber si me pueden reconedar un plugin oo un codigo especifico para que mi checkout quede como el de ellos en la parte de pago, ya que mi checkout es de un solo paso

Desde ya mmuchas gracias!

Saludos,

LAura

 
Respondido : 07/01/2021 3:35 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Laura.

Prueba con lo siguiente:

@media (min-width: 850px) {
#customer_details,
#order_review_heading,
#order_review {
width: 48%;
}

#customer_details {
float: left;
}

#order_review_heading,
#order_review {
float: right;
}

#order_review_heading {
clear: none;
padding-top: 0;
}

}

.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
display:none;
}


woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
width: -webkit-fill-available;
}

 

Puedes añadirlo en el archivo style.css que encontrarás en wp-content -> themes -> edubin-child-theme " style.css "

 

Un saludo

Respondido : 07/01/2021 10:24 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

laura
 laura
Estimable Member

@pepesoler Hola!!! Gracias, pero eso no hacenada.

Mira: Mi checkout se ve asi:

Captura de Pantalla 2021 01 07 a la(s) 11.59.38

Y lo que quiero es lograr  que se vea asi:

Captura de Pantalla 2021 01 06 a la(s) 22.27.40

Entoonces quisiera saber si lo puedo lograr con codigo, algoo que este ya hecho para copiar  y pegar. debe ser booostrap o si es que hay un plugin..

Quisiera saber si ustedes saben como puedo lograrlo.

Muchas Gracias 😀

Respondido : 07/01/2021 3:02 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Laura,

Prueba añadir nuevamente el código enviado por Pepe ya que veo falto cerrar el media al final, por ejemplo sustituye el anterior con el siguiente

@media (min-width: 850px) {
#customer_details,
#order_review_heading,
#order_review {
width: 48%;
}
}
#customer_details {
float: left;
}
#order_review_heading,
#order_review {
float: right;
}
#order_review_heading {
clear: none;
padding-top: 0;
}
woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
width: -webkit-fill-available;
}

El resultado debe ser por ejemplo

screenshot www.nuevo.tuwebfacil3.com 2021.01.07 16 16 07

Un Saludo

Esta publicación ha sido modificada el hace 11 meses 3 veces por Karen Rios
Respondido : 07/01/2021 3:21 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

laura
 laura
Estimable Member

@karen Muchas gracias! Ahora si funciono .

Lo que ahora me gustaria loograr es que la parte de metodos de pago quede asi:

Captura de Pantalla 2021 01 06 a la(s) 22.27.40

A mmi me queda de esta mmanera:

Captura de Pantalla 2021 01 07 a la(s) 12.29.09

Muchas gracias 😀

Respondido : 07/01/2021 3:31 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Laura,

Solo veo un metodo de pago por lo que te comparto el cóigo para ese metodo:

li.wc_payment_method.payment_method_stripe {
background-color: #edf0f2;
padding: 10px;
border-radius: 7px !important;
margin: 0 15px 15px;
}
li.wc_payment_method.payment_method_stripe p {
font-size: 13px !important;
}

y una captura :

image

Un saludo 🖐️ 

Respondido : 07/01/2021 3:41 pm

Cursos Gratuitos WordPress

laura
 laura
Estimable Member

@argenis MIL GRACIASSS

Mira si te fijas ahí acabo de activar todos los medioos para que puedas verlos.

Respondido : 07/01/2021 4:56 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Laura,

Verifica agregando el siguiente código css:

li.wc_payment_method.payment_method_woo-mercado-pago-basic, li.wc_payment_method.payment_method_paypal, li.wc_payment_method.payment_method_stripe {
background-color: #edf0f2;
padding: 10px;
border-radius: 7px !important;
margin: 0 15px 15px !important;
}
li.wc_payment_method.payment_method_woo-mercado-pago-basic p, li.wc_payment_method.payment_method_paypal p, li.wc_payment_method.payment_method_stripe p {
font-size: 13px !important;
}

Un saludo 🖐️ 

Respondido : 07/01/2021 5:06 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

laura
 laura
Estimable Member

@argenis Muchas gracias!!!1

ahora solo un detalle.. quisiera desactivar esta 3er columna donde dice  INFORMACION ADICIONAL., tengo un plugin que mmem logra sacar este campo, pero asi y todo queda la columna blanca vacia... Estuve intentando sacarla con css display none pero o no se puede hacer, o le estoy errando al codigo. Sabes si puedo lograr hacer que me quede la Col1 de nombre y demas al 50% y la de tu pedido al 50% y ocualetar la col2 de INFORMACION ADICIONAL?

Esto yo noo lo estoy logrando.

14429 Captura de Pantalla 2021 01 07 a las 12 29 09

 Gracias 😀

 

 

Respondido : 07/01/2021 8:02 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Laura,

Tal como lo mencionas si es por columna debería ser este el código:

.col-2 {
display: none !important;
}

Quizás te faltaba el important, esto para forzar el cambio sobre otros ajustes que estén presente en la web, pruébalo y nos comentas.

Un saludo 🖐️ 

Respondido : 07/01/2021 8:25 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

laura
 laura
Estimable Member

@argenis Ahora me queda asi? 🙁 y no logro acomoodarlo

 

Captura de Pantalla 2021 01 08 a la(s) 09.49.35
Respondido : 08/01/2021 1:24 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Laura,

Disculpa en mi monitor no se ve de esa forma necesité de otro monitor y bajar la resolución para poder verlo, pero verifica agregando este código:

.col-1 {
width: 100% !important;
}

Un saludo 🖐️ 

Respondido : 08/01/2021 1:41 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

laura
 laura
Estimable Member

@argenis Mil Gracias! me faltaba el important. Lo unico que aora en celular se rompe 🙁

Captura de Pantalla 2021 01 08 a la(s) 09.49.35
 
Respondido : 08/01/2021 2:30 pm
Página 1 / 2