Soporte » Guías – Resolución de problemas » Modificar HTML de miniaturas de Woocommerce para añadir Carrusel

  • Jordi

    (@kukat)


    Buenos días!

    Después de indagar buscando algún plugin que crease automáticamente un carrusel en las miniaturas de producto de Woocoomerce (no me funciona ninguno…) he decidido incluirlo «a la antigua». He visto este (https://splidejs.com/getting-started/)

    Necesito modificar ligeramente el HTML de las miniaturas (he visto que se crean con woocommerce_single_product_image_thumbnail_html). Pero la verdad que no se donde modificar el html! No encuentro ni se como poder hacerlo!

    Sería para añadir los pasos para hacer funcionar este carrusel/slider.

    ¡Muchas gracias!

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • kallookoo

    (@kallookoo)

    Hola @kukat

    Ese filtro es para modificar el html pero te seria mas facil crear una plantilla de single-product/product-image.php en tu child theme y modificar el html.

    Aqui tienes algo de informacion; https://docs.woocommerce.com/document/template-structure/

    Iniciador del debate Jordi

    (@kukat)

    Nada! No hay forma… He modificado este archivo, he probado con varios sliders… pero veo que es una tarea bastante complicada. El Woocoomerce añade sus propios codigos y creo que interfieren con el desarrollo del Slider-Carrusel…

    He probado con Super Simple Slider, que únicamente tienes que añadir una class=»slider», pero nada…

    https://supersimpleslider.com/

    He añadido el CSS y JS en el <head>:

    <script src="https://tiendalokura.com/wp-content/themes/hello-theme-child/sss/sss.min.js"></script>
    <link rel="stylesheet" href="https://tiendalokura.com/wp-content/themes/hello-theme-child/sss/sss.css" type="text/css" media="all">
    
    <script>jQuery(function($) {$('.slider').sss();});</script>

    Y he modificado el codigo tal que así (incluso quitando classes de woocommerce):

    
    <figure>
    		<?php
    		if ( $product->get_image_id() ) {
    			$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
    		} else {
    			$html  = '<div class="slider">';
    			$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
    			$html .= '</div>';
    		}
    
    		echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
    
    		do_action( 'woocommerce_product_thumbnails' );
    		?>
    	</figure>
    
    
    kallookoo

    (@kallookoo)

    Hola @kukat

    Como veo que tienes problemas te aconsejo que pruebes algun plugin o mires su codigo para ver como lo implementan.

    https://wordpress.org/plugins/tags/product-gallery-slider/

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • El debate ‘Modificar HTML de miniaturas de Woocommerce para añadir Carrusel’ está cerrado a nuevas respuestas.