Woocommerce, Prestashop o Magento, que plataforma usar?

Una tienda online puede resolverse de unas 100 (o unas 1000) maneras diferentes.

Voy a dividir las opciones principales en 3 grupos:

La mas simple, pero no necesariamente la mas barata es utilizar una de las tiendas online pre-instaladas:

Por ejemplo: wix o 1and1

Pros:

  • La puedes tener montada mañana, con una inversión inicial cercana a cero.

Contras:

  • Aunque prometan ser gratuitas no lo son. Son gratis un tiempo… o cobran comisión, pero «pre-hecho» y gratis 100% no hay nada.
  • No son escalables ni te ponen fácil la migración a otro sistema porque el negocio de ellos es «retenerte». Difícilmente podrás empezar usando esto «y si va bien» ya harás una tienda «mas adelante»… porque mas adelante no podrás ni aprovechar el posicionamiento que tu tienda haya conseguido.
  • Cualquier desarrollo a «a medida» esta descartado, porque lo que te dan es lo que hay… «y punto».
  • Los métodos de cobro son los que ellos aceptan (todos cobran comisión) y no hay mas.
[...]

Personalizar las pestañas de la página de producto de Woocommerce

Muchas veces no necesitamos todas las opciones que nos ofrece Woocommerce en el backend de nuestra página de producto, y puede ser que además necesitemos otras que no están. Editando el archivo functions.php de nuestro tema podemos conseguirlo. En este post aprenderemos a:

  • Crear custom fields para cualquier pestaña
  • Crear pestañas personalizadas (custom tabs)
  • Esconder las pestañas que no nos interesan.

Empecemos pues!

Añadir un custom field

1. Creamos la función que generará nuestros custom fields:

[...]

Generadores de CSS

Aquí dejo una pequeña recopilación de generadores de CSS, para tenerlos más a mano en el uso diario.

CSS3 Generator (border radius, sombra de caja, sombra de texto, rgba, font face, columnas múltiples, box resize, box sizing, outline, transición, transformación, flexbox, degradado): http://css3generator.com/

Escala de grises: http://labs.voronianski.com/css3-grayscale/

Degradados: http://www.colorzilla.com/gradient-editor/

Border Radius: http://border-radius.com/

Formas:
https://coveloping.com/tools/css-shapes-generator
http://www.samuelrossille.com/css-shape/#1142AAy21z-17z-17z11z0

[...]

Solucionar problemas con Internet Explorer antigüo

Muchas veces tenemos problemas para visualizar correctamente nuestra página web en Explorer, o en sus versiones antiguas. Aquí tenemos unos cuantos recursos que nos ayudarán a corregir los problemas de visualización que hayamos detectado:

Si no lee etiquetas HTML5:

<!– [if lt IE 9]> <script type=»text/javascript»> document.createElement(«nav»); document.createElement(«header»); document.createElement(«main»); document.createElement(«footer»); document.createElement(«section»); document.createElement(«article»); document.createElement(«aside»); </script> <![endif]–>

[...]

Hacer un multisite en WordPress

Después de pelearnos mucho con plugins de traducción (qtranslate, ztranslate…) hemos llegado a la conclusión que si queremos tener nuestra web en varios idiomas, la mejor opción es hacer un multisite. Esto nos permitirá tener un WordPress paralelo independiente para cada idioma. Para hacerlo:

1. Desactivar todos los plugins

2. Abrir wp-config.php y añadir

define( ‘WP_ALLOW_MULTISITE’, true );

justo antes de /* That's all, stop editing! Happy blogging. */.

3. Ir a Herramientas > Configuración de red y crear la red.

[...]

CSS para Internet Explorer

Muchas veces nuestra página web se ve perfecta hasta que PAM! la abres en Explorer y te quieres morir. Para arreglar esas cosas que sólo se «desmontan» en nuestro querido IE podemos fácilmente asignar a nuestra página un css que únicamente se aplique en el caso de que el explorador sea Internet Explorer de X versión (los Explorer más nuevos cada vex se comportan mejor, pero no se puede descartar, por ejemplo, una versión 9).
Por ejemplo, yo quiero afectar a la versión 9 de IE y anteriores:

[...]

Emular una web en varios dispositivos

Para comprobar como se verá una web (local o no) en varios dispositivos, el navegador Google Chrome dispone de una herramienta muy útil.

Tenemos que ir a Menú > Más herrramientas > Herramientas para desarrolladores (o Ctrl + Mayús + I).

Para activar el emulador utilizamos el botón con forma de dispositivo ( mobile). Aparecerá un espacio de trabajo con varias opciones. La más importante es el desplegable «Device», donde escogeremos qué dispositivo queremos simular. Importante: hay que recordar actualizar la página para que se adapte al dispositivo que hemos escogido, muchas veces no lo hace de forma automática. Hay otras opciones útiles, como rotar el dispositivo, poner una medida customizada…

[...]

Ver las rutas de los archivos (o cómo personalizar un Magento y no morir en el intento)

A veces customizar un Magento es desesperante, por lo caótico de su estructura: quieres cambiar de sitio un elemento, modificar un texto, etc, y te encuentras perdido en ramificaciones, subcarpetas, archivos que llaman otros archivos… Para simplificar un poco este proceso Magento nos ayuda diciéndonos qué elementos conforman la estructura de la página que estamos viendo.

Para ello tendremos que ir al panel de administrador, en el menú superior ir a Sistema, y en el panel lateral Avanzado > Desarrollador.
En la pestaña Depurar encontraremos las opciones «Motor de perfiles»,  «Pistas del path de plantilla» y «Agregar nombres de bloques a la ayuda».

[...]

Menús responsivos en WordPress

jQuery Responsive Select Menu

Este plugin crea un «selectable» con las opciones de tu menú, y te permite ocultar uno u otro con media query
http://wordpress.org/plugins/jquery-responsive-select-menu/screenshots/

WP Responsive Menu

Este plugin crea un bonito menu lateral, que solo se muestra cuando la pantalla esta a ancho que tu determinas. Si quieres verlo en funcionamiento ve a mamarosabeach.com y reduce el tamaño de tu navegador.

http://wordpress.org/plugins/wp-responsive-menu/

Convertir todos los “li” con “a” dentro, en botones en jQuery

Es bastante habitual, cuando trabajamos con una plantilla WordPress, que un tema pinte los elementos de un menu como «LI» con etiquetas «A» dentro, por ejemplo: <li><a>mi menú</a></li>
También es habitual encontrarse que las propiedades CSS que hacen que nuestro enlace se vea como un botón, están aplicada al LI y no al A. Por tanto…. todo el LI parece un botón, pero solo el texto «mi menú» es clicable.
Esto bien puede solucionarse con estilos… pero también puede solventarse en un plis con este sencillo jQuery que hace que la etiqueta LI también sea clicable:

[...]