Cómo cambiar el añadir al carrito

Cuando hablamos de una tener una tienda y sobre todo personalizable, sin duda alguna se nos viene a la mente WooCommerce.

Platicar sobre personalización en nuestra tienda es todo un mundo, es por ello que en este post comenzaremos con un ajuste sumamente básico que te ayudará a darle un plus a tu sitio y hará que luzca mucho mejor; como lo es cambiar la leyenda «Añadir al carrito» en los botones de nuestra tienda.

Al ser un ajuste básico, les compartiré una serie de códigos listos para que ustedes lo puedan modificar y colocar directamente en su archivo functions.php de su tema (preferentemente que sea en su Child theme)

Cambiar el botón «Añadir al Carrito» en la Página de Producto

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );    // 2.1 +
 function woo_custom_cart_button_text() {
        return __( 'Mi botón personalizado | WPPuebla', 'woocommerce' ); 
}

Cambiar el botón «Añadir al Carrito» por Categoría

Particularmente con este código, tendremos que modificar más que la leyenda del botón, deberemos cambiar el ID de acuerdo a la categoría en la que queramos hacer el ajuste.

add_filter( 'woocommerce_product_add_to_cart_text', 'ayudawp_texto_carrito_por_categoria' );
  
function ayudawp_texto_carrito_por_categoria() {
global $product;

$terms = get_the_terms( $product->ID, 'product_cat' );
 foreach ($terms as $term) {
            $product_cat = $term->name;
            break;
}
 
switch($product_cat)
{
    case 'categoria1'; //Nombre de una categoría
        return 'Texto del botón para la categoría 1'; break;
    case 'categoria2';
        return 'Texto del botón para la categoría 1'; break;
    default;
        return 'Texto del botón por defecto para el resto de categorías'; break;
}
} 

Cambiar el botón «Añadir al Carrito» en el Archivo de Productos

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );    // 2.1 +
 function woo_archive_custom_cart_button_text() {
        return __( 'Mi botón personalizado | WPPuebla', 'woocommerce' );
} 

Cambiar el botón «Añadir al Carrito» por tipo de producto en el Archivo de Productos

 add_filter( 'woocommerce_product_add_to_cart_text' , 'custom_woocommerce_product_add_to_cart_text' );
/**
 * custom_woocommerce_template_loop_add_to_cart
*/
function custom_woocommerce_product_add_to_cart_text() {
 global $product;
  $product_type = $product->product_type;
  switch ( $product_type ) {
 case 'external':
 return __( 'Comprar productos', 'woocommerce' );
 break;
 case 'grouped':
 return __( 'Ver productos', 'woocommerce' );
 break;
 case 'simple':
 return __( 'Añadir al carrito', 'woocommerce' );
 break;
 case 'variable':
 return __( 'Selección de opciones', 'woocommerce' );
 break;
 default:
 return __( 'Leer más', 'woocommerce' );
 }
} 

Por último, si no estás seguro de querer echarle mano al código. Puedes personalizar tus botones directamente desde una interfaz simple con el plugin Add to Cart Button Custom Text.

¿Tienes dudas sobre otros botones? ó ¿tienes tus propios códigos de personalización? ¡Platicanos en los comentarios! 🙂
Si te ha gustado este post, te invito a que lo compartas con tus amigos y estés al pendiente de los próximos posts, así como de los Meetups que tenemos cada mes.

Click Acá perro
¿Por qué es importante usar Child themes? y ¿cómo crear uno?

Si has llegado a este post, probablemente ya llevas bastante tiempo con tu sitio WordPress. Sin embargo, has llegado a una encrucijada muy importante, deseas personalizarlo.

En caso contrario, back to the basics.

¿Qué es un Tema Child de WordPress?

Un child theme (tema child, tema hijo), es un tema que funciona en conjunto con otro tema (Tema padre o bien Parent theme). Este le indica a WordPress que es un child theme y quién es su tema parent. Seguido de esto, WordPress tomará en primera instancia el código del tema parent y en caso de tener código personalizado en el tema child, éste se sobrescribirá.

Estructura de un Tema Child en WordPress

Normalmente para que un child theme funcione en Wordress, éste debe contar con dos archivos como mínimo, sin embargo, personalmente me gusta agregar un 3ero.

  1. Hoja de estilos (style.css), esta tendrá un encabezado a manera de comentarios los cuales le indican a WordPress que es un tema child, así como su nombre, su tema parent entre otras cosas.
  2. Archivo de Funciones (functions.php), este archivo debe incluir una función que encola los estilos del paren theme, es decir, es a través de esta función donde le indicamos a WordPress que respete los estilos del tema parent para nuestro tema child.
  3. Imagen del tema, este me gusta agregarlo desde el momento en que creo un child theme, esta imagen es la que aparecerá como portada de nuestro theme child en el gestor de temas.

Punto importante a tomar en cuenta: existen muchas guías para llevar a cabo este proceso, algunas de ellas hacen mención que para heredar los estilos del tema parent debemos hacer el llamado a través de la hoja de estilos, esto ya no es correcto hacerlo; lo correcto es hacerlo a través del functions.php.

Ya va, me has platicado sobre que es un Tema child y cómo es su estructura, mejor cuéntame para que me sirve crear mi propio tema child.

Sin duda alguna la razón principal por la que debes usar un child theme es la personalización.  Sin embargo, te platicaré unos cuantos ejemplos.

  • Temas específicamente diseñados para ser Parent theme. Existen algunos temas diseñados para utilizarse como frameworks.
  • Quieres realizar cambios visuales, ojo no de funcionalidad (para esta parte es recomendable hacerlo mediante plugins propios).
  • Quieres modificar tu Parent child sin perder tus personalizaciones.

Si ya llegaste hasta este punto, ya sabes qué es un child theme y para que sirven. Ahora te platicaré algunas ventajas y desventajas para que tengas en cuenta a la hora de utilizarlo.

Ventajas

  • Celeridad. Si estás pensando construir un sitio completamente personalizado, te ayudará a llevar a cabo tu desarrollo mucho más rápido ya que heredarás muchas funciones y estilos del parent theme.
  • Actualizaciones. Podemos actualizar nuestro parent theme sin miedo a perder nuestras personalizaciones ya que estás no afectan a los estilos o modificaciones que hayamos hecho.
  • Frameworks. Nos permite aprovechar algún framework para realizar personalizaciones de nuestro sitio.

Desventajas

  • Rendimiento. Existe la posibilidad en que el sitio se ralentice debido al llamado de estilos y funciones que llama del paren theme (Sin embargo, esto tiene que ver un poco más con el parent theme).
  • Personalización. Así como podremos llevar a cabo muchas personalizaciones, si no cuentas con muchos conocimientos técnicos, es posible que necesites de un desarrollador web que se asegure que las personalizaciones que lleves acabo no interfieran con el parent theme y afecte el aspecto de tu sitio web.

¡Muy bien! Ahora ya tienes panorama más amplio respecto a los child themes. Hasta aquí terminamos con la teoría, es momento de ponernos ¡manos a la obra!

¿Cómo crear un Child Theme de WordPress?

Como lo vimos anteriormente, un child theme básico lo componen 3 archivos: la hoja de estilos, archivo de funciones yla imagen de portada.

Antes de empezar directamente con los archivos, debemos crear la carpeta que los va contener.  Esta carpeta (El nombre de la carpeta es indistinto) la crearemos dentro de wp-content/themes dentro de tu instalación de WordPress.

La hoja de estilos (Stylesheet | Style.css)

Una vez dentro de la carpeta de nuestro child theme, creamos un archivo con el nombre style.css y agregamos el siguiente código:

