..:: DesarrolloWeb1106 realizamos Páginas Web desde Venezuela, Diseño y Desarrollo de Paginas Web ::..
wordpress
wordpress

trucos para woocommerce que no puedes dejar pasar

A continuación de incluimos 5 códigos útiles para personalizar tu tienda online, modificando parámetros de la apariencia o del funcionamiento. Todos han sido probados con las versiones más recientes de WordPress y Woocommerce sin producir ningún error.

Realizar seguimiento de conversiones de Facebook

Si queremos realizar campañas en Facebook cuyo objetivo sea la «Conversión», además de introducir el pixel necesario para seguir de la actividad de nuestro sitio web, es necesario configurar también el seguimiento de conversiones para poder medirlas correctamente y optimizar nuestras campañas.

El siguiente código permite realizar un seguimiento de cada compra que se realiza, incluyendo el importe total y la moneda Euro (EUR):

/*
* REALIZAR SEGUIMIENTO DE CONVERSIONES DE FACEBOOK
*/
function woo_facebook_pixel_tracking( $order_id ) {
$order = new WC_Order( $order_id );
$order_total = $order->get_total();
?>
<script>fbq(‘track’, ‘Purchase’, {‘value’:'<?php echo $order_total ?>’,’currency’:’EUR’});</script>
<?php
}
add_action( ‘woocommerce_thankyou’, ‘woo_facebook_pixel_tracking’ );

Redirigir a la página de «Finalizar Compra» tras añadir un producto

Si vendemos un único producto en nuestra web o productos que suelen comprarse individualmente, como es nuestro caso, dirigir al cliente a la página de carrito puede ser innecesario ya que le obligamos a realizar más pasos durante la compra con la consiguiente pérdida de tiempo y la posibilidad de perderlo.

Si no requerimos de este paso, podemos saltarlo introduciendo el siguiente código:

/*
* REDIRIGIR A FINALIZAR COMPRA TRAS AÑADIR PRODUCTO
*/
function woo_redirect_to_checkout() {
global $woocommerce;
$checkout_url = $woocommerce->cart->get_checkout_url();
return $checkout_url;
}
add_filter (‘add_to_cart_redirect’, ‘woo_redirect_to_checkout’);

 

Deshabilitar campos del formulario de pago

En ocasiones hacemos perder un tiempo valioso a nuestros clientes completando campos del formulario de finalización de la compra que no son necesarios, en nuestro caso por ejemplo, hemos quitado campos como el segundo campo de dirección o el de país ya que no los necesitamos.

Con el siguiente código puedes deshabilitar los campos que desees del formulario, únicamente deja en el código aquellos que quieras quitar:

/*
* DESHABILITAR CAMPOS DEL FORMULARIO DE PAGO
*/
function woo_custom_override_checkout_fields( $fields ) {
unset ($fields[‘billing’][‘billing_first_name’]); // Eliminar el campo Nombre
unset ($fields[‘billing’][‘billing_last_name’]); // Eliminar el campo Apellidos
unset ($fields[‘billing’][‘billing_company’]); // Eliminar el campo Empresa
unset ($fields[‘billing’][‘billing_address_1’]); // Eliminar el campo Dirección 1
unset ($fields[‘billing’][‘billing_address_2’]); // Eliminar el campo Dirección 2
unset ($fields[‘billing’][‘billing_postcode’]); // Eliminar el campo Código Postal
unset ($fields[‘billing’][‘billing_state’]); // Eliminar el campo Provincia
unset ($fields[‘billing’][‘billing_country’]); // Eliminar el campo País
unset ($fields[‘billing’][‘billing_email’]); // Eliminar el campo Correo Electrónico
unset ($fields[‘billing’][‘billing_phone’]); // Eliminar el campo Teléfono
return $fields;
}
add_filter( ‘woocommerce_checkout_fields’ , ‘woo_custom_override_checkout_fields’ );

Deshabilitar pestañas de la ficha de producto

Por defecto, todas las fichas de producto en Woocommerce suelen mostrar tres pestañas con la descripción del producto, las valoraciones de usuarios o información adicional, si nos queremos deshacer de una de ellas o de todas, utiliza el siguiente código personalizando qué pestañas quieres eliminar:

/*
* DESHABILITAR PESTAÑAS DE LA FICHA DE PRODUCTO
*/
function woo_remove_product_tab($tabs) {
unset( $tabs[‘description’] ); // Eliminar la pestaña de Descripción
unset( $tabs[‘reviews’] ); // Eliminar la pestaña de Valoraciones
unset( $tabs[‘additional_information’] ); // Eliminar la pestaña de Información Adicional
return $tabs;
}
add_filter( ‘woocommerce_product_tabs’, ‘woo_remove_product_tab’, 98);

Habilitar cantidad mínima de pedido

Con el objetivo de lograr la rentabilidad de nuestro ecommerce, en muchos casos puede ser necesario que el usuario deba realizar un pedido mínimo de X euros.

Con el siguiente código estableceremos el importe mínimo de compra e informaremos al usuario de dicha situación en la página del «Carrito» para que continue comprando:

/*
* HABILITAR CANTIDAD MÍNIMA DE PEDIDO
*/
function woo_minimum_order_amount() {
$minimum = 10; //Establecer importe mínimo de compra
if ( WC()->cart->total < $minimum ) {
if( is_cart() ) {
wc_print_notice(
sprintf( ‘Debes realizar un pedido mínimo de %s para finalizar tu compra.’ , // Personalizar
wc_price( $minimum ),
wc_price( WC()->cart->total )
), ‘error’
);
} else {
wc_add_notice(
sprintf( ‘Debes realizar un pedido mínimo de %s para finalizar tu compra.’ , // Personalizar
wc_price( $minimum ),
wc_price( WC()->cart->total )
), ‘error’
);
}
}
}
add_action( ‘woocommerce_checkout_process’, ‘woo_minimum_order_amount’ );
add_action( ‘woocommerce_before_cart’ , ‘woo_minimum_order_amount’ );

Con estos cinco fragmentos ya podemos empezar a mejorar las prestaciones de nuestro Woocommerce,  sin depender siempre de los plugins.

Espero sirvan de utilidad y sigas avanzando en tu proyecto.

¿Cuánto cuesta un sitio web?

Algunos años atrás, tener un sitio web era un «lujo» para las empresas. Incluso cuando contaban con los recursos para hacerlo, un sitio web no era una prioridad. Incluso actualmente hay empresas que todavía le temen o se niegan a hacer ese salto hacia lo digital.

Sobre todo cuando existen plataformas como Facebook, Instagram o Twitter que cumplen en cierta medida ese papel de ser la presencia online de tu marca. Pero como ya has de saber, no es lo mismo tener un perfil en Facebook que tener tu propia página web.

Actualmente existen muchísimas herramientas y plataformas para crear tu propia página web, pero como ya te hemos mencionado en 9 tips para contratar a una empresa de diseño, contar con la ayuda de un profesional puede resultarte más barato a largo plazo, ya que te ahorrarás tiempo y esfuerzo y sabrás que los resultados serán profesionales al cien por ciento.

Al mismo tiempo, para tener un sitio web debes considerar ciertos factores que, si no estás familiarizado, podrías acabar frustrándote y dejando todo a medias sin ganas de volver a ver una página web en tu vida.

Así que el día de hoy vamos a contestar una de las preguntas del millón: ¿Cuánto cuesta un sitio web?

Como te decíamos en el párrafo anterior, existen muchos factores que debes considerar al pagar por un sitio web.

Lo primero es que cada diseñador o programador va a cobrarte de manera diferente, nosotros te estamos dando un rango aproximado, pero también dependen factores como la urgencia con la que la requieres y el tiempo y trabajo del diseñador. No se vale regatear el trabajo ajeno. A veces en la industria creativa solemos menospreciar el trabajo de diseñadores y creadores porque sólo es «mover unas cositas» pero requiere mucho tiempo, esfuerzo, conocimientos y creatividad.

Así que ya sea que estés buscando contratar a alguien o estes pensando en hacer sitios web, en este artículo te vamos a enseñar cuáles son los factores que debes considerar al cobrar o contratar la creación de una página web.

¿Qué necesitas antes de empezar?

Contar con un sitio web puede traerte muchas ventajas como empresa. Puedes demostrar profesionalismo y disponibilidad para tus clientes y además puedes hacer que más gente te encuentre en el Internet y se anime a contratar tus servicios.

Por eso es muy importante que cuando pienses en tu sitio web lo veas como una inversión y no como un gasto que no quieres hacer. Por eso debes contemplar el mantenimiento de tu sitio, ya que estos no son estáticos.

Y no me refiero a que debes gastar cada mes en él, si no que debes tener presente que así como a un coche lo llevas a revisión para que lo afinen, lo mismo sucede con el sitio. Ya sea porque hay elementos que no son atractivos o secciones que se necesitan añadir. Nada más ten en cuenta que aunque parezcan cositas pequeñas en realidad representan un gran esfuerzo así que, como ya te dijimos, no minimices el trabajo ajeno.

Otra de las cosas que debes considerar antes de empezar es que muchas veces aunque algo nos parezca bonito no siempre es funcional. A veces nos entercamos mucho con un color o una idea que nos parece brillante que cuando alguien nos dice que no funciona nos molestamos. Me ha tocado ver a amigos batallando porque sus clientes no entienden que esa combinación de colores o ese botón sólo va a entorpecer su trabajo.

No te estoy diciendo que renuncies a tu visión, al contrario, mantener una muy buena comunicación con tu diseñador o programador es clave para que ambas partes puedan trabajar en conjunto y obtener los resultados deseados.

También tienes que decidir si quieres un sitio web hecho a la medida, o si prefieres usar WordPress u otro CMS.

Así que antes de ir con un diseñador o programador haz una búsqueda de las páginas que más te gustan. Para que él tenga una idea y referencias de lo que quieres. Entre más claro estén los dos menos cambios se realizarán y más pronto podrás lanzar tu página web.

Si no sabes lo que quieres, te dejamos nuestras tendencias de diseño web: lo in y lo out para que te des una idea de lo que otras empresas están haciendo y de cómo podrías aplicarlo a la tuya.

¿Cuánto cuesta un sitio web?
Otro elemento que debes tomar en cuenta (y es un error que yo he cometido como freelancer) es no darle la información a tiempo y adecuada al programador o diseñador. Sí, si eres diseñador o programador no empieces hasta que no tengas toda la información. Esto te va a ahorrar muchísimos dolores de cabeza y cambios ya que aunque uses info de «mientras» para adelantar es súper importante tener cosas como el branding, las imágenes o los videos ya que pueden entorpecer tu trabajo y hacer que tardes más (y trabajes más) de lo estimado.

También, si eres freelancer es super importante que dejes en claro tus tiempos, lo que necesitas del cliente y cuánto cobrarás por cargo extra o cambio extra. Se vale pedir anticipo y no tengas miedo de no empezar sin él, al final si no te pagan pues no habrás desperdiciado tu tiempo.

Así que ya sabes, si eres cliente:

  • Lleva una lista con sitios de referencia.
  • Todo el material que necesites en tu página.
  • No menosprecies el trabajo ajeno.

Y si eres freelancer:

  • No comiences a trabajar antes de que te den toda la info, incluyendo el branding, texto, contenido etc.
  • Deja en claro tus tiempos y modalidades de pago.
  • Aclara el costo por cada cambio que te pidan.

¿Para qué te va a servir?

Lo primero que debes hacer es pensar en la funcionalidad de tu sitio web, es decir ¿Para qué te va a servir?

No es lo mismo querer un sitio web para tener una página con la información de tu empresa que querer un sitio web que te sirva como tienda en línea o e-commerce. Antes de acudir con un programador o diseñador debes tener en cuenta para qué quieres tu página web para que él pueda comenzar a darte un estimado de las opciones que te puede ofrecer.

Además dependiendo de la complejidad del sitio más elevado será su precio. Y mientras mejor tengas una idea es menos probable que pidas hacer cambios significativos al sitio, los cuales también cuestan aunque lejos del dinero, pueden atrasar el lanzamiento de tu web.

Pensando en su funcionalidad también debes pensar en el número de secciones que quieres que tenga. Por ejemplo, si quieres una página estática que te sirva nada más para que la gente conozca tus servicios, quizás no necesites más que el inicio, quiénes somos, contacto y nuestros servicios. En cambio si lo que quieres es tener una página web donde la gente pueda comprar tus productos es muy probable que necesites una tienda en línea e incluso un blog.

Porque como te hemos dicho en otras ocasiones, ejem en 8 motivos para crear el blog de tu empresa, tener un blog no es lo mismo que tener una página web. Y aunque sientas que no aportaría mucho, tener un blog en realidad puede ayudarte a mejorar tu presencia en línea.

Sobre todo si estás pensando en desarrollar campañas de marketing digital, inbound marketing o marketing de contenidos para triunfar en internet.

 

¿Qué es el diseño web?

El diseño web se ha vuelto uno de los protagonistas de la última década.

En pocas palabras podríamos decir que como su nombre lo indica, el diseño web se refiere al proceso del diseño de páginas web. Y por muy simple que se escuche, el diseño web es uno de los elementos más importantes para la atracción de leads y posibles cierres de ventas.

Si comparamos el diseño web a medida vs WordPress podemos darnos cuenta que el diseño web implica más trabajo pero a la vez más libertades.

Este proceso abarca muchas áreas, como por ejemplo el diseño de la interfaz, la optimización SEO, y el diseño del sitio web entre otras cosas. A nivel general se considera diseño web como el diseño del sitio, es decir desde cuestiones como el color de fondo hasta la elección de la tipografía.

Y este diseño está muy relacionado a hacer más amigable la experiencia del usuario. En especial porque existen diferentes tipos de gustos y tendencias, las cuales pueden variar de acuerdo a las industrias en donde te desenvuelvas.

De la misma manera, diseñar sitios web que respondan a la experiencia del usuario se ha vuelto parte de la norma, aunque en un principio no todos lo consideraban así.

El diseño web implica muchas habilidades y conocimientos, las cuales dependen del diseñador. Como ya explicamos, la creación y diseño de sitios web es un proceso que conlleva cierto tiempo y planeación, por lo que pueden trabajar más de un sólo equipo en la realización de una web. Sobre todo si el proyecto tiene ciertos requerimientos que hacen necesaria la presencia de varias personas para desarrollar una parte del proyecto.

Sin embargo, hoy en día podemos encontrar diseñadores que se especializan en hacer todo este proceso, ya que el diseño web es una forma de expresar su creatividad, pero esto no tiene que ser la norma.

Los web developer y los web designers son dos cosas completamente diferentes, y ambos trabajos cumplen diferentes funciones y son importantes para poder hacer que tu web funcione lo mejor posible, destacándose del resto.

Como ya sabrás, los sitios web en el marketing digital son un elemento clave en la creación y ejecución de nuestras estrategias.

A continuación vamos a hablar más a fondo del diseño web en el marketing digital, su importancia y algunas reglas que debemos tener en cuenta si queremos hacer que nuestro sitio sea el número uno en su rubro.

 

¿Qué implica el diseño web?

De seguro tienes una noción de lo que implica el diseño. Ya vimos en diferencia entre arte y diseño que el diseño gráfico lo hacemos mediante la tipografía, colores y demás elementos visuales que en conjunto logran producir y comunicar un mensaje ya sea en forma de una imagen.

En el diseño web, los elementos gráficos se mantienen. Pero no necesariamente tienen que ser un producto estático. De hecho, una de las ventajas del diseño web que los creativos han encontrado es precisamente la capacidad de poder combinar elementos fijos o estáticos con elementos interactivos.

Motion Graphics, ilustraciones, slides, audio y video, son algunos elementos que los diseñadores pueden integrar en la página web que estén creando, lo que les da una mayor libertad para poder comunicar el mensaje y las intenciones del sitio respecto al usuario. Por ejemplo, si el sitio web tiene el objetivo de hacer conocer o presentar tus productos, incluir testimonios en forma de video puede ser más factible presentarlos mediante de videos que de texto.

Es por esto que el papel del diseñador web es muy importante. Ellos son los encargados de hacer que las ideas se materialicen. Así, el principal papel de un diseñador web es encontrar el equilibrio perfecto entre la estética y la funcionalidad del sitio que están creando.

Algunas de las habilidades y tareas que realizan los diseñadores web son:

  • Utilizar programas como Photoshop o Sketch para poder diseñar el producto final de la web.
  • Crear el diseño en función del branding de la empresa, y tenerlo muy presente al momento de diseñar el sitio.
  • Resolver problemas relacionados con la experiencia del usuario como los botones.
  • Generar los elementos gráficos que la web requiera, como el favicon y en algunos casos las ilustraciones o los motion graphics (aunque estos lo pueden crear otros diseñadores o ilustradores. En este caso el web designer tiene que coordinar que el tamaño o peso de las imágenes sean las adecuadas).
  • Utiliza y está familiarizado con el lenguaje HTML, CSS y JavaScript.

Diseño web vs UX design

UX design, o el diseño de la experiencia del usuario no es lo mismo que el diseño web.

Si, sé que hemos mencionado la importancia de considerar al usuario al momento de diseñar una web, pero en realidad esta tendencia es la que se ha popularizado hoy en día, porque en un principio no era tan considerada.

Podríamos decir que el diseño web se concentra en el diseño del sitio web sin considerar esta parte esencial de la interacción entre la tecnología y el usuario. Está más centrada en la parte estética que ya hemos platicado: colores, que se siga el brandbook, la generación de botones, etc.

En cambio el diseño UX, se concentra en mejorar la relación que tienen el usuario tanto con el sitio web como con los productos y los servicios de la empresa. Y este es un proceso que involucra A/B tests, apps móviles, sitemaps y esquemas de navegación.

No es que haya un tipo mejor o peor de diseño. Pero con la evolución del Internet y la tecnología (así como de las estrategias del inbound marketing), la experiencia del usuario se ha vuelto un elemento fundamental en la creación de páginas web, por lo que cada vez más diseñadores deciden estudiar y adentrarse al diseño UX para generar diseños más completos y poder trabajar aún más cercanos con el equipo de desarrollo.

Tipos de diseño web

Hablando del UX design podríamos decir que existen dos tipos de diseño web, a nivel general.

El responsivo y el adaptativo. Los diseños responsive y el adaptive (por sus nombres en inglés) son diferentes entre sí, aunque muchas veces llegan a confundirse.

Ambas metodologías responden a la manera en la que hemos aprendido a interactuar con el internet y por eso (al igual que el diseño web) han ido evolucionando respectivamente.

Diseño adaptativo

La principal característica del diseño adaptive es que es un diseño «fijo», es decir que se generan un diseño dependiendo de cada dispositivo. Hoy sabemos que no todos tenemos las mismas necesidades al navegar en nuestras computadoras que en nuestros teléfonos, y también que son diferentes proporciones y tamaños.

Esto quiere decir que cada diseño es independiente entre sí. La disposición de cada elemento va a variar dependiendo del dispositivo para el cual se haya creado el diseño. Los formatos y los pixeles son fijos e incluso más fácil de cargar (es decir que el tiempo de carga puede ser menor).

Al ser un diseño fijo, puede ser considerado como más sencillo ya que no se necesita de mucho código.

El diseño responsivo, a diferencia de el diseño adaptativo, es uno sólo que se va reestructurando de acuerdo al tamaño de la pantalla.

Diseño responsivo

El diseño responsivo, a diferencia del anterior se adapta a cada dispositivo, es decir que es un mismo diseño que va reestructurándose automáticamente dependiendo del dispositivo en donde se acceda al sitio.

El objetivo de esta reestructuración es que todos los elementos puedan hacer que la experiencia del usuario sea la mejor, aprovechando los espacios y características del dispositivo para que el contenido del sitio sea accesible y legible.

Por ser un poco más complejo, este tipo de diseño emplea diferentes hojas de estilos CSS, y puede requerir de un tiempo más largo de carga. Las medidas entonces son proporcionales y van variando de acuerdo a la pantalla. Irónicamente, este diseño se adapta a cada dispositivo, y se ha convertido en casi la norma (aunque depende del presupuesto y las necesidades de cada uno) en la industria.

Ahora que tienes una idea de cómo es el diseño web en el 2020, es importante que hablemos del papel que juega en el inbound marketing y porqué es tan importante para nuestra empresa o para la implementación y ejecución de nuestras estrategias.

La importancia del diseño web en el inbound marketing

Como ya lo mencionamos, el diseño web es uno de los elementos que pueden ser minimizados pero que hacen una gran diferencia, y más cuando estamos hablando de nuestros objetivos de marketing digital.

Como ya sabes, en los últimos años el surgimiento del inbound marketing ha cambiado la manera en la que las empresas realizan un seguimiento y estructuran sus estrategias de marketing. En la era del Internet donde todos tenemos acceso a muchísimos canales, nuestro objetivo es posicionarnos en la mente de los compradores, de apapacharlos y nutrirlos.

Así, nuestro objetivo más importante es nuestra relación con el usuario de tal forma que no se de cuenta que lo estamos atrayendo hacia nosotros.

En este caso, el diseño web cumple un papel muy importante. En 8 motivos para crear el blog de tu empresa abordamos la importancia de tener un sitio web, y la necesidad de que este vaya estructurado con el fin de generar ventas.

En el inbound marketing, tu sitio web cumple una función muy importante: es la carta de presentación de tu empresa.

Sin importar el rubro en el que te desenvuelvas, tener un sitio web debe de ser una de las prioridades de tu empresa antes de generar una campaña en las redes sociales o pensar en contrar un CRM. Como te explicamos en 5 ejemplos  de estrategias de marketing digital ganadoras en 2020, las redes sociales no es algo en lo que debas depender completamente, ya que no es algo propio. Además de que estas herramientas funcionan mediante  pago por clic, por lo que hace más difícil poder posicionar tu contenido orgánico.

Además una de los protagonistas de las estrategias de marketing digital son los contenidos; y para que tu contenido pueda ayudarte a posicionar tu sitio es necesario que cuente con una plataforma que esté optimizada para que los crawlers de los motores de búsqueda (como las arañas de Google) los puedan leer y recomendar en las primeras páginas de sus buscadores.

Como te explicábamos el UX design se ha vuelto parte de la norma gracias a la evolución de los smartphones. Si hace unos años todos nos conectábamos en nuestra computadora para poder realizar una búsqueda en el Internet o navegar por la web, hoy en día lo hacemos desde dispositivos móviles como nuestros teléfonos o tablets.

Y estos dispositivos tienen otras necesidades. Por ejemplo, una de las 21 técnicas de posicionamiento en Google que veremos con más fuerza este 2020 es aprovechar que las búsquedas en móviles están empezando a ser utilizadas como micro-momentos, en los que los usuarios están enfocados en optimizar sus direcciones de Google Maps para que sus empresa sean las primeras en aparecer cuando realicen una búsqueda cómo «doctores en Mérida» «Restaurantes de comida italiana», etc.

Si lo piensas, una de las razones por las que utilizamos las búsquedas en nuestros teléfonos es para a) encontrar algún lugar o empresa o b) para resolver ciertas dudas. Es por esto que cada vez más empresas están tratando de invertir en sitios webs responsivos que funcionen de acuerdo a las necesidades del usuario.

