Si has decidido elegir Woocommerce para diseñar tu tienda online, estás en lo acertado.

Sin duda, es la mejor opción. Si no sabes por qué digo esto, aquí te lo cuento.

En esta publicación voy a compartir contigo algunos códigos tanto de CSS como Php que utilizo en las tiendas online que diseño para que de una manera rápida y sencilla también puedas utilizarlas para cambiar la apariencia a tu gusto y para añadir funciones extra a tu Ecommerce😉

Cómo añadir Código CSS en Divi

Para añadir código CSS en el Tema Divi, que es el que yo utilizo, puedes acceder desde distintos sitios, pero te voy a comentar quizás el más sencillo de memorizar:

Desde el Panel del Administrador de tu WordPress sitúate con el cursor sobre la pestaña Apariencia y cliquea en Personalizar.

Dentro de la pantalla que te aparece para personalizar tu WordPress con Divi, vete a la última pestaña CSS Adicional y pincha sobre ella.

Se te va a abrir una pantalla como la que ves en esta imagen

Sólo tienes que copiar y pegar el código que desees para cambiar la apariencia en este caso de tu Woocommerce y no olvides una vez lo hayas hecho, darle a Publicar. Es un botón que aparece arriba en la pantalla para que te guarde lo cambios.

No olvides, que aquí únicamente debes añadir código para cambiar la Apariencia de Woocommerce o el tema de WordPress que tengas activo pero no para añadir funciones extra.

3 Códigos para cambiar la apariencia de de Woocommerce

Estos 3 tipos de código que a continuación vas a poder copiar y pegar, los debes añadir al CSS Adicional.

Personalizar los títulos H2, H3,..

A través del Personalizador del tema Divi únicamente puedes personalizar el H1, de modo que la configuración que apliques para el H1 será la que te aparezca para el resto de títulos ( h2, h3, h4,..)

Si no te conformas con que esto sea así, puedes personalizar la apariencia del resto de títulos de una manera muy sencilla.

h2 {

  color: #9A1AB4;

  font-weight: normal;

  font-size: 22px;

  font-family: Montserrat;

}

h3 {

  color: #9A1AB4;

  font-weight: normal;

  font-size: 20px;

  font-family: Montserrat;

}

Y así sucesivamente para tantos típos de títulos quieras personalizar ( h4, h5,..)

Este código lo puedes personalizar modificando los cuatro elementos que aparecen a las necesidades de tu ecommerce :

  • color, para ello pincha en este enlace e introduce el color hexadecimal que desees, para elegirlo pincha en este enlace.
  • font-weight ( o peso de la fuente), que dependiendo de la tipografía te permitirá tener más o menos opciones, pero simplificando y siendo prácticos, las más habituales son bold ( negrita) o normal.
  • Font-size ( tamaño de la letra), este elemento es el que menos dudas te puede ocasionar, simplemente selecciona cuantos en cuantos pixeles quieres que se muestre el precio.
  • Font-family: por el tipo de letra que hayas escogido.

Debes saber que a medida que el título es de menor rango el tamaño de su letra debe ser menor.

H1 es,por decirlo de algún modo, como el título grande, después va H2, H3,…. Y así sucesivamente.

Cambiar el color y tamaño del precio de los productos

.price span{

color: #0f7b87 !important;

font-weight: bold;

font-size: 18px

}

De igual modo que con el código anterior, este también lo puedes personalizar modificando los 3 elementos que aparecen : su color, el peso y el el tamaño de la letra.

Ajustando esos 3 elementos, ya lo tienes.

Mostrar imágenes de los productos redondeadas

.woocommerce ul.products li.product a img,

et_overlay {

 border-radius: 14%;

}

Sólo tienes que cambiar el % para hacer que las imágenes sean a tu gusto, es decir, con los bordes más o menos redondeados.

Cuanto más bajo sea el valor de porcentaje que introduzcas, menos redondeado será el borde.

Te recomiendo que vayas probando valores de 1 a 50% hasta dar con ese resultado de la imagen que más te guste.

Cómo añadir Fragmentos de Código al Archivo Functions.php en 1 minuto

Aquí te explico cómo puedes añadir fragmentos de código al archivo Funcions.php de un modo muy rápido, fácil y seguro utilizando Code Snippets, en esta publicación te lo cuento con todo detalle

5 Códigos para añadir funciones extra a tu woocommerce utilizando Code Snippets

Utilizando el plugin Code Snippets y copiando y pegando los siguientes códigos vas a añadir 5 funciones que van a dar un impulso a tu tienda online de una manera muy sencilla:

Botón añadir al carrito en tienda ( catálogo de productos)

add_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 20 );

Este código sirve para añadir el bóton de añadir al carrito en el catálogo de productos, sin necesidad de entrar en el producto. Es muy útil.

Añadir un botón de seguir comprando en la página del carrito

add_action(‘woocommerce_cart_coupon’, ‘themeprefix_back_to_store’);

function themeprefix_back_to_store() { ?>

<a class=”button wc-backward” href=”<?php echo get_permalink( wc_get_page_id( ‘shop’ ) ); ?>”><?php _e( ‘Seguir comprando’, ‘woocommerce’ ) ?></a>

<?php

Woocommerce no trae este botón por defecto, pero de una manera sencilla lo puedes añadir tú mismo/a.

Quitar el contador de productos en las categorías

add_filter( ‘woocommerce_subcategory_count_html’, ‘woo_remove_category_products_count’ );

function woo_remove_category_products_count() {

  return;

}

A mi personalmente me parece estéticamente poco acertado el contador de productos de color amarillo que te aparece en cada categoría y subcategoría del catálogo de productos.

Si a ti también te parece que es poco estético, copia y pega el código y hazlo desaparecer.

Cambiar el cartel de Agotado en los productos por Próximamente disponible

add_filter(‘woocommerce_get_availability’, ‘availability_filter_func’);

function availability_filter_func($availability)

{

$availability[‘availability’] = str_ireplace(‘Agotado’, ‘¡¡PRÓXIMAMENTE DISPONIBLE!!’, $availability[‘availability’]);

return $availability;

}

Cuando no dispones de stock en un producto, Woocommerce por defecto pone que un letrero de Agotado en ese producto.

Si tienes pensado traer más existencias de ese producto, te recomiendo añadir este código porque de lo contrario el cliente o potencial cliente no sabe si lo vas a tener disponible de nuevo o no.

Cambiar el número de productos que se muestra por página

add_filter( ‘loop_shop_per_page’, create_function( ‘$cols’, ‘return 9;’ ), 20 );

Woocommerce por defecto muestra 6 productos en cada página del catálogo, si quieres aumentar el número de productos a mostrar sólo tienes que cambiar al número que desees en este valor ‘return 9;que es el número que he puesto como ejemplo.

Hasta aquí llega esta publicación.

Si te ha picado el gusanillo y quieres saber cómo personalizar aún más tu Woocomerce, no te puedes perder:

Espero que te haya gustado y ¡lo pongas en práctica!

Comentame aquí debajo si te ha sido útil 🙂

Abrir chat
1
¿Alguna duda? Soy Mirella, cuéntame y te ayudo encantada.