HomeBlogWordpress e woocommerceCome creare un custom widget per Woocommerce

Come creare un custom widget per Woocommerce

Per Wordpress, e il suo componente più utilizzato per la realizzazione di un e-commerce Woocommerce, troviamo in rete moltissimi Widgets sia a pagamento che gratuiti.

I widgets di wordpress sono usati normalmente per la visualizzazione di "blocchi" nel front-end. Per chi conosce Joomla, i widgets sono gli omologhi dei moduli. In Drupal, invece sono conosciuti come Blocchi.

Al di la della tecnologia scelta per la realizzazione del sito web, è sicuramente consigliabile poter intervenire con estrema flessibilità su questi elementi.

In questo primo articolo vediamo come realizzare un semplice widgets per visualizzare i prodotti in evidenza.

 

Creare un widget per woocommerce per visualizzare i prodotti in evidenza

Un classico widget utilizzato in molti siti di e-commerce, è il classico modulo dei prodotti in evidenza.

Come possiamo vedere, nell'immagine sotto, nel frontend abbiamo:

1) un testo introduttivo che viene scritto per due motivi:  un aspetto comunicativo e uno in ottica SEO per il posizionamento

2) lista dei prodotti

Per ogni prodotto vengono visualizzate:

  • l'immagine
  • il nome del prodotto
  • il prezzo
  • il prezzo scontato nel caso sia stato valorizzato

custom widget per woocomerce prodotti in evidenza

 

Lato backend, il widget si consente di impostare i seguenti parametri.

1) Titolo del modulo

2) Testo introduttivo

3) Numero di prodotti visualizzati per riga

4) In base al tipo di opzione: per lista o per categoria verranno estratti i prodotti o dalla lista degli id del campo specifico o dalla categoria specificata.

5) Campo della categoria e numero di prodotti totali da visualizzare per la categoria specificata

custom widget per woocomerce admin

 

Struttura e codice del Widget di esempio

La struttura di un widget si base sui seguenti metodi:

1) funzione di registrazione del widget

2) costruttore

3) funzione di rendreing del frontend

4) funzione di rendering lato backend

5) funzione di update dei parametri invocata da backend quando salviamo i valori del widget

 

codice custom 

 

Infine, riportiamo il codice base per la realizzazione del widget di esempio.

 

<?php
/*
  Plugin Name: Web2e - Show products by Category Evidenza
  Description: Show products by category evidenza
  Author: Web2e
  Version: 1.0
  Author URI: https://www.web2e.it
 */

// Register and load the widget
function web2e_load_show_product_evidenza_widget() {
    register_widget('web2e_show_product_evidenza_widget');
}

add_action('widgets_init', 'web2e_load_show_product_evidenza_widget');

// Creating the widget 
class web2e_show_product_evidenza_widget extends WP_Widget {

    function __construct() {
        parent::__construct(
                // Base ID of your widget
                'web2e_show_product_evidenza_widget',
                // Widget name will appear in UI
                __('Web2e Show products by category evidenza', 'web2e_widget_domain'),
                // Widget description
                array('description' => __('Web2e - Show products by category evidenza', 'web2e_widget_domain'),)
        );
    }

// Creating widget front-end

