Para cambiar el color de los botones de WooCommerce, necesitamos cambiar o reemplazar el archivo de botones style.css predeterminado. Para hacer esto, necesitaremos agregar un código CSS personalizado a nuestro tema de WordPress para niños.

Hay dos maneras de hacer esto:

• Agregue un CSS personalizado al archivo de estilo secundario style.css
• Use algunos complementos para inyectar código CSS personalizado en sus páginas web.

Paso 1: Instalar el plugin en WordPress simple CSS personalizado y que se active

Usaremos un Plugin de WordPress para inyectar el código CSS en las páginas de un Tienda online de WooCommerce. Puedes descargar el complemento: Simple CSS personalizado

Puedes leer nuestro tutorial sobre instalación y activación del complemento de WordPress.

Después de activar el complemento, se agregará un nuevo submenú al menú Apparence :

El acceso a esta sección lo lleva a una interfaz con un cuadro de texto donde puede ingresar un código CSS personalizado.

Coloque el siguiente CSS en el cuadro de texto y luego haga clic en " Actualización de CSS personalizado".

.woocommerce #content input.button.alt: activable, .woocommerce #respond de entrada # submit.alt: activable, .woocommerce a.button.alt: libración, .woocommerce button.button.alt: libración, .woocommerce input.button. alt: flotar, .woocommerce páginas #content input.button.alt: flotar, de entrada .woocommerce páginas #respond # submit.alt: flotar, .woocommerce páginas a.button.alt: flotar, botón .woocommerce páginas. button.alt: flotar, .woocommerce páginas input.button.alt: hover {background: rojo significativa; background-color: rojo importante; Color: Blanco importante; text-shadow: transparente importante; box-shadow: ninguno; border-color: #ca0606 importante; } .woocommerce #content Input.button: flotar, de entrada .woocommerce #respond # someten: activable, .woocommerce a.button: libración, .woocommerce button.button: libración, .woocommerce input.button: libración, .woocommerce páginas # feliz input.button: ciernen, de entrada .woocommerce páginas #respond # someten: activable, .woocommerce páginas a.button: activable, .woocommerce páginas button.button: activable, .woocommerce páginas input.button: hover {background : rojo importante; background-color: rojo importante; Color: Blanco importante; text-shadow: transparente importante; box-shadow: ninguno; border-color: #ca0606 importante; } .woocommerce #content Input.button, .woocommerce #respond de entrada # someten, a.button .woocommerce, button.button .woocommerce, input.button .woocommerce, .woocommerce páginas input.button #content, .woocommerce páginas # # presentara entrada reacciona, .woocommerce páginas a.button, .woocommerce páginas button.button, .woocommerce páginas input.button {background: rojo significativa; Color: Blanco importante; text-shadow: transparente importante; border-color: #ca0606 importante; } .woocommerce #content Input.button.alt: libración, .woocommerce #respond de entrada # submit.alt: activable, .woocommerce a.button.alt: libración, .woocommerce button.button.alt: libración, .woocommerce input.button .ALT: activable, .woocommerce páginas #content input.button.alt: activable, de entrada .woocommerce páginas #respond # submit.alt: activable, .woocommerce páginas a.button.alt: activable, botón .woocommerce páginas .button.alt: activable, .woocommerce páginas input.button.alt: hover {background: rojo significativa; box-shadow: ninguno; text-shadow: transparente importante; Color: Blanco importante; border-color: #ca0606 importante; }

Ahora puede acceder a su tienda en línea, notará que los botones realmente han cambiado de color.

Para personalizar el color de los botones para finalmente tener el aspecto que desea,

Reemplazar propiedad " ANTECEDENTES: importante roja! Por un color de su elección. Actualiza los códigos y vuelve a acceder a tu tienda online. De hecho, utilizando el estilo que le acabamos de proporcionar, podrá cambiar completamente la estructura de los botones.

Con un poco de investigación, podrá crear botones únicos con un estilo que coincida con su tema de WordPress (especialmente si este último no es compatible con WooCommerce).