Un sitio web debe ser parte muy importante de tu estrategia de marketing digital, ya que aquí podrás almacenar tus contenidos, generar leads, y en general es tu carta de presentación ante el mundo.

Elementos que debes considerar para que el diseño web de tu empresa te ayude a generar más ventas

Suena algo casi utópico, pero sí, con un sitio web optimizado y bien diseñado es posible generar más ventas. Y para hacerlo te recomendamos seguir esos consejos que forman parte también de la tendencias de diseño web: lo in y lo out.

La experiencia del usuario empieza en el tiempo de carga

Habiendo tantas opciones de dónde escoger, obtener la atención de un lead es un gran logro, sin embargo de nada nos va a servir si nuestro sitio está lento y tarda más de 30 segundos en abrir.

A nadie le gusta esperar y menos cuando tiene otras opciones tan fáciles a la mano. Así que una de las primeras cosas que debes considerar al momento de diseñar  tu sitio es que el tiempo de carga sea menor.

Cuida el peso de las imágenes y las integraciones que realizas para que tu sitio vaya disminuyendo su tasa de rebote.

El diseño de tu sitio tiene que ser entendible para el usuario

Aquí nos referimos a que sin importar quién acceda a tu sitio, el usuario tiene que poder entender cómo está organizado y cómo funciona. Esto evitará que se frustre y abandone tu sitio porque no encuentra lo que está buscando.

