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

Tutoriales relaccionados

Ir arriba
LOGIN
REGISTRO