Storefront, el mejor tema para WooCommerce gratis

4 min 22/04/2019

Hay muchas plantillas en WordPress, y la mayoría compatibles con WooCommerce. Pero Storefront es el mejor tema para WooCommerce, desde mi humilde punto de vista. Y, aún por encima, gratis!!!

En mis proyectos suelo usar Divi, incluso tengo tiendas online realizadas con ella. Pero en las última tiendas online que hice, tuve que recurrir a Storefront y descubrí una plantilla ligera, fácil de modificar (vía tema hijo) y 100% compatible con WooCommerce. Siendo realistas, estéticamente no es de las mejores. Y si entras a personalizarla no trae muchas opciones. Pero en este post traigo unos cuantos trucos imprescindibles que te serán de mucha ayuda para darle tu toque personal a Storefront. Primero un breve análisis de porque considero Storefront el mejor tema para WooCommerce.

Características de Storefront para ser la mejor plantilla de WooCommerce

• Storefront es un tema desarrollado por Automatic, que son los mismos desarrolladores de WooCommerce (¡¡sorpresa!!). Con ello obtenemos dos cosas, perfecta integración con WooCommerce (y todas sus extensiones) y garantizamos tener una plantilla actualizada.
• Es un tema muy rápido. Aunque esto ya me lo esperaba, porque cuanto más sencillo y menos configuraciones tenga una plantilla, más rápido va.
• Es fácil de personalizar con código ya que tiene muchas funciones para personalizar y con CSS es muy fácil ponerla a tu gusto (en otras plantillas tienes que usar mil «!important»). Y sino quieres complicarte la vida hay muchos Child Themes diseñados para ella. Son de pago, pero los pagas una vez y listo. El core de la plantilla se seguirá actualizando gratis.
• Tienes muchas extensiones diseñadas en exclusiva para ella. Incluso tienes un Powerpack por 59$ con todas ellas incluidas, que te permite personalizar casi todos los aspectos sin tener que tocar ningún código. Este es tu pack si no tienes muchos conocimientos de programación!!

Si quieres personalizar tu mismo Storefront, vamos con unos cuanto consejos.

Crear un Child Theme de Storefront

Lo primero es crear un tema hijo donde debes hacer todos tus cambios. Para ello puedes recurrir a un plugin como Child Theme Configurator. O puedes crearlo tú mismo. Si necesitas más info, los amigos de Raiola Networks te enseñan más sobre temas hijos en WordPress.

Una vez creado, nos vamosal panel de WordPress -> Apariencia -> Temas y ya nos tiene que aparecer nuestro Storefront Child. Lo activamos y ya podemos hacer las personalizaciones básicas que nos permite desde Personalizar.

Las configuraciones disponibles son básicamente cambiar los colores de cada sección, subir logo, nombre de sitio, las propias de WooCommerce, los menús, widgets y CSS adicional. ¡Ni la letra puedes cambiar!

Para darle vidilla a tu página, lo vas tener que hacer desde código. Puedes hacerlo desde el gestor de archivos del servidor, desde local con tu editor de código favorito o incluso desde Apariencia -> Editor de temas. Pero como hay que crear algún archivo a mayores, yo te voy a decir como hacerlo desde el Administrador de archivos de tu hosting, en mi caso desde cPanel.

Entras en el Administrador de archivos y navegas a la raíz de tu sitio (normalmente public_html). Luego vas a wp-content->themes->storefront-child (o como le hayas llamado a tu tema hijo). Ahí te encontrarás con tu functions.php. Mi primera recomendación es crear un archivo para poner todo el código css. Eso lo hacemos pulsando en Archivo y ponemos custom.css (o como le quieras llamar).

Luego marcamos functions.php y le damos a editar.

En la ventana que se nos abre añadimos las siguientes líneas de código para registrar el archivo que acabamos de crear:

//Add custom css
add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles',20);

function custom_enqueue_styles() {
	wp_enqueue_style( 'custom-style', 
					  get_stylesheet_directory_uri() . '/custom.css', 
					  array(), 
					  wp_get_theme()->get('Version')
					);
}

Y si necesitas añadir javaScript, crea un archivo llamado custom.js (por ejemplo) y lo registras en functions.php con el siguiente código:

//funcion para añadir el archivo js personalizado
add_action('wp_enqueue_scripts', 'wpdocs_theme_name_scripts');

function wpdocs_theme_name_scripts(){
		wp_register_script('miscript', get_stylesheet_directory_uri().'/custom.js', array('jquery'), wp_get_theme()->get('Version'), true );
    	wp_enqueue_script('miscript');
}

Vale, ya tenemos nuestro Child Theme preparado para personalizar.

Como cambiar la fuente en Storefront con Google Fonts

El primer cambio importante que no tienes es la falta de cambiar el tipo de fuente. ¿Cómo usamos las Google Fonts? Esto es lo primero que vamos a cambiar.

Nos vamos a Google Fonts y elegimos las fuentes que quieres agregar. Yo elegí las variaciones de Oswald. Del link que nos dá cogemos la url que hay dentro href. En este caso es
https://fonts.googleapis.com/css?family=Oswald:400,600,700

Luego vamos al functions.php y añadimos el siguiente código:

add_action("wp_enqueue_scripts", "dcms_insertar_google_fonts");

function dcms_insertar_google_fonts(){
    $url = "https://fonts.googleapis.com/css?family=Oswald:400,600,700";
    wp_enqueue_style('google_fonts', $url);
 }

Con esto ya tenemos la fuente Oswald en los grosores seleccionados para usar en CSS.

Por ejemplo, si queremos cambiar la fuente de los títulos. En el archivo custom.css añadimos:

h1,h2,h3,h4,h5,h6{
    font-family:'Oswald';
}

Como personalizar el header o cabecera en Storefront

Para personalizar el header seguro que alguno de los elementos como el cajetín de búsqueda, el importe total o el carrito no te convencen. Eso podemos quitarlo fácilmente. Si vamos a la carpeta de storefront -> header.php y visualizamos este archivo nos aparece una lista con funciones gancho que podemos modificar fácilmente.

Por ejemplo, si queremos quitar el cajetín de búsqueda, tendremos que usar la función storefront_product_search, así que nos vamos a nuestro archivo functions.php y ponemos:

//Quitar el buscador
function storefront_product_search(){
    return false;
}

Con eso ya quitamos el buscador. Pero si lo queremos sustituir por una imágen, por ejemplo, simplemente tenemos que cambiar el return por un echo con el contenido a devolver.

//Poner David en el sitio del buscador
function storefront_product_search(){
      echo '<p>David</p>';
}

Si quieres modificar algo del código, de una función determinada, pero manteniendo el resto de elementos, tienes que sobreescribir toda la función. Busca la función en la carpeta plantilla padre (storefront), la mayoría las encontrarás en storefront -> woocommerce -> storefront-woocommerce-template-functions.php, la copias y la pegas en tu functions.php modificando aquello que quieras.

Como modificar los créditos y todo el pie de página o footer en Storefront

Para modificar los créditos del pié de página y quitar lo de «Creado con Storefront y WooCommerce», tenemos que ir a la carpeta storefront y mirar los ganchos del footer.php donde encontramos una función para los créditos «storefront_credit».

En nuestro functions.php ponemos:

//función para cambiar los créditos del pie de página

function storefront_credit() {
    ?>
    <div class="site-info">
        © Plantilla de Prueba | <a href="https://www.davidviña.es" >Diseñado por David Viña</a>
    </div><!-- .site-info -->
    <?php
}

Este sería un ejemplo para poner mi branding y el nombre del sitio. Y todo esto va dentro de un div con la class «site-info» porque así lleva ya el formato de la plantilla.

Poner un menú en el footer o pie de página de Storefront para los avisos legales

Seguro que te has dado cuenta si estuviste ya mirando las opciones de personalización de Storefront, que no hay una posición de menú en el pié de página para poner los enlaces a los avisos legales. Esto lo puedes hacer de dos formas. Manualmente con el gancho de los créditos, como explico en el apartado anterior, e introduciendo los enlaces dentro de una etiqueta <p> o creando un menú nuevo y así poder gestionar el menú desde el apartado Menú. ¡Mola más con el menú! ¿No? Pués vamos a ello.

Lo primero que tenemos que hacer es en nuestro functions.php registrar un nuevo menú de la siguiente manera:

//Añadir menu a pie de página
add_action( 'after_setup_theme', 'register_my_menu' );
function register_my_menu() {
  register_nav_menu( 'pie', __( 'Pié de página', 'pie' ) ); 
}

Ahora tenemos que ubicar este menú en algún lado y el sitio idóneo sería justo encima de los créditos. Así que a la función del apartado anterior le añadimos el siguiente código:

//función para cambiar los créditos del pie de página

function storefront_credit() {
    ?>
    <div>
        <?php
            wp_nav_menu( array(
            	'theme_location' => 'pie', //pie es el nombre que le pusimos al menú al registrarlo
            	'menu_class' => 'menu-footer', //menu-footer es la clase CSS que llevará el módulo para darle formato
            ) );
        ?>
    </div>
    <div class="site-info">
        © Compartiendo Conocimiento | <a href="https://www.davidviña.es" nofollow>Diseñado por David Viña</a>
    </div><!-- .site-info -->
    <?php
}

Con esto ya tendremos una nueva localización en la sección de menú llamada Pié de página dónde podemos poner nuestras páginas de avisos legales. Pero para que quede bien hay que darle forma sino se verá bastante feo.

Para darle un toque más profesional le añadimos a nuestro custom.css:

/*Footer*/
.menu-footer li{
	display:inline-block;
	list-style:none;
	margin-right:10px;
	
}

.menu-footer li a:not(.button),.site-footer a:not(.button){
	text-decoration:none;
}


.menu-footer li:hover a:not(.button),.site-footer a:hover{
	color:rgba(0,0,0,0.5);
	text-decoration:none;
}

¡Esto ya es otra cosa! ¿No?

Poner un botón para volver arriba que aparezca al hacer scroll

Para mi tener un botón para volver arriba es algo casi imprescindible por temas de usabilidad. Estar viendo un articulo de 2000 palabras y querer volver arriba haciendo scroll sería una locura.

Para añadir un botón de volver arriba en Storefront añadimos un botón en el gancho de los créditos, por ejemplo:

	<button id="volver-arriba">
		<i class="fas fa-angle-up"></i>
	</button>

Vale, estoy usando iconos de Font Awesome, y si solo necesitáis estos iconos para esto, no vale la pena introducir los estilos de esta librería, es mejor poner una imagen y listo. Pero si los vais usar para más cosas podéis usar esta librería registrándose en el functions.php así:

//añadir font awesome
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v5.3.1/css/all.css' );
}

Ahora le damos forma al botón con CSS y lo ocultamos con el siguiente código:

#volver-arriba{
    display: none; 
    position: fixed;
    right: 0;
    bottom: 60px;
    width: 35px;
    font-size: 30px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 5px 0 0 5px;
    text-align: center;
    color: white;
    padding: 0;
}

Para hacer que aparezca al hacer scroll tenemos que recurrir al archivo javaScript que creamos en el apartado 1. Introducimos el siguiente código:

jQuery(document).ready(function( $ ) {
	//Volver arriba al pulsar en el botón
	$('#volver-arriba').click(function(){
	    $('html, body').animate( { scrollTop : 0 }, 500 );
	});
	
        //Mostrar el botón de volver arriba al hacer scroll 100px. Si quieres otra distancia hay que cambiar el 100 por la cantidad de pixeles que quieras
	$(window).scroll(function(){
		var windowHeight = $(window).scrollTop();
                if(windowHeight<100){
			$('#volver-arriba').hide(500);
		}else{
			$('#volver-arriba').show(500);
		}
	
       });
	
});

Y ya tenemos nuestro botón de volver arriba en la plantilla Storefront.

Conclusión

En este post os he dado una pequeña ayuda para personalizar Storefront y crear una tienda online optimizada y perfectamente integrada con WooCommerce. Elementalmente hay que darle más vidilla con CSS. Para ello mi consejo es que tires del inspector de Chrome y vayas personalizando cada elemento con el propio inspector y luego cojas ese código y lo pegues en tu custom.css.

Y sí, muchas cosas que he contado en este post valen para cualquier plantilla WordPress, pero yo lo quise personalizar en Storefront ya que fué dónde lo tuve que hacer recientemente.

Si hay alguna funcionalidad que se me haya olvidado, o te gustaría que explicara, ponlo en los comentarios y actualizo este post encantado.

Muchas gracias por compartir este ratito de lectura conmigo. Nos leemos en el próximo post!!!