/*
 Theme Name:  My Child Theme. Child for Twenty Nineteen.
 Theme URI:  https://wppuebla.com/
 Description:  Theme to WP Puebla. Child theme for the Twenty Nineteen theme.
 Author:  Jair Martell
 Textdomain:  wppuebla
 Author URI:  https://wppuebla.com/
 Template:  twentynineteen
 Version:  1.0
 License:  GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

El texto anterior es un comentario, no es un código como tal, por lo que no afectará en absoluto a tu sitio. Básicamente le indica a WordPress que es un Child theme y la información del mismo.

  • Nombre del Tema: El nombre para tu tema.
  • URI del Tema: Donde los usuarios pueden encontrar el código o documentación para el tema.
  • Descripción: Texto descriptivo para ayudarle a los usuarios a entender lo que hace el tema.
  • Autor: Tu nombre
  • Textdomain: este es utilizado para internacionalización. Utiliza este dominio de texto como el segundo parámetro de cualquier función de internacionalización.
  • URI del Autor: El sitio del autor.
  • Plantilla: La carpeta donde se encuentra almacenado el tema parent. Ojo, debes de colocar el nombre de la carpeta, no el nombre del tema. Sin esta línea, tu Child theme no funcionará.
  • Versión: el número de la versión.
  • Licencia: La licencia, la cual debe ser GNU. [enlace]
  • URI de la Licencia: El enlace a la información de la licencia.

Una vez agregado el código con nuestros datos, lo guardamos. Posteriormente si queremos ver que haya funcionado esto. Nos iremos a nuestro WordPress en Apariencia/Temas,podremos ver nuestro Child theme, sin embargo, lo veremos sin foto de portada.

Aquí es donde entra el 2do archivo para nuestro Child theme, esta imagen da una idea de cómo luce el tema. A reserva que tu tema vaya ser completamente personalizado y distinto al tema padre, puedes copiar el archivo screenshot.png de tu tema parent y lo pegas en el child theme.

El Archivo de Funciones (Functions.php)

Por último, agregaremos el archivo de funciones. A través de este, es como encolaremos la hoja de estilos del tema padre, de no hacerlo nuestro sitio se vería roto ó con nada de estilos.

Ahora, dentro de la carpeta de nuestro child theme, crearemos un archivo nuevo con el nombre functions.php y agregaremos el siguiente código:

<?php
 /* enqueue script for parent theme stylesheeet */
 function childtheme_parent_styles() {
  // enqueue style
  wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' ); 
 }
 add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Interpretemos el código anterior, utilizamos la función wp_enqueue_style() para encolar la hoja de estilo del tema parent, con la función get_template_directory_uri() ubicando donde se encuentra almacenado el archivo. La función se encuentra dentro una función llamada wppuebla_parent_styles(), la cual está enganchada al hook wp_enqueue_scripts.

Puedes editar el código para agregar tu propio prefijo en el nombre de la función. En el ejemplo viene “childtheme”, esto se fue así para asegurar que no esté en conflicto con cualquier otra función del tema parent. Ya para terminar guarda el archivo.

¿Cómo Activar su Tema Child en WordPress?

¡Éxito! Ya has creado tu propio child theme, ahora necesitas activarlo. Asumo que este proceso saber hacerlo, pero de igual manera te lo recuerdo. En el admin de WordPress, ve al menú Apariencia/Temas, selecciona tu nuevo child theme y dale click en activar.

Por otro lado, si tienes la inquietud que al activar el child theme dejará de tomar en cuenta el tema padre, puedes despreocuparte ya que esta parte WordPress la tiene cubierta debido a la configuración que hicimos previamente y sabrá como desplegar los archivos del tema padre.

Ahora cuando vayas al home de tu sitio, se verá como antes. Sin embargo, se ve igual, esto se debe a que no hemos hecho personalizaciones. Pero ahora tienes un Child theme funcional.

¡Bien hecho!

inicio sitio

Es importante mencionarte que si es la primera vez que haces este proceso, llévalo a cabo en un sitio de pruebas, jamás lo hagas en un sitio de producción hasta que no lo hayas probado antes.

Los temas child son de mucha utilidad, ya que nos permite personalizar un tema sin tener que editar de forma directa su código. Podremos utilizarlo para agregar ciertas funcionalidades adicionales a nuestro tema base (parent theme) ya sea para personalizarlo o agregar/editar archivos de plantilla de nuestro tema padre.

Si te ha gustado este post, te invito a que lo compartas con tu comunidad y estés al pendiente de los próximos posts, así como de los Meetups que tenemos cada mes.

¿Cómo instalar un plugin?

Plugins de WordPress: úsalos, pero con moderación.

Los plugins son extensiones de código que instalamos en nuestro WordPress,a su vez nos permite aumentar las funcionalidades del mismo. Sin embargo, es muy importante mencionar que no debemos exceder el uso de ellos, ya que si no tenemos cuidado podemos saturar nuestra web de plugins afectando el rendimiento e incluso el comportamiento de la misma.

Estos plugins se instalan en nuestro servidor, específicamente en la carpeta wp-content/plugins/.

En este post quisiera mostrarles dos de las tres maneras de instalar un plugin en WordPress, es importante mencionarles que para ninguna de las dos necesitan instalar ningún programa extra.

Existen tres maneras de instalar plugins en WordPress:

  1. Instalar plugin descargandolo previamente: Para esta manera descargaremos el plugin directamente del repositorio y lo instalaremos manualmente a través del Dashboard de WordPress.
  2. Instalar plugin desde el Dashboard de WordPress: Instalaremos el plugin directamente del repositorio a través del Dashboard de WordPress(No será necesario descargarlo).
  3. Instalar plugin vía FTP: Esta opción nos servirá para cargar archivos (plugins) demasiado pesados. En esta ocasión no la tocaremos.

