WooCommerce: mostrar insignia de producto personalizada (condicionalmente)

Hay muchos complementos para mostrar insignias personalizadas, avisos, mensajes… pero, como de costumbre, ¡unas pocas líneas de PHP pueden ayudarlo a lograr el mismo resultado!

Hoy echamos un vistazo a cómo agregar una casilla de verificación a la página de edición del producto, para que pueda mostrar una insignia condicional en función de si la casilla de verificación está marcada o no.

Divertirse

Muestre una insignia de producto personalizada en la página de producto único de WooCommerce

Parte 1 – Fragmento de PHP: Mostrar casilla de verificación @ Página de edición del producto

Primero, debemos crear una nueva casilla de verificación que nos dará control sobre mostrar o no la insignia. Esto es bastante simple de hacer. Lo único difícil es asegurarnos de «guardar» el valor de la casilla de verificación en el meta de la publicación, de modo que en la Parte 2 podamos verificar si la casilla de verificación está marcada o no.

/**
 * @snippet       Checkbox to display Custom Product Badge Part 1 - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @testedwith    Woo 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
// -----------------------------------------
// 1. Add new checkbox to product edit page (General tab)
  
add_action( 'woocommerce_product_options_general_product_data', 'bbloomer_add_badge_checkbox_to_products' );       
  
function bbloomer_add_badge_checkbox_to_products() {          
woocommerce_wp_checkbox( array(
'id' => 'custom_badge',
'class' => '',
'label' => 'Show Custom Badge'
)
);     
}
  
// -----------------------------------------
// 2. Save checkbox via custom field
  
add_action( 'save_post', 'bbloomer_save_badge_checkbox_to_post_meta' );
  
function bbloomer_save_badge_checkbox_to_post_meta( $product_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;
    if ( isset( $_POST['custom_badge'] ) ) {
            update_post_meta( $product_id, 'custom_badge', $_POST['custom_badge'] );
    } else delete_post_meta( $product_id, 'custom_badge' );
}

Resultado final:

Muestre una casilla de verificación para habilitar/deshabilitar la insignia del producto WooCommerce

Parte 2: Fragmento de código de PHP: Muestra la insignia en la página de un solo producto

/**
 * @snippet       Checkbox to display Custom Product Badge Part 2 - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @compatible    Woo 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
// -----------------------------------------
// 3. Display badge @ single product page if checkbox checked
  
add_action( 'woocommerce_single_product_summary', 'bbloomer_display_badge_if_checkbox', 6 );
  
function bbloomer_display_badge_if_checkbox() {
    global $product;    
    if ( get_post_meta( $product->get_id(), 'custom_badge', true ) ) {
        echo '
<div class="woocommerce-message">CUSTOM BADGE!</div>
 
';
    }
}

Resultado final:

Muestre una insignia de producto personalizada en la página de producto único de WooCommerce

«No codifico, ¿hay un complemento confiable para eso?»

Como a muchos lectores les encantaría codificar pero no se sienten 100% seguros con él, decidí buscar un complemento confiable que logre el mismo (o incluso mejor) resultado.

En este caso, recomiendo el complemento YITH WooCommerce Badge Management . Además de mostrar insignias de texto personalizadas (versión gratuita), también puede crear CSS, imágenes e insignias avanzadas, asignar insignias de productos a productos y/o categorías específicos, elegir la posición de la insignia y mucho más.

Pero en caso de que desee codificar, siga leyendo

Deja un comentario