    public function widget($args, $instance) {
       
        $title = apply_filters('widget_title', $instance['title']);
        $testointro = empty($instance['testointro']) ? '' : $instance['testointro'];  
        
        // tipo di visuliazzazione: byCat o byList
        $typeshow = empty($instance['typeshow']) ? '' : $instance['typeshow'];  

        // prodotti da visualizzare per riga - parametro valido per entrambe le viste
        $numprodrow = empty($instance['numprodrow']) ? '' : $instance['numprodrow'];  
        
        // byList: lista prodotti da visualzizare
        $ids = empty($instance['ids']) ? '' : $instance['ids'];

        // byCat: se valorizziamo la categoria
        $catid = empty($instance['catid']) ? '' : $instance['catid'];
        $numproductcat = empty($instance['numproductcat']) ? '' : $instance['numproductcat'];  
       
        if($typeshow == "byCat"){
            if($catid > 0){ // Show products by category
                    echo "<div>";
                    $this->show_products_by_category($catid, $numproductcat, $testointro);  
                    echo "</div>";                
            }        
        }else if($typeshow == "byList"){ // Show products by ids
            echo "<div>";
            $this->show_products_by_ids($ids,$testointro);  
            echo "</div>";            
        }    

    }

// Widget Backend 
    public function form($instance) {
        if (isset($instance['title'])) {
            $title = $instance['title'];
        } else {
            $title = __('New title', 'web2e_widget_domain');
        }

        if (isset($instance['testointro'])) {
            $testointro = $instance['testointro'];
        } else {
            $testointro = __('', 'web2e_widget_domain');
        }

        if (isset($instance['typeshow'])) {
            $typeshow = $instance['typeshow'];
        } else {
            $typeshow = __('', 'web2e_widget_domain');
        }        
        
        if (isset($instance['numprodrow'])) {
            $numprodrow = $instance['numprodrow'];
        } else {
            $numprodrow = __('', 'web2e_widget_domain');
        }

        if (isset($instance['ids'])) {
            $ids = $instance['ids'];
        } else {
            $ids = __('', 'web2e_widget_domain');
        }

        if (isset($instance['catid'])) {
            $catid = $instance['catid'];
        } else {
            $catid = __('', 'web2e_widget_domain');
        }

        if (isset($instance['numproductcat'])) {
            $numproductcat = $instance['numproductcat'];
        } else {
            $numproductcat = __('', 'web2e_widget_domain');
        }
        // Widget admin form
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('testointro'); ?>"><?php _e('Testo intro:'); ?></label> 
            <textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('testointro') ?>" name="<?php echo $this->get_field_name('testointro') ?>"><?php echo esc_attr($testointro); ?></textarea>
        </p>          
        
        <p>
            <label for="<?php echo $this->get_field_id('numprodrow'); ?>"><?php _e('Prodotti per riga:'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id('numprodrow'); ?>" name="<?php echo $this->get_field_name('numprodrow'); ?>" type="text" value="<?php echo esc_attr($numprodrow); ?>" />            
        </p>            
        
        <hr>
        <p>
            <label>
                <input type="radio" value="byList" name="<?php echo $this->get_field_name( 'typeshow' ); ?>" <?php checked( $typeshow, 'byList' ); ?> id="<?php echo $this->get_field_id( 'typeshow' ); ?>" />
                <?php esc_attr_e( 'Visualizzazione lista prodotti', 'text_domain' ); ?>
            </label>
        </p>     
        
        <p>
            <label for="<?php echo $this->get_field_id('ids'); ?>"><?php _e('ids:'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id('ids'); ?>" name="<?php echo $this->get_field_name('ids'); ?>" type="text" value="<?php echo esc_attr($ids); ?>" />
        </p>

        <hr>
        
        <p>
            <label>
                <input type="radio" value="byCat" name="<?php echo $this->get_field_name( 'typeshow' ); ?>" <?php checked( $typeshow, 'byCat' ); ?> id="<?php echo $this->get_field_id( 'typeshow' ); ?>" />
                <?php esc_attr_e( 'Visualizzazione per categoria', 'text_domain' ); ?>
            </label>
        </p>             
        <p>
            <label for="<?php echo $this->get_field_id('catid'); ?>"><?php _e('catid:'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id('catid'); ?>" name="<?php echo $this->get_field_name('catid'); ?>" type="text" value="<?php echo esc_attr($catid); ?>" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('numproductcat'); ?>"><?php _e('Numero prodotti totali da visalizzare:'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id('numproductcat'); ?>" name="<?php echo $this->get_field_name('numproductcat'); ?>" type="text" value="<?php echo esc_attr($numproductcat); ?>" />
        </p>        
        

        
       
        
        <?php
    }

// Updating widget replacing old instances with new
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';
        $instance['testointro'] = (!empty($new_instance['testointro']) ) ? strip_tags($new_instance['testointro']) : '';

        // tipo di visualizzazione - Lista prodotti, Prodotti in categoria
        $instance['typeshow'] = ( !empty( $new_instance['typeshow'] ) ) ? sanitize_text_field( $new_instance['typeshow'] ) : null;

        // prodotti per riga
        $instance['numprodrow'] = (!empty($new_instance['numprodrow']) ) ? strip_tags($new_instance['numprodrow']) : '0';  
        
        // lista ids prodotti
        $instance['ids'] = (!empty($new_instance['ids']) ) ? strip_tags($new_instance['ids']) : '';
        
        // lista prodotti in categoria
        $instance['catid'] = (!empty($new_instance['catid']) ) ? strip_tags($new_instance['catid']) : '';
        $instance['numproductcat'] = (!empty($new_instance['numproductcat']) ) ? strip_tags($new_instance['numproductcat']) : '0';  
        
        return $instance;
    }
    
    public function show_products_by_category($catid, $numproduct) {

       /* TODO */

    }    
    
    
    public function show_products_by_ids($ids) {

        $id_array = explode(',', $ids);

        $query_args = array(
            'posts_per_page' => -1,
            'post_status' => 'publish',
            'post_type' => 'product',
            'no_found_rows' => 1,
            'meta_query' => array(),
            'tax_query' => array(
                'relation' => 'AND',
            ),
            'post__in' => $id_array,
            'orderby' => 'post__in',
        );

        $products =  new WP_Query(apply_filters('woocommerce_products_widget_query_args', $query_args));

        if ($products && $products->have_posts()) {

            echo ('<div class="prod-showcase-container">');
			
            while ($products->have_posts()) {
                $products->the_post();
                global $product;
                ?>

				<div class="prod-item-h">
					<div class="prod-item-h-holder">
						<a class="link-image-princ-product" href="/<?php echo esc_url($product->get_permalink()); ?>">
							<?php echo $product->get_image();  ?></a>
						<div class="prod-item-title"><h2><?php echo wp_kses_post($product->get_name()); ?></h2></div>
							<?php if ($product->get_price()!="") { ?>
							<div class="showcase-price">€ <?php echo $product->get_price(); ?></div>
							 <?php } else { ?>
							<div class="showcase-price"><a href="#">Richiedi prezzo</a></div>
							<?php } ?>
						<div class="product-details-group">
							<a class="add-to-cart-icon" href="/<?php echo esc_url($product->add_to_cart_url()); ?>"><span class="lnr lnr-cart"></span></a>
							<a class="show-product-icon" href="/<?php echo esc_url($product->get_permalink()); ?>"><span class="lnr lnr-magnifier"></span></a>
						</div>
					</div>
				</div>

                <?php
                /* ------------------------------ */
            }
            echo ('</div>');
        } 
    }    
}

// Class web2e_widget ends here

 

Save
Cookies user prefences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accetta
Continua senza accettare
Read more
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline