4

Quiero añadir una frase o un icono debajo del titulo de alguno de los productos de WooCommerce, en la ficha que se muestra en el catalogo donde estan todos los productos

Me gustaría hacerlo mediante código y evitar la utilización de plugins.

Hay algo que es parecido y es el tema de las Marcas, pero como digo, no quiero utilizar Plugin. He leido alguna documentación de WooCommerce pero no encuentro la manera de hacerlo. Quizá no estoy buscando lo que necesito por los términos correctos, y por eso no lo encuentre.

En la imagen muestro donde necesito añadir los nuevos elementos.

EDITO LA PREGUNTA Quiero poder añadir el texto o un logo individualmente a cada producto desde la edición del producto. Algo similar a los plugin que añaden marcas, pero sin utilizar un plugin.

Poder añadir atributos a los productos individualmente y se muestre en el frontal de cada producto que lo tenga añadido, en la pagina de tienda.

He leido algo sobre los Ganchos (Hook ) de WooCommerce, pero no se si podria utilizar esto para crear una nueva sección o un nuevo título para los productos

¿ hay alguna forma de crear atributos y añadirlo mediante los ganchos de WooCoommerce ?

¿ Como puedo conseguir esto sin utilizar ningún plugin ?

introducir la descripción de la imagen aquí

3 respuestas 3

4
+150

Existen diferentes formas de hacer esto, tanto simples como complejas, yo lo haria mas o menos asi.

Primero crearía un metabox en la página de producto:

// Registramos el Metabox
function custom_product_metabox(){

    // Memberships Metabox
    add_meta_box( 
        'product-custom-settings', 
        __( 'Producto', 'textdomain' ), 
        'custom_product_callback', 
        'product' 
    );

}
add_action( 'add_meta_boxes', 'custom_product_metabox' );

Esto registraría el metabox en la página de administración del producto, luego crearía los campos para el metabox:

// Agregamos los campos
function custom_product_callback(){
    
    $screen = get_current_screen();
    if ( $screen->action !== 'add' ) :

        global $post;
        $post_id = $post->ID;

        $logo = get_post_meta( $post_id, 'ct_product_logo', true );
        $texto = get_post_meta( $post_id, 'ct_product_title', true );

    else :

        $logo = '';
        $texto =  '';

    endif;

    // Logo
    echo '<div class="trn-form-control">';
    echo '<div class="trn-row">';
    echo '<div class="trn-col-2"><label>Logo</label></div>';
    echo '<div class="trn-col-10">';
    echo '<input type="text" id="custom-product-logo" name="custom-product-logo" value="' . $logo . '">';
    echo '</div>';
    echo '</div>';
    echo '</div>';

    // Titulo
    echo '<div class="trn-form-control">';
    echo '<div class="trn-row">';
    echo '<div class="trn-col-2"><label>Titulo</label></div>';
    echo '<div class="trn-col-10">';
    echo '<input type="text" id="custom-product-title" name="custom-product-title" value="' . $texto . '">';
    echo '</div>';
    echo '</div>';
    echo '</div>';

}

Esto agrega dos campos de texto, uno para el título y otro para la url de la imagen, tambien podrias agregar un campo file, pero eso es más complejo, por ahora lo dejaré simple.

Una vez tenga mis campos creados agrego lo siguiente para guardar esos datos.

// Guardamos los datos
function product_save_custom( $post_id ) {
 
    $post_type = get_post_type( $post_id );
    if ( $post_type == 'product' ) :

        $logo   = sanitize_text_field( $_POST['custom-product-logo'] );
        $titulo     = sanitize_text_field( $_POST['custom-product-title'] );

        update_post_meta( $post_id, 'ct_product_logo', $logo );
        update_post_meta( $post_id, 'ct_product_title', $titulo );

    endif;

}
add_action( 'save_post', 'product_save_custom');

Esto lo que hace es escuchar cuando se guarda un post, si el post es de tipo producto entonces actualiza los campos.

Por ultimó procedo a mostrar en el fronted los campos que he guardado usando el hook woocommerce_after_shop_loop_item_title.

