Pregunta sobre Easy Digital Downloads - Simple Ecommerce for Selling Digital Files de Wordpress:

Personalizar el botón de compra

Un usuario preguntó 👇

Última pregunta. Lamento haber tenido suficiente.

Intenté personalizar los botones de compra. Entré en los estilos de configuración y cambié el estilo de botón predeterminado a texto sin formato.

Luego agregué este código en mi archivo CSS personalizado:

.edd-submit.plain {
	background-color: #564865;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 15px 32px;
    font-size: 16px;
    cursor: pointer;
}

.edd-go-to-checkout.plain {
	background-color: #564865;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 15px 32px;
    font-size: 16px;
    cursor: pointer;
}

Sin embargo, el botón creado con el acceso directo purchase_link no se movió al botón de verificación cuando hice clic en mis nuevos estilos.

El botón de compra despegó después de que completé los detalles en la tabla de mis nuevos estilos.

¿Qué debo hacer para que los botones de shortcode de purchase_link adopten mi nuevo estilo?

(@ sdavis2702)

Hace 2 años, 5 meses

Hola,

Perdón por la demora aquí.

Realmente parece que pudo haber encontrado un error. Al agregar el acceso directo del enlace de compra a su contenido y elegir tener solo un enlace de texto, debería generar un HTML similar a los botones de compra predeterminados que EDD envía automáticamente. Lo que parece estar sucediendo es que el enlace de salida no tiene el acceso directo del enlace de compra plain clase para botones de enlace de texto, sin embargo. Es por eso que su CSS funciona para los botones que EDD envía automáticamente, pero no para el código corto del enlace de compra.

Tendremos que arreglar eso por nuestra parte. Sin embargo, hasta ahora, la siguiente SEC, que ha sido modificada para mejorar la eficiencia de lo que ha proporcionado, debería hacer el truco por usted:


.edd-add-to-cart.plain,
.entry-content .edd-add-to-cart,
.edd-go-to-checkout.plain,
.entry-content .edd-go-to-checkout {
    background-color: #564865;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 15px 32px;
    font-size: 16px;
    cursor: pointer;
}

Pruébelo y hágamelo saber. Mientras tanto, registraré una edición para solucionar el error.

Lanzador de hilos

(@ dsrt16)

Hace 2 años, 5 meses

Probé ese código.

Entonces, ¿qué sucede cuando cargo la página por primera vez? Puedo ver dos botones: uno que tiene el color de fondo correcto ahora, pero el color del texto es rosa y el botón es pequeño; no, lo que hice fue, y luego el que sigue a mi CSS justo al lado. Primero veo una versión completa y correcta de mi botón. Sin embargo, en unos segundos, el que se creó con mi código desaparece, y luego solo el botón que solo sigue el color de fondo del código.

(@ sdavis2702)

Hace 2 años, 5 meses

Por favor, vinculeme a una página donde pueda ver los botones mientras los describo. Debería poder hacer ajustes a la SEC.

Lanzador de hilos

(@ dsrt16)

Hace 2 años, 5 meses

Ambos botones solo son visibles durante una fracción de segundo. Me desplacé hacia abajo hasta donde estaban y actualicé la página, para poder usar una pantalla de impresión para capturarla.

Aquí está la imagen. Lo que quiero es el botón derecho, pero como dije, solo aparece por una fracción de segundo, y luego desaparece, dejando solo el de la izquierda.

http://beaconpointservices.org/wp-content/uploads/2018/09/2-buttons.jpg

Esta es la página, pero solo verá el botón incorrecto si no se desplaza al área con los botones y luego hace clic en actualizar. Cuando lo haga, verá los dos botones uno al lado del otro durante una fracción de segundo.

http://beaconpointservices.org/editors-tracking-programs/

(@ sdavis2702)

Hace 2 años, 5 meses

No te preocupes. Hay herramientas de navegador que me permiten ver el problema sin actualizar.

Realmente parece que tiene otro CSS en la forma de crear un problema. Línea 976 de tu styles.css archivo ubicado aquí: ver fuente:http://beaconpointservices.org/wp-content/themes/bp/style.css?ver=4.9.8 Este archivo parece estar en la raíz de un tema con una carpeta llamada «bp».

La regla CSS ubicada en esa línea (976) (solo puedo adivinar) busca aplicarse todos Enlaces :not() especificado en el mismo. ¿Parece estar excluyendo deliberadamente elementos que están incluidos en su tema, quizás? Es decir, la regla de la SEC no excluye intencionalmente los botones EDD (o cualquier otro botón para el caso), por lo que la SEC escrita allí se aplica a los botones EDD … aplicando los cambios que realice al intentar hacer.

Aquí hay una imagen de cómo se ve cuando desactivo CSS con la línea 976 desactivada: https://cl.ly/5cfb18b99b2b