Por eso son muy importantes las A/B tests, porque te permitirán saber qué es lo que funciona más en tu sitio y qué no. Y por ende, cómo puedes optimizar aún más tu sitio web.

Tu diseño debe de ser legible

Una de las cosas más importantes del diseño web es que ante todo debe ser legible. Y con esto nos referimos a que tu sitio no puede cometer esos errores muy del dosmil de utilizar comic sans rojas con color fucsia de fondo. Esto sólo logrará que el usuario huya de tu sitio, porque aunque parezca muy cool no podrán soportar más de un minuto en tu sitio.

En los últimos años el minimalismo se ha apropiado de las tendencias de diseño web, en especial aquellas que lo utilizan como fondo para maximizar la legibilidad del usuario y obvio de las arañas de los motores de búsqueda.

En este aspecto la tipografía también es muy importante. Quizás el color de tu sitio y la estructura esté muy bien y sea fácil de entender, pero si la tipografía es ilegible tampoco va a funcionar.

El diseño web es una parte fundamental del marketing digital

Podríamos decir que tu sitio web es la casa de tu empresa en el internet.

A diferencia de los que unos creen, el diseño web no es un lujo. Si bien existen opciones como plantillas que pueden ayudarte a hacer tus sitios responsivos, que un diseñador haga el sitio pensando en las necesidades de tu empresa es algo que debes de considerar.

Algunas empresas consideran que el diseño web no es indispensable, pero como ya te explicamos, tus estrategias de inbound y marketing digital no pueden depender de otras plataformas como las redes sociales que son perecederas y tienen un tiempo de vida limitado.

Tener un blog y un sitio web con un buen diseño responsivo no sólo le dará más seguridad y confianza a los usuarios, sino que también te servirá para poder resolver dudas comunes, y nutrir mejor a tus usuarios para que se conviertan en leads y en un futuro en una venta. Además que el costo de un sitio web es mínimo comparado con todos los beneficios que te da.

Sin importar el rubro de tu empresa, haz que este 2020 tu sitio web lleve a tu marca al siguiente nivel mejorando el diseño web del mismo, te aseguramos que será una inversión a largo plazo.

 

Cómo crear un usuario administrador de WordPress sin tener acceso al panel de administración

En alguna ocasión nos puede ocurrir que no tengamos un usuario en WordPress o que perdamos nuestra información de acceso. En estos casos podemos crear un usuario nuevo a través de MySQL siguiendo los pasos que te mostramos a continuación:

1. Acceder a phpMyAdmin e identificar la base de datos que usamos en WordPress.

¡IMPORTANTE! Siempre, antes de empezar a trabajar e insertar información en una base de datos, es conveniente hacer un backup por si tuviéramos que volver atrás.

2. Una vez dentro de nuestra base de datos, vamos a trabajar sobre las tablas siguientes:

  • wp_users
  • wp_usermeta

3. Ingresar a la tabla wp-users.

Haz clic en «Insertar» y accederás a la siguiente pantalla para añadir el registro de nuestro nuevo usuario:

4. Completa los campos con los siguientes datos:

  • ID – Introduce un número. En nuestro ejemplo usamos el 8 (ten en cuenta que no puedes usar un ID que ya esté en uso).
  • user_login – Nombre de nuestro nuevo usuario para accerder a WordPress.
  • user_pass – Contraseña del usuario. En la columna “Function” selecciona MD5.
  • user_nicename – El apodo o nick con el que se hará referencia al usuario.
  • user_email – Correo / E-mail del usuario.
  • user_url – Introduce la página web del sitio.
  • user_registered – La fecha y hora del registro.
  • user_status – Aquí ponemos el número 0.
  • display_name – Nombre que figurará en el blog (puede ser el mismo valor que el campo user_nicename).

Cuando se hayan completado todos los campos pulsa «Continuar» y así quedará creado nuestro nuevo registro.

5. Crea otro registro pero esta vez en a tabla wp_usermeta. Selecciona la tabla indicada desde el menu de la izquierda y al igual que antes presionar «Insertar». Podrás ver la siguiente pantalla:

Añade la siguiente información:

  • unmeta_id – Este campo lo dejaremos a vacío. MySQL lo generará automáticamente.
  • user_id – Campo ID de la tabla wp_user que hemos insertado (8 en nuesto ejemplo).
  • meta_key – Este campo debe tener el siguiente valor: wp_capabilities.
  • meta_value – Este campo debe tener el siguiente valor: a:1:{s:13:’administrator’;b:1;}

