fbpx

Añade etiquetas personalizadas a productos WooCommerce

Gracias a este código para WooCommerce podrás poner etiquetas personalizadas a productos WooCommerce. Funcionan de manera similiar a las etiquetas de “Oferta” de WooCommerce pero se pueden personalizar en texto y color de fondo. Además podremos introducirles una clase para poder personalizarlas a nuestro antojo. Una vez el snippet este activo podrás realizar la creación y personalización de las etiquetas editando cualquiera de tus productos > Datos del producto > Pestaña general > Texto de la etiqueta. Si quieres personalizarlas tan sólo debes introducirles un nombre de clase y darle estilo con CSS, de lo contrario adoptarán los estilos de etiqueta de tu theme.

 

etiquetas-personalizadas-productos-WooCommerce

Cómo añadir etiquetas personalizadas a productos WooCommerce

Para crear esta nueva opción en WooCommerce utilizaremos este snippet:

// Añadir etiqueta personalizada producto
if ( in_array( 'woocommerce/woocommerce.php', get_option( 'active_plugins' ) ) ){

	add_action( 'woocommerce_before_single_product_summary', 'display_my_custom_label' );
	add_action( 'woocommerce_before_shop_loop_item_title', 'display_my_custom_label' );
	function display_my_custom_label(){
		global $post;
	
		$custom_label = null !== get_post_meta( $post->ID, '_custom_label', true )? get_post_meta( $post->ID, '_custom_label', true ) : '';
		$custom_label_color = !empty( get_post_meta( $post->ID, '_custom_label_color', true ) )? sanitize_hex_color( get_post_meta( $post->ID, '_custom_label_color', true ) ) : '';
		$label_class = get_post_meta( $post->ID, '_custom_label_class', true );
	
		if ( !empty( $custom_label ) ) {
			
			if ( !empty( $custom_label_color ) ) {
				
				echo '<span class="'. $label_class .'" style="background-color: '. $custom_label_color .' !important;">' . $custom_label . '</span>';
			}else{

				echo '<span class="'. $label_class .'">' . $custom_label . '</span>';
			}
		}
	}
	
	// Añade un nuevo campo para el texto de la etiqueta en la ficha de producto
	add_action( 'woocommerce_product_options_general_product_data', 'add_custom_label_settings_field' );
	function add_custom_label_settings_field( ){
		global $post;
	
		wp_nonce_field( plugin_basename(__FILE__), 'woocommerce_custom_label_nonce' );
		echo '<div class="options_group show_if_simple show_if_variable">';
		woocommerce_wp_text_input( 
			array( 
				'id'            => '_custom_label', 
				'label'         => __( 'Texto de la etiqueta', 'woocommerce' ), 
				'description'	=> __( 'Muestra una etiqueta en la foto principal de producto con el texto que desees.', 'woocommerce' ),
				'value'         => get_post_meta( $post->ID, '_custom_label', true )? get_post_meta( $post->ID, '_custom_label', true ) : '',
				'placeholder'	=> 'Ej: ¡Oferta 2x1!',
				)
		);

		woocommerce_wp_text_input( 
			array( 
				'id'            => '_custom_label_color', 
				'label'         => __( 'Color de fondo', 'woocommerce' ), 
				'description'	=> __( 'Este será el color de fondo de la etiqueta.', 'woocommerce' ),
				'value'         => !empty( get_post_meta( $post->ID, '_custom_label_color', true ) )? get_post_meta( $post->ID, '_custom_label_color', true ) : '',
				)
		);
	
		woocommerce_wp_text_input( 
			array( 
				'id'            => '_custom_label_class', 
				'label'         => __( 'Clase de la etiqueta', 'woocommerce' ), 
				'description'	=> __( 'Aplica una clase de estilo personalizada para el diseño de la etiqueta.', 'woocommerce' ),
				'value'         => 'onsale' !== get_post_meta( $post->ID, '_custom_label_class', true )? get_post_meta( $post->ID, '_custom_label_class', true ) : '',
				)
		);
	
		echo '</div>';
	}
	
	// Guarda el valor del nuevo campo
	add_action( 'save_post', 'save_custom_label_settings_field', 99, 2 );
	function save_custom_label_settings_field( $post_id, $post ){
	
		/* --- security verification --- */
		if ( 'product' !== $post->post_type ) {
		    		
		    	return $post_id;
		}
		
		if( !wp_verify_nonce( $_POST['woocommerce_custom_label_nonce'], plugin_basename(__FILE__) ) ) {
			return $post_id;
	    	}
	
	    	if( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
	    		return $post_id;
	    	}
	
	    	if( 'product' == $_POST['post_type'] ) {
	    		
	    		if( !current_user_can('edit_page', $post_id) ) {
	    			return $post_id;
	      		}
		} else {
		
			if( !current_user_can( 'edit_page', $post_id ) ) {
				return $post_id;
	        	}
	    	}
	    	/* - end security verification - */
		
		if ( isset( $_POST[ '_custom_label' ] ) ) {
			
			$custom_label = !empty( $_POST[ '_custom_label' ] ) ? $_POST[ '_custom_label' ] : '';
			update_post_meta( $post_id, '_custom_label', $custom_label );
		}

		if ( isset( $_POST[ '_custom_label_color' ] ) ) {
			
			$custom_label_color = !empty( $_POST[ '_custom_label_color' ] ) ? $_POST[ '_custom_label_color' ] : '';
			update_post_meta( $post_id, '_custom_label_color', $custom_label_color );
		}
	
		if ( isset( $_POST[ '_custom_label_class' ] ) ) {
			
			$custom_label_class = !empty( $_POST[ '_custom_label_class' ] ) ? $_POST[ '_custom_label_class' ] : 'onsale';
			update_post_meta( $post_id, '_custom_label_class', $custom_label_class );
		}
	}

	add_action( 'admin_footer', 'color_field_js' );
	function color_field_js(){
		global $post;

		if ( 'product' !== $post->post_type ) {
			return;
		}

		?>
		<script type="text/javascript">
			jQuery(document).ready(function($){

				$( '#_custom_label_color' ).wpColorPicker();
			});
		</script>
		<?php
	}
}

Gracias a esta nueva opción podrás personalizar tu tienda más aún y atraer al cliente avisándolo de una oferta especial en ese producto en concreto.

 

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Ver más tutoriales de: WooCommerce

Tutoriales relaccionados

¿Necesitas un desarrollo a medida?

Ir arriba

Login para aceder

LOGIN
REGISTRO