No estoy seguro de si ese CSS es personalizado o si estaba en el tema que estás usando, escrito por otra persona así. Pero usa la acción :not() en un selector de CSS para excluir ciertos tipos de enlaces, en lugar de escribir un CSS que se centre en los enlaces a los que desea dirigirse, esto siempre puede tener resultados inesperados. Porque no tiene forma de predecir qué elementos HTML introducirán otros plugins, o incluso el propio WordPress, en el futuro.

—–

Sin embargo, esto es lo que puede hacer para resolver el problema en solo unos pocos pasos:

Paso 1

En esa misma línea 976 en el archivo CSS, cambie esto:

a:not([title="1"]):not([title="2"]):not([title="3"]):not([title="4"]):not([title="5"]):not(.btn):not(.nav-link):not(.navbar-brand):not(.ab-item):not(.no-style):not(.dropdown-item):not(.elementor-button-link):not(.nc_tweet)

Para hacer esto:

a:not([title="1"]):not([title="2"]):not([title="3"]):not([title="4"]):not([title="5"]):not(.btn):not(.nav-link):not(.navbar-brand):not(.ab-item):not(.no-style):not(.dropdown-item):not(.elementor-button-link):not(.nc_tweet):not(.edd-add-to-cart):not(.edd_go_to_checkout)

(Acabo de agregar :not(.edd-add-to-cart):not(.edd_go_to_checkout) hasta el final del selector)

Paso 2

Sustituya esta pieza completa de CSS que le di anteriormente:

.edd-add-to-cart.plain,
.entry-content .edd-add-to-cart,
.edd-go-to-checkout.plain,
.entry-content .edd_go_to_checkout {
    background-color: #564865;
    border: none;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding: 15px 32px;
    font-size: 16px;
    cursor: pointer;
}

(Acabo de cambiar .edd-go-to-checkout a .edd_go_to_checkout … Mi error)

Todo debe verse como lo necesita y funcionar como se espera, cambiando del botón Agregar al carrito al botón Verificar. Intenté utilizar mi navegador para comprobarlo, pero parece que su sitio ha iniciado un error al intentar utilizar las herramientas del navegador.

Pruébelo y avíseme.

Lanzador de hilos

(@ dsrt16)

Hace 2 años, 5 meses

Entré para probarlo, pero no puedo acceder a mi sitio de Word Press en absoluto; no puedo acceder a nada, y mucho menos al archivo CSS.

Fui a mi inicio de sesión de WordPress para mi sitio y decía un error al configurar una conexión de base de datos.

Gracias por tu ayuda. Estoy seguro de que su nuevo código funcionará tan pronto como pueda probarlo.

Hablar con mi anfitrión ahora para averiguar por qué se ha degradado mi propio sitio web y por qué no puedo iniciar sesión en mi administrador de WordPress en absoluto.

Esta respuesta fue modificada hace 2 años, 5 meses. Lanzador de hilos

(@ dsrt16)

Hace 2 años, 5 meses

Oh hombre … no es solo un inicio de sesión de WordPress. Mi propio sitio web comete ese error. Así que ahora nadie puede ver mi sitio web, solo dice un error al configurar una conexión de base de datos.

Esto nunca ha sucedido antes.

(@ sdavis2702)

Hace 2 años, 5 meses

No, las herramientas del navegador no tienen ningún efecto en el sitio real. Mi navegador no tiene acceso a su propio sitio, solo a los elementos que aparecen en la pantalla. Puedo manipularlos en mi opinión. Una actualización de página en mi extremo elimina todos mis cambios temporales.

Ahora puede hacer clic derecho en esta pantalla, hacer clic en la opción asociada con la palabra «Inspeccionar» o «Inspector», y ver el HTML y CSS en la página que está viendo. Es solo una herramienta de navegador para ver cómo está estructurada una página, su estilo y otras cosas. Los desarrolladores lo utilizan para ver cómo se verán los cambios antes de realizarlos en el sitio real.

No estoy seguro de qué sucedió con su sitio, pero parece que algo va mal en el nivel del servidor. Su sitio depende de una base de datos de la que extraer datos y su conexión con la base de datos está fallando.

Comuníquese con su anfitrión de inmediato e informe el asunto. Deberían poder rastrearlo en segundos.

Lanzador de hilos

(@ dsrt16)

Hace 2 años, 5 meses

Él lo consiguió. Estoy en eso, hablando con mi anfitrión ahora.

¡Gracias por tu ayuda! Sí, usé «explorar» antes. Herramienta de juego

Lanzador de hilos

(@ dsrt16)

Hace 2 años, 5 meses

Encontré mi sitio como una copia de seguridad y probé su código. ¡Funciona! ¡Gracias!

(@ sdavis2702)

Hace 2 años, 5 meses

Sobresaliente. Estamos aquí si tiene más preguntas.

(@eblakely)

Hace 2 años, 3 meses

Hola, tengo problemas similares. Cambié a su plugin de otro que tenía problemas para publicar y, en general, estaba contento con su plugin EDD.

El único problema real que tengo es el espacio alrededor del botón. Miraste CSS y probaste algunas cosas diferentes, ¿sugerirías cómo reducirlo?

El que está debajo del bloque de texto es al que también me refiero.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *