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.