Haz clic en «Continuar» para ejecutarlo y así quedará creado el nuevo registro.

6. En la tabla anterior debes insertar otro registro. Repite el paso 5 y completa los campos pero ahora con los siguiente valores:

  • unmeta_id – Este campo lo dejamos a vacío. MySQL lo generará automáticamente
  • user_id – Aquí debemos poner el valor del campo ID de la tabla wp_user que hemos insertado (en nuestro caso, el 4).
  • meta_key – En este caso, debemos rellenarlo con el valor wp_user_level.
  • meta_value – 10

Una vez realizados los pasos anteriores ya se podrá acceder a nuestro panel de administración de WordPress.

7. Una vez dentro del panel de administración de WordPress, ve a la sección de Usuarios y podrás editar el nuevo usuario que acabas de crear. Puedes modificar los datos o completar alguno que falte, aunque no es necesario hacer ningún cambio, solo presionando guardar se realizaran procesos internos de WordPress que agregarán más datos e información en el usuario que hemos creado.

Esperamos que si lo necesitas en alguna ocasión, te sea de utilidad!

Saludos!

recuerda seguirnos por #dw1106 🙂

Pago con transferencia bancaria en WooCommerce

La transferencia es la forma de pago que menos complicación técnica presenta en tu ecommerce. Aprende como configurarla correctamente en WooCommerce.

La transferencia es la forma de pago que menos complicación técnica presenta en tu ecommerce. Aprende como configurarla correctamente en WooCommerce.

Si la semana pasada veíamos con detalle cuales eran los ajustes de finalizar compra de WooCommerce, hoy descubrirás la primera de sus pasarelas de pago por defecto, la transferencia bancaria.

Aunque es un método de pago a caballo entre el mundo offline y el online, todavía se sigue utilizando en muchos proyectos de ecommerce. Sobre todo en aquellos que están enfocados al B2B. Dependiendo de la naturaleza de tu proyecto, puedes decidir si es interesante para ti facilitar esta forma de pago a tus clientes.

Para configurar la transferencia bancaria como forma de pago en tu ecommerce, debes dirigirte a los Ajustes de WooCommerce. Y dentro de la pestaña Finalizar compra haz click sobre el link Transferencia bancaria.

Panel de opciones de transferencia bancaria de WooCommerce.

Una vez aquí, los ajustes que presenta en su configuración son los siguientes:

  • Activar/Desactivar: este check habilita o deshabilita la transferencia bancaria como forma de pago en tu tienda online. Es como el botón de On/Off.
  • Título: en este campo de texto puedes definir como quieres nombrar esta forma de pago. WooCommerce te permite personalizarlo y definir así la pasarela con la denominación que prefieras. Transferencia, Transferencia bancaria o lo que más te guste.
  • El campo título establece el nombre de la pasarela de pago.
    • Descripción: el campo descripción te permite aclarar a tus usuarios en qué consiste esta forma de pago. Este campo de descripción aparece en el selector de forma de pago de tu página de checkout.
      La descripción aparece en el selector de forma de pago de tu página de checkout.
      • Instrucciones: a diferencia del campo anterior, las instrucciones te permiten aclarar a tus usuarios como tienen que proceder para realizar la transferencia una vez que han realizado el pago. Por lo tanto, las indicaciones que incluyas en este campo sólo se mostrarán en la página de resumen de pedido y en el correo de confirmación de pedido que se envía al usuario.

    • Las instrucciones se muestran en la página de resumen de pedido y en el correo de confirmación de pedido que se envía al usuario.
      • Detalles de la cuenta: en el siguiente cuadro puedes configurar tantas cuentas bancarias como desees. Para ello, sólo tienes que rellenar los siguientes datos por cada una de ellas:

      • Completa los campos con los datos de tu cuenta o cuentas bancarias.
        • Nombre de la cuenta: campo de puedes utilizar para ayudarte a identificar las distintas cuentas que configures. Es un campo interno, por lo que úsalo como consideres para saber con qué cuenta estás trabajando en cada momento.
        • Número de cuenta: campo para indicar el número de cuenta. Como WooCommerce es un plugin de ecommerce que se puede utilizar en cualquier país, el campo número de cuenta está pensado para ser utilizado junto al código de clasificación en el mercado estadounidense. Por lo tanto, si estás en España, puedes dejarlo en blanco.
        • Nombre del banco: indica el nombre comercial de la entidad en la que está registrada dicha cuenta. Por ejemplo: Banco Santander, BBVA, etc.
        • Código de clasificación: este campo mal traducido al español es el routing number. Es un código de nueve dígitos que se basa en la ubicación del banco de EE.UU. donde se abrió la cuenta. Por lo tanto, si operas en España o Europa, es un campo que no necesitas rellenar, puedes dejarlo en blanco.
        • IBAN: El Código Internacional de Cuenta Bancaria (IBAN) es un medio internacionalmente acordado para identificar cuentas bancarias y utilizado especialmente para realizar transferencias entre bancos de la Unión Europea. En España el IBAN tiene 24 dígitos y está formado por los 2 dígitos del país (ES), 2 dígitos de control y los 20 dígitos del número completo de la cuenta bancaria.

        Formulación del código bancario IBAN.
        • BIC/SWIFT: El código SWIFT (Society for Worldwide Interbank Financial Telecommunication) o también denominado código BIC (Bank Identifier Code) es una serie alfanumérica de 8 u 11 dígitos que sirve para identificar al banco receptor cuando se realiza una transferencia internacional. Puedes rellenarlo o dejarlo en blanco dependiendo si tu ecommerce debe aceptar transferencias bancarias internacionales.

         

        Una vez completados todos los campos, cuando un usuario seleccione Transferencia bancaria en tu página de checkout, verá lo siguiente:

        Vista de cómo aparece la transferencia bancaria en las opciones de pago de la página de checkout.

        Una vez haya confirmado el pedido, se mostrará la siguiente información en su página de resumen de pedido:

    • El usuario recibe las instrucciones para realizar la transferencia bancaria en la página de resumen de pedido…

      Al igual que en el correo de confirmación de pedido, donde se mostrará los detalles para realizar la transferencia que hayas indicado en los ajustes anteriores.

    • En el email de confirmación de pedido se muestran al usuario los detalles para realizar la transferencia.
  • Resumiendo…

    Como ves, habilitar la transferencia bancaria como forma de pago en tu ecommerce es relativamente sencillo. Tan sólo debes saber a qué nos estamos refiriendo en cada campo y buscar en los detalles de tu cuenta el IBAN o el BIC/SWIFT.

    Por lo que ahora, ya no tienes excusa. Tanto si vas a aceptar transferencias nacionales, europeas o internacionales, ahora ya sabes como configurar correctamente tus cuentas bancarias en WooCommerce. Si tienes alguna duda con algún campo, no dudes en pregúntarme. Y si necesitas ayuda con tu tienda online, o necesitas poner a punto tu instalación de WooCommerce, recuerda que tienes disponible mi servicio de mantenimiento WooCommerce con el que podrás despreocuparte de actualizaciones y problemas técnicos.

    La próxima semana continuaremos con otra forma de pago que puedes habilitar en tu tienda online… el pago por cheque. Mientras tanto puedes ir chequeando todo lo que hemos visto hoy en tu ecommerce. ¡Adeeelaaaante! (Ups, esto último ha sonado a eslogan de entidad bancaria! ?

Actualizaciones importantes en eCommerce para 2019

Todos los CMS presentan ciclos de desarrollo en cuanto a nuevas versiones, parches de seguridad y estrategias de final de vida (EOL).

El año 2019 viene marcado en rojo para 2 de las plataformas más populares de Ecommerce: Prestashop y Magento

El primero por que marca el temido fin de ciclo de una de sus versiones y el segundo porque anuncia que es el último año que dará soporte a otra de ellas.

Así que apunta estas fechas:

30 de Junio de 2019

Prestashop dejará de dar soporte a las versiones 1.6.x. Esto supone que no van a sacar ningún tipo de parche de seguridad más, quedando por tanto las instalaciones que se mantengan en esas versiones desprotegidas ante vulnerabilidades.
La alternativa es migrar a una versión estable 1.7.x con lo que aseguras continuidad en la seguridad y te beneficias de las mejoras que trae esta nueva versión.

Junio de 2020

Magento dejara de dar soporte a todas las instalaciones de las versiones 1.x tanto Community Edition como Enterprise Edition. No habrá más actualizaciones de seguridad con el consiguiente riesgo que ello conlleva. Para que te hagas una idea, el 2018 nos ha traído 4 actualizaciones SUPEE para Magento 1, con más de 20 correcciones en cada una de ellas.

Se debería por tanto migrar a la última versión estable de Magento 2.

Finalmente ten en cuenta que las actualizaciones en ambas plataformas no son en ningún caso directas y requerirán por incompatibilidades entre versiones, actualizar módulos, temas y desarrollos a medida que puedan haberse realizado.

En DesarrolloWeb1106, como expertos en comercio electrónico y desarrollo, te podemos ayudar a planificar y ejecutar el cambio evitando poner en riesgo tu Ecommerce. Si tienes dudas, contacta con nosotros.

WordPress 5.0: Qué hay de nuevo

La fecha del lanzamiento de WordPress 5.0 cada vez está más cerca. Es posiblemente una de las mayores actualizaciones de los últimos años, y seguro que ya has oído hablar de ella. Pero ¿qué trae de nuevo esta versión?

WordPress 5.0: ¿qué trae de nuevo?

La novedad se centra en el completamente renovado editor de WordPress que han denominado Gutenberg. El hasta ahora editor clásico de WordPress que viene por defecto te ofrece una seria de botones para editar y dar forma a tu contenido limitado a estilos de párrafo, enlaces y poco más.

El nuevo editor Gutenberg se basa en bloques y te da mayor libertad para insertar contenido, reorganizar y crear distintas composiciones en tu página con una interfaz mucho más visual que hasta ahora. Este será el aspecto del editor de WordPress:

También puedes probarlo tú mismo.

¿Es necesario utilizar Gutenberg?

Las nuevas instalaciones de WordPress vendrán con Gutenberg de serie, junto con el tema Tweenty Nineteen. Pero será posible instalar el plugin de Editor clásico si quieres seguir utilizándolo. WordPress se ha comprometido a mantenerlo, pero sólo por un tiempo. Por ello familiarizarse con Gutenberg será necesario, antes o después. Si decides utilizar Gutenberg, el contenido que ya tengas creado con el editor clásico se mantendrá tal y como es, aunque te permitirá convertirlo en bloques.

¿Cuándo está previsto su lanzamiento?

Después de muchos cambios, parece que la nueva versión verá la luz el próximo 27 de Noviembre.

¿Puede romper algo esta actualización en tu web?

Siendo una actualización mayor, siempre es recomendable hacer una copia de seguridad por si algo sale mal. Por otro lado, te recomendamos que compruebes si tienes activada la actualización automática, para estar prevenido. De todas manera, también puedes testear en un entorno de pruebas en primer lugar y comprobar que todo funciona correctamente o existe algún problema. Es probable que existan incompatibilidades con el tema y los plugins que  utiliza tu web. Es mejor asegurarte primero.

En resumen

WordPress 5.0 es una de los mayores actualizaciones de los últimos tiempos. La forma en que creamos contenido en el editor va a cambiar, y también afectará al desarrollo de plugins y temas que ya tienen funcionalidades similares para la construcción. Solo con el tiempo veremos cómo nos adaptamos a este nuevo cambio.

Cómo almacenar lo enviado por el plugin Contact Form 7

¿Qué es el plugin Contact Form 7?

Contact Form 7 es un plugin gratuito desarrollado por Rock Lobster que nos permitirá crear todos los formularios que queramos en nuestro proyecto sin límite alguno. Fácil de instalar y de gestionar, Contact Form 7, es el plugin que necesitas si debes llevar a cabo tareas como las comentadas anteriormente. Además, no tiene coste alguno y sus beneficios son muchos.

Es muy habitual si hacemos desarrollos a medida utilizando WordPress como base, que el cliente nos solicite formularios en donde se recoja información relevante. Por defecto, WordPress no cuenta con funciones para crear formularios, pero podemos ayudarnos, como no, de un plugin para ello. En la red hay muchos plugins para crear formularios en WordPress, pero personalmente el que más me gusta es este Contact Form 7.

Almacenar lo enviado por el plugin Contact Form 7

Lo primero que tienes que hacer es instalar y activar el plugin Save Contact Form 7 teniendo ya el Contact Form 7 instalado. Para ello ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.

 

Teclea el nombre del plugin (que como te hemos indicado es “Save Contact Form 7”) y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como uno de los primeros resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.

Una vez instalado, solo tienes que ir a la nueva sección que se ha creado automáticamente al instalar este último plugin llamada Save CF7 mediante el menú lateral izquierdo disponible en el backoffice.

Cuando entres en la página del plugin en el backoffice verás un campo desplegable para elegir de qué formulario quieres ver las respuestas. Antes que nada decirte que si un formulario no ha recibido respuesta alguna, no aparecerá en el desplegable. Y por supuesto, este plugin no tiene caracter retroactivo, es decir, comenzará a almacenar información enviada por los formularios una vez se haya instalado, y no antes. Es decir, no mostrará respuestas de usuarios anteriores a la activación del plugin.

Una vez seleccionado el formulario del cual queremos ver las respuestas, estas se nos mostrarán en un listado ordenado por columnas. Puedes mostrar tantos registros como quieras, exportarlos a CSV y PDF e incluso imprimirlos. Además, cuenta con un buscador con el cuál podremos encontrar las respuestas que andemos buscando.

Por último decir que, si queremos mostrar la fecha de envío de la respuesta podemos hacerlo entrando en la sección de Ajustes del plugin en Save CF7 > Settings. Ahí podrás ver una opción que realiza esto que te acabo de comentar, así que marca el checkbox si quieres que se muestre la fecha en el listado.

Y eso sería todo, a partir de ahora podremos consultar la información de los formularios implementados con Contact Form 7 de nuestro WordPress simplemente entrando en el backoffice.

Y hasta aquí nuestro artículo sobre cómo almacenar lo enviado por el plugin Contact Form 7 en WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales.

No olvides dejarnos tu comentario y compartir el enlace para que otros usuarios de este mundo de wordpress puedan también pasar un buen dia sin complicaciones.

Recuerda seguirnos por  instagram:

 

DesarrolloWeb1106

 

Paginas Web Venezuela – Diseño y Desarrollo de Paginas Web

 

Woocommerce con 3 Decimales y más

Un caso particular, que me pidió un cliente fué el uso de 3 decimales en los precios de sus productos, y me dije listo es facil. LLegué accedí al sitio web, luego fui a woocommerce opcion ajustes. Cual fue la sorpresa? que el  selector que viene por defecto al incrementarlo y guardar solo me dejaba 2 decimales.

Empezó mi busqueda en la web de que solución podia darle a ello.

Despues de mucho bla bla bla en internet conseguí un codigo que me sirvió y logré avanzar solo en la tienda ya que en el carrito me hacia el redondeo y vaya que si estaba loco por solucionar ese conflicto. Luego de entrar al codigo de woocommerce me di cuenta que el precio me lo mostraba con 3 decimales tal como lo habia guardado enla opcion producto. Pero al mostrarlo redondeado por el formato de numero que trae predeterminado.

Quizás también te interese:

Como insertar una imagen a una plantilla WordPress

Hasta que consegui este codigo,  el cual comparto y espero le sirva a muchos:

add_filter( ‘wc_get_price_decimals’ , ‘custom_price_decimals’, 20, 1 );
function custom_price_decimals( $decimals ) {
if( is_product() || is_shop() || is_product_category() || is_product_tag() )
$decimals = 3;

return $decimals;
}

La cosa no termina allí prueba y veras.

Una vez analizado el codigo despues de indagar e indagar, logré darme cuenta que el mismo woocommerce con la experiencia en ello me permite invocar o validar en que archivos voy a utilizarlo o llamarlo según sea el caso, y es alli cuando empecé a ver el codigo que ya les puse y veo esta linea:

if( is_product() || is_shop() || is_product_category() || is_product_tag() )

donde le digo en que paginas va a utilizarse 3 decimales  y en donde realmente me funciona sin tantos problemas y es alli donde entra el protagonismo de estos personales:

is_checkout

is_cart

Las paginas de woocommerce y donde al incruirlas en el codigo quedaria de la forma:

add_filter( ‘wc_get_price_decimals’ , ‘custom_price_decimals’, 20, 1 );
function custom_price_decimals( $decimals ) {
if( is_product() || is_shop() || is_product_category() || is_product_tag() || is_checkout || is_cart )
$decimals = 3;

return $decimals;
}

y he alli donde por arte de magia sin tanto codigo loco se logra tener esos 3 decimales que nos dan estrasnochos.

Cabe recordar que para usuarios avanzados este codigo debe ir en el archivo functions de tu tema wordpress para que lo veas andar

Espero les sirva de mucho a muchos,  y seguir apoyando el crecimiento de este maravilloso mundo del desarrollo web.

No olvides dejarnos tu comentario y compartir el enlace para que otros usuarios de este mundo de wordpress puedan también pasar un buen dia sin complicaciones.

Recuerda seguirnos por  instagram :

DesarrolloWeb1106

 

Paginas Web Venezuela – Diseño y Desarrollo de Paginas Web