En este artículo les quiero contar como puedes personalizar ciertas funcionalidades de tu sitio web o tienda en línea con Snippets.
Los snippets, para quien no sabe, son pequeños códigos que podemos poner en nuestro sitio web hecho en WordPress para hacer que este tenga alguna funcionalidad especial, lo mismo que puedes conseguir con un plugin lo puedes obtener con un snippets.
¿Por qué recomiendo un snippets?
Lo recomiendo principalmente porque a diferencia de un plugin, hace que tu sitio web sea menos pesado, menos lento.
Lo que se te puedo decir es que para utilizarlos si debes tener cierto conocimiento técnico, pero tampoco debes ser experto, así que si lees con atención las instrucciones sin ser programador puedes utilizar los snippets.
CARACTERÍSTICAS DEL PROYECTO
A continuación te quiero dar las características del sitio en donde se utilizó el snippet.
- WordPress 5.8.1
- Tema DIVI 4.10.7
- Plugin Woocommerce 5.6.0
- Plugin Code Snippets, desarrollado por Code Snippets PRO, 2.14.2
Para utilizar los snippets que te voy a compartir a continuación tenemos que hacer lo siguiente:
- Iremos al menú de Code Snippet (en español «Fragmento de Código») en el menú de la izquierda de nuestro administrador de WordPress.
- Después damos clic en «Añadir Nuevo».
- Se nos cargará una ventana, donde pondremos el nombre del snippets y el código que vayamos a utilizar.
- Damos clic en «Guardar los cambios y activar» y listo, ya tenemos el snippets activado.
Ahora, te quiero enseñar alguno de los snippets que yo he utilizado en mis proyectos que te podrían interesar.
1. Habilitar el campo de CUPÓN en nuestro ecommerce si existe un cupón activo.
Esto es ideal para no tener ese campo habilitado siempre, de esa manera se vuelve más limpia nuestra pantalla en el carrito de compra o en el formulario de pago. Para utilizar este snippet solo copia el siguiente código y no le hagas ninguna modificación.
// Oculta el campo para canjear cupones de descuento si no hay descuentos disponibles
add_filter( 'woocommerce_coupons_enabled', 'disable_coupon_field_if_not_coupons_availables' );
function disable_coupon_field_if_not_coupons_availables(){
$coupons_availables = false;
$args = array(
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'asc',
'post_type' => 'shop_coupon',
'post_status' => 'publish',
);
$coupons = get_posts( $args );
foreach ( $coupons as $key => $coupon ) {
$coupon_object = new WC_Coupon( $coupon->post_title );
if ( $coupon_object->is_valid() ) {
$coupons_availables = true;
break;
}
}
if ( !$coupons_availables ) {
return $coupons_availables;
}
return 'yes' === get_option( 'woocommerce_enable_coupons' );
}
2. Habilitar los CSS y JS en la página de mi tienda.
Este snippets principalmente te ayuda con el rendimiento de tu tienda, ya que por defecto, cuando trabajamos con tiendas en línea, los css y js se cargan aun cuando no estés viendo esas páginas y lo que ocasiona es que tu sitio se vuelva un poquito lento (no siempre ocurre). A este snippets no le hagas ninguna modificación.
// Mejora el rendimiento de la web cargando los archivos de hojas de estilo y javascript de WooCommerce en las páginas de la tienda
if ( in_array( 'woocommerce/woocommerce.php', get_option( 'active_plugins' ) ) ){
add_action( 'wp_enqueue_scripts', 'load_woocommerce_styles_and_script_on_shop_pages', 99 );
function load_woocommerce_styles_and_script_on_shop_pages() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( !is_cart() && !is_checkout() && !is_woocommerce() && !is_home() ) {
// Hojas de estilo
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce_frontend_styles' );
// Javascript
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
}
}
}
}
3. Añadir un enlace personalizado en la página de Mi Cuenta
Con este snippets pude añadir un enlace personalizado llamado «Mis cursos» en la página de mi cuenta de mi sitio web.
Este snippet si debes modificar justo en las líneas donde veas [MODIFICAR ESTA LÍNEA].
En la primera línea a modificar debes poner el nombre del enlace que vas a mostrar, aquí puedes cambiar la palabra «mis_cursos» por «lo_que_sea», procura que no hayan espacios en blanco; y en la segunda sección, donde dice «Mis Cursos» lo puedes cambiar por «EL NOMBRE QUE QUIERAS», aquí no importa si tienes espacios en blanco y la palabra que pongas será la que se vea en el enlace.
En la segunda línea debes modificar el enlace de tu página a la cual el enlace se va a redirigir, por ejemplo donde dice «$url = site_url(‘/mis-cursos/’);» le podrías poner «$url = site_url(‘/MI-NUEVO-ENLACE/’);».
add_filter ( 'woocommerce_account_menu_items', 'dl_añadir_enlace_mi_cuenta' );
function dl_añadir_enlace_mi_cuenta( $menu_links ){
// we will hook "anyuniquetext123" later
$new = array( 'mis_cursos' => 'Mis Cursos' ); //<strong>[MODIFICAR ESTA LINEA] </strong>Define en el primer lugar el slug y en el segundo el nombre que se muestra de la pestaña
$menu_links = array_slice( $menu_links, 0, 1, true )
+ $new
+ array_slice( $menu_links, 1, NULL, true );
return $menu_links;
}
add_filter( 'woocommerce_get_endpoint_url', 'dl_enlace_mi_cuenta', 20, 4 );
function dl_enlace_mi_cuenta( $url, $endpoint, $value, $permalink ){
if( $endpoint === 'mis_cursos' ) {
//<strong>[MODIFICAR ESTA LINEA] </strong> Cambia aquí la url a la que te quieres dirigir
$url = site_url('/mis-cursos/');
}
return $url;
}
4. MONTO MÍNIMO DE PEDIDO POR PAÍS EN WOOCOMMERCE
Con este snippets vas a poder configurar tu tienda para que al momento de realizar una compra, tu cliente deba realizar un pedido mínimo, caso contrario, el pedido nunca se ejecutará.
// Establecer un importe minimo en la compra
function woocommerce_importe_minimo() {
$minimum = 0; // Debes cambiar el 20 por el importe mínimo que quieras establecer en tu pedido
/**
* Agregado por George Lainez - 14-02-2023
* La siguiente validación, setea el valos minimo de importe de venta dependiendo del
* país que se escoja.
*
* Actualmente el pedido minimo de la tienda es de:
* $80 para EEUU y EUROPA
* $20 para ECUADOR
*/
//if(WC()->customer->get_billing_country() == 'US' || WC()->customer->get_billing_country() == 'ES'){
if(WC()->customer->get_billing_country() != 'EC' ){ //Con está condición se barre todos los demás paises que se vendan, diferente de Ecuador a $80
$minimum = 80;
} else{
$minimum = 20;
}
//Fin agregado George Lainez
if ( WC()->cart->total < $minimum ) {
if( is_cart() ) {
wc_print_notice(
sprintf( ' Debes realizar un pedido mínimo de %s para finalizar su compra.' , // Pon aquí el texto que quieras que se muestre en el carrito de compra.
wc_price( $minimum ),
wc_price( WC()->cart->total )
), 'error'
);
} else {
wc_add_notice(
sprintf( 'No puedes finalizar tu compra. Debes realizar un pedido mínimo de %s para finalizar su compra.' , // Pon aquí el texto que quieras que se muestre en la página de finalizar compra.
wc_price( $minimum ),
wc_price( WC()->cart->total )
), 'error'
);
}
}
}
add_action( 'woocommerce_checkout_process', 'woocommerce_importe_minimo' );
add_action( 'woocommerce_before_cart' , 'woocommerce_importe_minimo' );
0 comentarios