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.
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.