// Mostramos los datos
function show_custom_product_data(){

    global $product;
    $post_id = $product->get_id();

    $logo = get_post_meta( $post_id, 'ct_product_logo', true );
    $texto = get_post_meta( $post_id, 'ct_product_title', true );

    if ( $logo ) :
        echo '<img class="your-class" src="' . $logo . '">';
    endif;

    if ( $texto ) :
        echo '<p class="your-p-class">' . $texto . '<p>';
    endif;

}
add_action( 'woocommerce_after_shop_loop_item_title', 'show_custom_product_data' );

Esto no lo he probado pero deberia de funcionar, si no déjelo en los comentarios, también recomiendo leer esta "Guia Visual" de hook que puede usar.

https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

Tambien podria intentar verificar si el plugin Advanced Custom Fields le funciona, sirve para crear campos personalizados sin mucho esfuerzo, es una buena alternativa para usuarios con pocos conocimientos.

Nota: Si el metabox no aparece desde el principio intente verificar las opciones de pantalla "Screen Options" para verificar que este marcado.

5
  • Muy bien detallado @JefferzonBol. Tiene dos errores: Undefined variable $screen in en esta linea: if ( $screen->action !== 'add' ) . Y muestra otro error en la misma linea : Attempt to read property "action" on null in - He repasado el código, pero no tengo capacidad suficiente para deducir el porque. ¿ Tu sabes a que se debe esto ? 2 - Y ¿donde debo añadir una clase para luego dar estilos al texto y a la imagen para acondicionarlo segun el interes ? Por ejemplo para asignar el tamaño del texto o el ancho y altura de la imagen
    – gemita
    el 4 ene. a las 21:57
  • 1
    Hola, hice las ediciones, puedes volver a checkear la respuesta. el 4 ene. a las 23:50
  • 1
    El error se debia a que olvide poder la get_current_screen() función, que permite obtener información de la pantalla actual, conforme a poner clases, al momento de hacer echo del texto y el logo simplemente agrega tu etiqueta y clases segun necesites, eso ya queda a su discreción, por ahora le puse a la etiqueta img la clase your-class y al texto una etiqueta p con la clase your-p-class a modo de ejemplo. el 4 ene. a las 23:54
  • 1
    Perfecto @JefferzonBol. Tu ejemplo es funcional. Y gracias a el enlace que das, he comenzado a entender el tema de los hooks y puedo poner el texto o la imagen en el lugar que desee. Unicamente es algo dificil eliminar el espacio que se crea por ejemplo cuando ponemos el logo debajo del titulo.(woocommerce_shop_loop_item_title) ¿ Por que es tan dificil eliminar los espacios dentro de los productos? Ahora con este pequeño programa que has creado, podre hacer pruebas añadiendo 2 textos o dos imagenes, etc. Gracias por el tiempo que has dedicado a esto, estoy muy agradecida
    – gemita
    el 5 ene. a las 8:09
  • Hola @JefferzonBol, lamento molestarte. Llevo dias buscando una solución y finalmente vine aqui en busca de ideas, y quiza tu tengas alguna solución para esta pregunta. y puedas darme alguna idea. Gracias
    – gemita
    el 10 mar. a las 15:28
0

En su momento yo usé el siguiente Snippet

add_action( 'woocommerce_after_shop_loop_item', 'addNewText', 5 );
 
function addNewText() {
   echo '<p class="shop-badge">Pon tu texto acá</p>';
}

Esto te agrega texto a todos los productos. Espero te sirva

1
  • Gracias @OCHOA. Tu idea es buena, y de echo lo utilizare para añadir un marca que llevan todos los productos. Pero para el caso, no me sirve, ya que la idea es añadirlo unicamente a alguno de los productos, no todos los productos deben llevar las indicaciones que deseo poner. Si te fijas, lo dice la pregunta. De echo la editare para dejarlo claro por si puede ayudarme alguien
    – gemita
    el 30 dic. 2022 a las 20:23
0

¿Ya probaste el hook woocommerce_product_meta_start?

function custom_woocommerce_product_meta_start() {
   global $product;
   $custom_attribute = $product->get_attribute( 'nombre_atributo_personalizado' );
   if ( $custom_attribute ) {
      echo '<div class="custom-attribute">' . $custom_attribute . '</div>';
   }
}
add_action( 'woocommerce_product_meta_start', 'custom_woocommerce_product_meta_start' );
1
  • Gracias amigo @EdwardRomero, no recibo ningún cambio cuando añado tu función
    – gemita
    el 4 ene. a las 21:58

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.