Carosello di prodotti WooCommerce con Owl Carousel

Argomenti: E-commerce, Web Design, WooCommerce

Carosello di prodotti WooCommerce con Owl Carousel

In questo articolo ti spiego come creare un carosello di prodotti WooCommerce con Owl Carousel.

Ovviamente senza utilizzare alcun Pulgin.

Probabilmente sei qui perché sulla homepage del tuo e-commerce vorresti che tutto fosse più compatto e che gli utenti riuscissero a visualizzare il maggior numero di informazioni senza dover farsi venire la tendinite al pollice a furia di scrollare.

Visto che l’usability di WooCommerce fa schifo e che le uniche soluzioni attualmente in circolazione sono dei plugin che nel 99% dei casi affosseranno i tempi di caricamento del sito, ho deciso di integrare Owl Carousel (uno slider jQuery molto affidabile) direttamente all’interno del loop di prodotti WooCommerce.

Per fare questo avremo bisogno di:

Integrare Owl Carousel all’interno del template

Il primo passo è l’integrazione di Owl Carousel all’interno del tuo template. Nello zip di Owl Carousel i file che ci interessano sono 3:

  • owl.carousel.min.css
  • owl.theme.default.min.css

I primi due potete trovarli al percorso OwlCarousel(numero della versione) > dist > assets, mentre il terzo in OwlCarousel(numero della versione) > src > js.

Creiamo dunque due cartelle all’interno del nostro template child (o di quello custom): una css, l’altra js. Lì andremo ad inserire i nostri tre file.

Il passaggio seguente è “informare” wordpress dei nuovi file, e permettergli dunque di caricarli nel frontend del nostro sito.

Aggiungiamo dunque infondo al file function.php le seguenti linee di codice:

function nome_template_child_enqueue_scripts() {
    wp_enqueue_style( 'owl-css', get_stylesheet_directory_uri() . '/css/owl.carousel.min.css', array( $parent_style ), wp_get_theme()->get('Version') );
    wp_enqueue_style( 'owl-default-css', get_stylesheet_directory_uri() . '/css/owl.theme.default.min.css', array( $parent_style ), wp_get_theme()->get('Version') );
    wp_enqueue_script('owl-js', get_stylesheet_directory_uri() . '/js/owl.carousel.min.js', array('jquery'), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'nome_template_child_enqueue_scripts' );

E questo termina la fase di preparazione. Passiamo all’implementazione del carosello.

Implementazione del Carosello di prodotti WooCommerce con Owl Carousel

Anche se in genere preferisco implementare il codice direttamente all’interno dei file del template, in questo tutorial spiegherò come creare uno shortcode contenente il nostro carosello di prodotti, poiché la maggior parte degli utenti WordPress utilizza plugin di editing visuale.

Inoltre un utente che ha sviluppato un template custom di sicuro sarà abbastanza esperto per modificare il codice qui presente a suo piacimento.

Ecco il codice completo da inserire nel nostro file function.php:

/*-----------------------------------------------------------------------------------*/
/*  WooCommerce Loop + Owl Carousel by Lorenzo Moio
/*-----------------------------------------------------------------------------------*/

  function carosello_prodotti() { ?>

<div class="owl-carousel prodotti">
    <?php
        $args = array( 'post_type' => 'product', 'posts_per_page' => 12, 'product_cat' => 'offerte', 'orderby' => 'rand' );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                <div class="product">    

                    <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">

                        <?php woocommerce_show_product_sale_flash( $post, $product ); ?>

                        <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img data-src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?>

                        <h3><?php the_title(); ?></h3>

                        <span class="price"><?php echo $product->get_price_html(); ?></span>                    

                    </a>

                    <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>

                </div>

    <?php endwhile; ?>
    <?php wp_reset_query(); ?>
</div>
<script>
jQuery(document).ready(function(){
  jQuery(".owl-carousel").owlCarousel({
      loop:true,
      nav:true,
      lazyLoad: true,
      responsive:{
      0:{
      items:2
      },
      600:{
          items:3
      },
      1000:{
          items:4
      }
    }
  });
});
</script>
    <?php }
add_shortcode('owl-products', 'carosello_prodotti');

La struttura è questa:

Abbiamo una funzione php (nel mio caso “carosello-prodotti”), con al suo interno un div, un ul o un qualsiasi elemento che possa contenere il loop dei prodotti Woocommerce, che ha come classe owl-carousel.

Ciò non farà altro che disporre nel nostro carosello tutto ciò che al suo interno. Nel nostro caso la query di prodotti WooCommerce.

Nel mio esempio la query non fa altro che mostrare 12 prodotti della categoria “offerte”:

$args = array( 'post_type' => 'product', 'posts_per_page' => 12, 'product_cat' => 'offerte', 'orderby' => 'rand' ); 
$loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); global $product;

Ovviamente puoi modificarla a tuo piacimento.

Se puoi utilizza un loop che riprenda la stessa struttura di quello del tuo template, così potrai tranquillamente fare a meno di aggiungere altro css inutile.

Subito dopo la chiusura dell’elemento con classe owl-carousel ho inserito lo script che permette l’inizializzazione del carosello. Per tutte le opzioni disponibili rimando alla documentazione del carosello.

Infine, dopo la chiusura della nostra funzione, ho creato lo shortcode [owl-products], nella riga add_shortcode(‘owl-products’, ‘carosello_prodotti’);

Ora puoi inserire il tuo carosello di prodotti all’interno di qualsiasi editor testuale.

Spero che questa guida ti sia stata d’aiuto. Per qualsiasi info scrivimi pure qui nei commenti. Per altri articoli come questo visita pure la sezione relativa a WooCommerce del mio blog.

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Articoli correlati

Mostrare o nascondere metodi di spedizione WooCommerce in base al totale del carrello
5 Dicembre 2019
Mostrare o nascondere metodi di spedizione WooCommerce in base al totale del carrello
In quest'articolo voglio spiegarti come mostrare o nascondere i metodi di spedizione WooCommerce in base al totale del…
Leggi
Implementare Google Customer Reviews in WooCommerce senza plugin
26 Novembre 2019
Implementare Google Customer Reviews in WooCommerce senza plugin
In questo breve articolo scoprirai come implementare Google Customer Reviews in WooCommerce senza l'utilizzo di plugin. Cerca, per…
Leggi
Guida a Pixel Your Site Pro: tracciamento professionale per WooCommerce
11 Novembre 2019
Guida a Pixel Your Site Pro: tracciamento professionale per WooCommerce
Se hai letto il mio articolo precedente probabilmente avrai scelto di affidare a PixelYourSite il tracciamento del tuo e-commerce. Come…
Leggi
Tracciamento WooCommerce: Pixel Facebook, Google Analytics e Google Ads con un unico plugin
8 Novembre 2019
Tracciamento WooCommerce: Pixel Facebook, Google Analytics e Google Ads con un unico plugin
Se vuoi entrare subito nel vivo del mio articolo e capire quali siano le migliori alternative per impostare…
Leggi