INSTALAR PLUGIN DESCARGANDOLO PREVIAMENTE.

Esta manera de instalar plugins es la más común para plugins que no se encuentran en el repositorio de WordPress (plugins de paga), ya sean maquetadores como Visual Composer, elementor o sliders como Slider Revolution, etc. Aunque también nos servirá para plugins gratuitos (pero para estos, nos será más práctico el segundo método).

Paso 1. Descarga del plugin: Para empezar deberemos descargar el plugin que deseemos instalar, independientemente si es de paga o gratuito, necesitaremos un archivo *.zip. En este ejemplo descargaré Jetpack by WordPress.
Importante: no descomprimas el plugin, lo usaremos comprimido.

Jetpack by wordpress
Jetpack by WordPress

Paso 2. Accediendo al Dashboard de WordPress: para proceder a instalar el plugin accederemos al Dashboard de WordPress a través del login: https://midominio.com/wp-admin, en donde ingresaremos nuestro usuario y contraseña.

Login de WordPress
Login de WordPress

Paso 3. Añadiendo el plugin: Una vez logeados en nuestro Dashboard, nos colocaremos en nuestro Panel de administración > Plugins > Añadir Nuevo.

Añadir nuevo plugin
Añadir nuevo plugin

Dentro de esta pantalla, le daremos clic al botón Subir plugin ubicado en la parte superior de la pantalla

Paso 4. Seleccionando archivo: Una vez situados en esta pantalla, le daremos clic al botón “Seleccionar archivo” . Buscaremos dentro de nuestro equipo el archivo comprimido que descargamos previamente y por último damos clic en el botón “Abrir”.

Seleccionar archivo
Seleccionando archivo del plugin

Paso 5. Instalando: Ya que cargamos el archivo, daremos clic en el botón “Instalar ahora”, seguido de eso empezará el proceso de instalación.

Instalar ahora
Subiendo un plugin

Paso 6. Activando el plugin: Por último ya tenemos instalado el plugin, sólo resta activarlo. Realizar esta tarea es sumamente sencilla, únicamente daremos clic al enlace “Activar plugin”, que nos aparecerá después de que la instalación se haya completado.

Activando plugin
Activando el plugin

Instalar plugin desde el Dashboard de WordPress.

Para instalar el plugin mediante este método, será netamente a través del Dashboard de WordPress. Es decir, no necesitamos descargar nada como en el método anterior. Es evidente que sólo nos servirá para plugins gratuitos.

El proceso para este método es el siguiente:

Paso 1. Accediendo al Dashboard de WordPress: al igual que método anterior debemos iniciar sesión. Para ello entraremos a nuestra liga del login https://midominio.com/wp-admin, donde nos pedirá nuestro usuario y contraseña.

Login de WordPress
Login de WordPress

Paso 2. Añadiendo el plugin: una vez logeados en nuestro Dashboard, nos colocaremos en nuestro Panel de administración > Plugins > Añadir Nuevo.

Añadir nuevo plugin
Añadir nuevo plugin

Paso 3. Buscando el plugin: ya que estamos en la vista de los plugins, nos posicionamos en la caja de búsqueda ubicada en la parte superior derecha, en la cual introduciremos el nombre del plugin que queramos instalar, seguido daremos un “enter”.

Buscando el plugin
Buscando el plugin

Paso 4. Seleccionando el plugin elegido: ya localizado el plugin que deseemos instalar, daremos clic al botón “Instalar ahora”, seguido comenzará el proceso de instalación.

Instalando el plugin
Instalando el plugin

Paso 5. Activando el plugin: Por último ya tenemos instalado el plugin, sólo resta activarlo. Realizar esta tarea es sumamente sencilla, únicamente daremos clic al botón “Activar plugin”, que nos aparecerá después de que la instalación se haya completado.

Activando el plugin
Activando el plugin

Estas fueron las 3 maneras distintas de instalar un plugin en WordPress. Como podrás ver cada una se adapta a diferentes circunstancias ya sea que vayas a utilizar un plugin gratis o de paga.

Por último es muy importante recalcarte que siempre debes mantener actualizados tus plugins, ya que suelen ser los canales por los que puedas tener accesos de terceros no deseados. Así que ya sabes, utilízalos con sabiduría 😉

La creciente comunidad de WP de Puebla les da la bienvenida a todos