Cómo agregar la página de pago de iconos de pago personalizados de WooCommerce

Publicado: 2021-03-01

Agregar iconos de pago de la página de pago ¿Desea agregar un ícono personalizado de WooCommerce Payment Gateway para la página de pago? En esta publicación, le mostraré cómo agregar rápidamente los íconos de pago personalizados a la página de pago de WooCommerce. Este artículo contiene una descripción detallada de los pasos para agregar rápidamente íconos de WooCommerce Payment Gateway a la página de pago.

Editar sus archivos de tema no siempre es la forma segura de personalizar WooCommerce : le quité la carga de agregar íconos de pago en cualquier lugar de su sitio al crear un complemento de íconos de pago de WooCommerce que puede encontrar aquí.

¡Este complemento viene con una manera fácil de agregar íconos SVG con más de 65 botones de métodos de pago! También puede cargar el banner de pago si no le gusta el SVG y también puede usar un código abreviado para mostrar los pagos aceptados en cualquier lugar de su tienda WooCommerce. Compruébalo aquí actualmente a un precio con descuento.

Si está ejecutando una tienda WooCommerce, probablemente esté familiarizado con el conjunto predeterminado de iconos de tarjetas de crédito. Para algunos, pueden verse bien, pero si los abre en una pantalla de alta resolución, pueden verse un poco borrosos. Además, se ven un poco anticuados.

Si está buscando un diseño personalizado y claro que pueda implementar, este artículo lo guiará. Idealmente, el mejor diseño de íconos sería agregar formas de botones curvos personalizados que tengan sombras paralelas falsas.

Iconos personalizados de pasarela de pago de WooCommerce

En la mayoría de los casos, desea agregar íconos de alta resolución que se adapten bien a los dispositivos móviles y se vean geniales. Hay una variedad de fuentes donde puede obtener estos íconos de pago; por ejemplo, los mercados de diseños creativos ofrecen una variedad de íconos de métodos de pago gratuitos y premium como este conjunto de íconos de métodos de pago en Pixeden que puede descargar y usar en su tienda WooCommerce.

Para este sencillo tutorial, vamos a utilizar iconos que tienen un aspecto moderno. La mejor solución sería usar íconos SVG para una resolución perfecta en cualquier pantalla. Le facilitamos el uso del tutorial SVG en nuestro complemento WC PayIcons que lo ayuda a agregar íconos de pago en cualquier lugar de su tienda WooCommerce. iconos de pago para wordpress Si realiza una búsqueda rápida en Internet, encontrará una gran cantidad de íconos de tarjetas de crédito que puede implementar en la página de pago e incluso en el pie de página de su tienda WooCommerce. Sin embargo, los que más me llamaron la atención están disponibles en Dribble.

Además, tienen un diseño agradable que encantará a los usuarios. Estos íconos agregan cierta sensación de confianza a su página de pago, ya que las personas se vuelven más cuidadosas cuando se trata de realizar compras en línea. Estos son los íconos que vamos a usar:

iconos personalizados de pasarela de pago de woocommerce

Además, las disponibles en Dribble son imágenes de métodos de pago con los que el usuario está familiarizado, por ejemplo, VISA, MasterCard, PayPal y AMEX.

Esto ayudará a establecer una presentación más confiable y confiable, atrayendo la atención de los visitantes primerizos. Sin embargo, también puede buscar más si su pasarela de pago incluye diferentes compañías.

Para ser honesto, solo unos pocos artículos en Internet intentan mostrarle cómo agregar íconos personalizados de Pasarelas de pago de WooCommerce usando ganchos y filtros. Este artículo intenta ayudarlo a agregar el ícono de cada una de las pasarelas de pago predeterminadas de WooCommerce a cualquier cosa que desee.

Debido a esto, algunas tiendas de WooCommerce solo aceptan pagos con Visa y MasterCard y no quieren mostrar íconos para otras pasarelas de pago de WooCommerce como American Express, para no confundir al cliente.

Adición de iconos de métodos de pago Página de pago de WooCommerce

Puede usar el mismo código que compartimos a continuación para todos los íconos de WooCommerce Payment Gateway, pero solo necesita encontrar los íconos específicos para las tarjetas de crédito que está usando para aceptar pagos en su tienda en línea.

Para agregar los íconos personalizados de la pasarela de pago de WooCommerce, debemos filtrar la función woocommerce_gateway_icon , que probablemente esté disponible en cada extensión de la pasarela. Debe agregar el siguiente código en el archivo functions.php:

 // Agregue iconos de tarjetas de crédito personalizados a la página de pago de WooCommerce 

add_filter ('woocommerce_gateway_icon', 'njengah_custom_woocommerce_icons');

función njengah_custom_woocommerce_icons() {

    $icono = '<img src="url-iconos" alt="banda" />';

     devolver $icono;

}

Sin embargo, debe reemplazar la URL de la imagen según la ubicación de la imagen de los íconos de pago en su sitio.

Puede cargar los íconos en la carpeta de medios de WordPress y luego reemplazar los icons-url en el código con la ruta de la imagen respectiva como se muestra en la imagen a continuación:
agregar iconos de métodos de pago woocommerce checkout

Conclusión

Puede agregar rápidamente los íconos de pago en la página de pago de su tienda WooCommerce usando el filtro en el fragmento de código anterior y cargando el ícono en su galería de medios. Si no quiere meterse con el código o es un desarrollador de temas de WooCommerce que quiere extender este filtro y dar a los usuarios más opciones, lo tengo cubierto en mi excelente solución.

Desarrollé el mejor complemento de íconos de pago que viene con la función de código corto y permite a los usuarios agregar íconos en la página de pago de la pasarela de pago, en el widget de pie de página y en cualquier otro lugar usando un código corto simple. – échale un vistazo aquí . Este complemento admite el uso de SVG, que es una excelente solución para personalizar los íconos de pago para que se adapten a su tema o combinación de colores del sitio. Con el complemento WC PayIcons, puede cargar el ícono directamente desde la página de la pasarela de pago correspondiente, como se muestra a continuación:

Cómo agregar la página de pago de iconos de pago personalizados de WooCommerce

Iconos personalizados de pasarela de pago de WooCommerce

Adición de iconos de métodos de pago Página de pago de WooCommerce

Conclusión

Artículos similares