Para el siguiente ejemplo, puede utilizar el siguiente código CSS.

.woocommerce #content input.button, .woocommerce #respond de entrada # someten, a.button .woocommerce, button.button .woocommerce, input.button .woocommerce, .woocommerce páginas input.button #content, #respond .woocommerce páginas # presentar de entrada, .woocommerce páginas a.button, .woocommerce páginas button.button, .woocommerce páginas input.button {background-color: #6fba26; padding: 10px; position: relative; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; Color: #fff; Imagen de fondo: lineal gradiente (parte inferior, rgb (100,170,30) 0% rgb (129,212,51) 100%); box-shadow: inserción 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; la frontera de radio: 5px; } .woocommerce #content Input.button.alt: libración, .woocommerce #respond de entrada # submit.alt: activable, .woocommerce a.button.alt: libración, .woocommerce button.button.alt: libración, .woocommerce input.button .ALT: activable, .woocommerce páginas #content input.button.alt: activable, de entrada .woocommerce páginas #respond # submit.alt: activable, .woocommerce páginas a.button.alt: activable, botón .woocommerce páginas .button.alt: activable, .woocommerce páginas input.button.alt: hover {top: 7px; Imagen de fondo: lineal gradiente (parte inferior, rgb (100,170,30) 100% rgb (129,212,51) 0%); box-shadow: inserción 0px 1px 0px #0D496F, inserción 0px -1px 0px #0D496F; Color: #156785; text-shadow: 0px 1px 1px RGBA (255,255,255,0.3); fondo: rgb (44,160,202); }

Para aquellos que desean optimizar el rendimiento de su tienda en línea, ya sea en términos de conversión o venta de productos,

También ofrecemos complementos premium de WordPress 3 diseñados para esta tarea.

1. WooCommerce Recuperar Carrito Abandonado

sus clientes a menudo llenan sus cestas y las dejan: gracias a WooCommerce Recuperar abandonado la Cesta podrás contactarlos, recordarles lo que han comprado e invitarlos a completar sus acciones.

Establezca el intervalo de tiempo entre el abandono de un carrito y el envío de un correo electrónico de recordatorio personalizado a su cliente con un enlace directo a la página de compras para que vean en qué estaban apuntar para comprar.

Descargar | Demo | alojamiento web

2. WooCommerce Ocultar precio y complemento del botón Agregar al carrito

El complemento WooCommerce Hide Prices permite a los comerciantes crear varias reglas para ocultar precios u ocultar el botón "agregar al carrito" de los clientes no registrados o de los usuarios que tienen ciertos derechos de acceso a su sitio web de comercio electrónico.

Puedes ocultar el precio y el botón "añadir al carrito" en determinados productos o en categorías específicas. Puede reemplazarlos con texto personalizado o un botón que los llevará al  formulario de contacto. Puede crear tantas reglas que oculten automáticamente el precio y el " Añadir a panier ”dependiendo de lo que desee.

Descargar | Demo | alojamiento web

3. WooCommerce Currency Switcher

Este complemento le permite cambiar los precios de los productos de una moneda a otra en tiempo real.

Esto es particularmente importante en el comercio electrónico, ya que está dirigido a todo el mundo. Este complemento garantiza que, sin importar dónde se encuentren sus clientes, siempre podrán realizar pedidos en su tienda en línea.

Descargar | Demo | alojamiento web

Recursos recomendados

Descubra otros recursos recomendados que le ayudarán optimice el rendimiento de su tienda en línea. 

• 50 WooCommerce plugins para mejorar su tienda online
• Complementos de 9 WordPress para crear un programa de afiliados
• Complementos de 9 WooCommerce para mejorar los atributos de sus productos variables
• Complementos de 5 WordPress para editar visualmente CSS en tu blog

Conclusión

Listo ! Eso es todo por este tutorial dedicado a la personalización de botones. Añadir a la cesta de WooCommerce. No dudes en compartirlo con tus amigos en tu las redes sociales preferido. 

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Pero, mientras tanto, cuéntenos sobre su comentarios y sugerencias en la sección dedicada.

...