Añadir tiempo de entrega personalizado en WooCommerce

Subscribe
Voiced by Amazon Polly

Tenía muchas ganas de escribir en el blog y es que estamos a tope de trabajo para tener todo listo en septiembre.

Hace unas cuantas semanas publiqué un post comentando que WooCommerce está muy verde para que sea una plataforma operativa y funcional ya que necesitamos instalar bastantes plugins adicionales.

La parte buena es el gran poder de personalización que tenemos los desarrolladores, la buena documentación que existe y las personas de la comunidad que hacen de WooCommerce un potente plugin traducido en multitud de idiomas. La semana pasada me comentaron la posibilidad de añadir a los productos un nuevo campo que fuese «tiempo de entrega» ya que algunos productos los deben de fabricar y otros los tienen en stock. Me dijeron, «mira a ver si hay algún plugin para hacer eso» y yo pensé, pero si es algo muy sencillo de hacer, para que vamos a instalar un plugin si con unas pocas líneas de código lo tenemos.

Custom Fields en WooCommerce

Es muy fácil añadir campos personalizados a nuestros productos de WooCommerce, en mi caso añadí el campo personalizado en la pestaña de inventario (Para añadirlo a la par que añaden el stock del producto), podemos añadirlo en el functions.php del tema hijo o crearnos nuestro propio plugin de personalizaciones.

// Mostramos el campo personalizado en el backends
add_action( 'woocommerce_product_options_stock_fields', 'my_entrega_personalizada_function' );
function my_entrega_personalizada_function() {
	global $woocommerce, $post;
	woocommerce_wp_textarea_input(
		array(
			'id'          => 'entrega_personalizada',
			'placeholder' => 'Tiempo entrega personalizado',
			'label'       => 'Tiempo de entrega personalizado',
			'description' => 'Añade el tiempo de entrega personalizado',
			'desc_tip'    => 'true',
		)
	);
}

// Guardamos el personalizado
add_action( 'woocommerce_process_product_meta', 'guardar_entrega_personalizada' );
function guardar_entrega_personalizada( $post_id ) {
	if ( 'no' === get_option( 'woocommerce_manage_stock' ) ) {
		return;
	}

	$entrega_personalizada = $_POST['entrega_personalizada'];
	if ( ! empty( $entrega_personalizada ) ) {
		update_post_meta( $post_id, 'entrega_personalizada', esc_html( $entrega_personalizada ) );
	}
}

Con esto, ya tenemos nuestro campo personalizado creado y guardado en el backend. Ahora falta la segunda parte, mostrarlo en el frontend.

Imagen WooCommerce creación de un custom field
El campo personalizado aparece en la edición del producto

Lo voy a mostrar en dos sitios, en el loop de la tienda y dentro del detalle de cada producto, creando una condición de solo mostrar el campo únicamente si lo hemos rellenado. Lo he añadido dentro de un div con una clase y un icono para que quede más bonito 🙂

//Lo mostramos en el loop de la tienda, justo debajo del título del producto
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_field_display_below_title', 2 );
function custom_field_display_below_title(){
    global $product;

    // Get the custom field value
    $custom_field = get_post_meta( $product->get_id(), 'entrega_personalizada', true );

    // Display
    if( ! empty($custom_field) ){
        echo '<div class="info-envio"><p class="recuadro"><i class="qode_icon_font_awesome fa fa-clock-o qode_icon_element" style="color: #000000;"></i>' . esc_html( $custom_field ) . '</p></div>';

    }
}

//Lo mostramos justo debajo del precio del producto

add_action( 'woocommerce_single_product_summary', function() {
global $product;
	$notice = get_post_meta( $product->get_ID(), 'entrega_personalizada', true );

if (!empty($notice)){

	echo '<div class="info-envio"><p class="recuadro">ENTREGA <i class="qode_icon_font_awesome fa fa-clock-o qode_icon_element" style="color: #000000;"></i>' . esc_html( $notice ) . '</p></div>';

}}, 10);
Tienda de WooCommerce con campo personalizado
Así es cómo se ve en la tienda
Producto de WooCommerce con campo personalizado
Así en cómo se ve en la ficha del producto

Pues así de fácil tenemos nuestro propio campo personalizado, imaginaros la de cosas que podéis hacer para tunear vuestras tiendas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información sobre protección de datos

  • Responsable: Laura Díaz
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Contacto: laura.bobysuh@gmail.com.
  • Información adicional: Más información en nuestra política de privacidad.