Autore: marco

Sito web Dragonstore

Posted on by marco

Realizzato Sito web Raven Dragonstore

Realizzato Ecommerce Dragonstore.it per la Raven distribution s.r.l Template su gestionale eCommerce ReadyPro https://www.dragonstore.it/
Layout responsive
Sviluppo in html5 css3 javascript
Programmatore front-end: https://www.marcobarbadoro.it/
Layout Template su gestionale ReadyPro per il sito https://www.dragonstore.it/
– Personalizzazione su piattaforma Software gestionale eCommerce Ready Pro

  • Foglio di style personalizzato
    _ Nuove funzioni e script in javaScript Personalizzate
    – Programmazione html5, css3, javaScript,
    – Progettazione Grafica UI UX Design in PSD
  • JavaScript personalizzato su misura
  • Script in js per la condivisione personalizzato
  • Implementazione in javascript variabili sui selettori
  • Rimodulazione categorie sotto categorie
  • sistema d’Importazione Recinsioni e google
    – Implementazione sul software
    – Template personalizzato fatto su misura
  • Pagine e blocchi html personalizzati
    – Studio di usabilità, interattività, facilità d’uso
  • Layout elastico responsive compatibile con tutti i dispositivi
  • Compatibile Mozilla, Firefox, Chrome, Internet Explorer Opera Safari.
  • Massima compatibilità cross-browser e cross-devices
  • Tecniche di design volte ad aumentare la soddisfazione e la
    fedeltà del cliente migliorando l’usabilità, la facilità d’uso e il piacere fornito nell’interazione tra il cliente e il
    prodotto.
  • Tecniche grafiche per incentivare le conversioni e inviti all’azione
    Icone colori ed elementi rassicurativi per generare fiducia
  • Esperienze di navigazione uniche
  • Massima interazione uomo-macchina
    Programmazione html css javaScrip php
    Design ui ux https://www.dragonstore.it/

Come cambiare e personalizzare il Logo della pagina login di WordPress

Posted on by marco

Questo codice da aggiungere file function.php del tuo tema predefinito.
ovviamente dovrete inserire l’url del vostro logo

////////////////////////// LOGO PERSONALIZZATO login
add_action('login_head', 'login_logo');
function login_logo() {
   echo '<style type="text/css">.login h1 a { background:url("https://www.tuodominio.it/nomelogo.png") no-repeat top center;  width: 250px;
    background-size: 70%;
       margin: 0 auto 0px;
    </style>';

}

Realizzato plug-in per woocmmerce aggiung un Carousel allo Shortcode di WooCommerce

Posted on by marco

Descrizione
Includi un effetto Slider / Carousel negli Shortcode di WooCommerce
Aggiungendo uno shorcode allo shortcode originale di woocmmerce è possibile ottenere un effetto Slider-Carousel
può essere diviso per colonne ess: itemswc = “3 ″

puoi dividere la silde di rendering con l’animazione automatica autoplay = “true” o autoplay = “false”

N.B. è importante mantenere solo 1 colonna nello shortcode originale di woocmmmerce

come nell’esempio:

[wccarousel itemswc="3" autoplay="true"] [products limit="4" columns="1" orderby="popularity" ] [/wccarousel]

se vuoi più diapositive per pagina, il secondo shortcode dovrà essere scritto così:

[wccarousel-b] [/ wccarousel-b]

Tocca e trascina il supporto
Progettato appositamente per migliorare l’esperienza di navigazione mobile. Il trascinamento del mouse funziona benissimo anche sul desktop!

Completamente reattivo
Quasi tutte le opzioni sono reattive e includono impostazioni dei punti di interruzione molto intuitive.

Browser moderni
Owl utilizza l’accelerazione hardware con le transizioni CSS3 Translate3d. È veloce e funziona come un incantesimo!

Browser Zombie
Fallback CSS2 supportato per browser meno recenti.

CARATTERISTICHE:
Supporta i più recenti
Includi un effetto Slider / Carousel negli Shortcode di WooCommerce

Demo plug-in
Link plug-in

Sviluppato plug-in woocmmerce etichetta sconto in percentuale

Posted on by marco

Sviluppato plug-in woocmmerce / wordpress etichetta sconto in percentuale sia sul prodotto che sulla pagina della categorie

MOSTRARE LA PERCENTUALE DI SCONTO SULL’IMMAGINE WOOCOMMERCE
Mostrare la percentuale di sconto sull’immagine WooCommerce quando un prodotto è in sconto, sia sulla pagina del prodotto che sulla pagina delle categorie
vi bastera scaricare il plug-in per woocomeerce e attivarlo
Mostra l’etichetta sconto in % sul prodotto sul immagine woocmmerce

Plug-in sviluppato da Marco Barbadoro / sviluppato in javascript php html5
DEMO

Download Gratuito

Plug-in woocommerce – calcolatore di metri quadrati

Posted on by marco

Sviluppato Plug-in woocommerce – calcolatore di metri quadrati

Realizzato da Marco Barbadoro
250.00€ 190.00€
Il plug-in per woocommerce permette di caricare i metri quadrati presenti nella confezione, in base al prezzo della confezione e i metri quadri (Mq) immessi dal cliente il calcolatore calcolerà le confezioni effettive che il cliente sta acquistando il prezzo al metro quadrato del prodotto, la percentuale di sconto. Portando con se tutti i dati al carrello, e nel processo di acquisto.

plug-in woocommerce adatto per negozi ecommerce di piastrelle pavimenti listelli

Realizzato da Marco Barbadoro

Plug-in + assistenza
190,00€

download

Prezzo visibile a confezione e al metro quadro
calcolo dei metri del costo in base ai metri quadri inseriti
e alla quantità di metri quadri contenuti nella confezione

COMPATIBILE CON
Versione di WooCommerce: 4.0 o superiore
Versione di WordPress: 5.0 o superiore

Il plug-in per woocommerce permette di caricare i metri quadrati presenti nella confezione, in base al prezzo della confezione e i metri quadri (Mq) immessi dal cliente il calcolatore calcolerà le confezioni effettive che il cliente sta acquistando il prezzo al metro quadrato del prodotto, la percentuale di sconto. Portando con se tutti i dati al carrello, e nel processo di acquisto.

I prezzi dei prodotti possono essere visualizzati per metro quadro Mq in negozio sia sulla pagina del prodotto che sulla pagina delle categorie

Assistenza e personalizzazione

download plug-in

calcolo-metriquadri-negozio-piastrelle

Velocità wordpress rimuovere dashicons.min.css nella parte frontend

Posted on by marco

come recuperare un po’ di velocita dal tuo sito WordPress togliendo dashicons.min.css dal front-end
Se nel PageSpeed di Google vedete attiva questa voce …css/dashicons.min.css?ver=5.5.3 significa che wordpress sta caricando le icone intuitive del Il back-end (pannello di amministrazione) anche nel front-end (la parte frontale visibile al pubblico) e con molte probabilità non le state utilizzando quindi il consiglio è di toglierle per velocizzare i processi di caricamento del sitosi possono togliere dalla parte front-end semplicemente aggiungendo le righe di codice sottostanti nel functions.php del proprio tema attivo sul vostro wordpress


// rimuovi dashicons nella parte frontale

function wpdocs_dequeue_dashicon() { if (current_user_can( 'update_core' )) { return; } wp_deregister_style('dashicons'); } add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );

Dopo aver aggiunto il codice noterete una maggior velocità del vostro sito, il file dashicons.min.css non sarà più caricato, noterete una diminuzione sul tempo di caricamento e un aumento del punteggio di Google PageSpeed.ovviamente assicuratevi che non state utilizzando queste icone altrimenti spariranno

Velocità wordpress rimuovere dashicons.min.css nella parte frontend

Posted on by marco

come recuperare un po’ di velocita dal tuo sito WordPress togliendo dashicons.min.css dal front-end

Se nel PageSpeed di Google vedete attiva questa voce …css/dashicons.min.css?ver=5.5.3 significa che wordpress sta caricando le icone intuitive del Il back-end (pannello di amministrazione) anche nel front-end (la parte frontale visibile al pubblico) e con molte probabilità non le state utilizzando
quindi il consiglio è di toglierle per velocizzare i processi di caricamento del sito

si possono togliere dalla parte front-end semplicemente aggiungendo le righe di codice sottostanti nel functions.php del proprio tema attivo sul vostro wordpress




// rimuovi dashicons nella parte frontale
function wpdocs_dequeue_dashicon() {
if (current_user_can( 'update_core' )) {
return;
}
wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );


 


Dopo aver aggiunto il codice noterete una maggior velocità del vostro sito, il file dashicons.min.css non sarà più caricato, noterete una diminuzione sul tempo di caricamento
e un aumento del punteggio di Google PageSpeed.

ovviamente assicuratevi che non state utilizzando queste icone altrimenti spariranno

Contact form 7 Redirect pagina ringraziamento

Posted on by marco

WordPress CF7 reindirizzare alla pagina di ringraziamento senza uso di plug-in
Alla fine della compilazione del modulo Tramite una piccola funzione JavaScript  potrete reindirizzare alla pagina di ringraziamento inserendo questo codice nel footer, nella pagine dove sta il modulo, oppure nello stesso modulo di contact form ( come in figura consigliato) di seguito il codice


 <script>document.addEventListener( 'wpcf7mailsent', function( event ) { location = 'https://www.tuosito.it/pagina-successo/'
 }, false );
</script>

La pagina di ringraziamento o di successo e indispensabile qualora si vogliono monitorare le conversioni
tramite codice di monitoraggio google anlytics adwords o pixel

attenzione questa funzione non funziona più

on_sent_ok: "location = 'http://www.tuosito.com/grazie/';"


contact form 7 redirect

cf7 redirect javascript

contact form 7 pagina ringraziamento

contact form 7 pagina di ringraziamento

Campagne Google AdWords Pesaro Fano Ancona

Posted on by marco



Creazione e Gestione della tua Campagna Pubblicitaria su Google Adwords: Ottieni visibilità immediata per il tuo business!

Se vuoi rendere immediatamente visibile il tuo sito web sui motori di ricerca o sei interessato a pubblicizzare i tuoi prodotti e servizi su Google, allora Google Adwords fa per te.

La forza dell’Advertising su Google Adwords sta nella sua dinamicità e nell’ottimizzazione costante dei costi; ti fornirò le migliori soluzioni per la realizzazione e la gestione di Campagne Google Adwords efficaci, in modalità PPC (Pay per Click).

Una volta pianificata la campagna sarà semplice monitorare i risultati in tempo reale e operare modifiche giorno per giorno per migliorare costantemente l’efficacia dei tuoi annunci sponsorizzati su Google e aumentare la visibilità della tua attività.
gestione e creazione pubblicità Google Pesaro e Ancone

Come Aggiungere le immagini del prodotto sul email degli ordini WooCommerce

Posted on by marco

di default non è presente ma con una semplice funzione possiamo aggiungere l’ immagine del prodotto sul email degli ordini di WooCommerce.

Incollare questo codice nel file function.php del vostri tema
comparirà l’ immagine del prodotto nell’ email dell’ ordine di woocommerce
per attivare l’ immagine nella tabella degli articoli dell’ordine di posta elettronica.

// immagine prodotto e-mail woocommerce
add_filter( 'woocommerce_email_order_items_args', 'iconic_email_order_items_args', 10, 1 );

function iconic_email_order_items_args( $args ) {

$args['show_image'] = true;
$args['image_size'] = array( 150, 150 );
return $args;

}

per modificare la grandezza dell’ immagine cambiare questi parametri

$args['image_size'] = array( 150, 150 );

150 = 150px

caratteristiche ecommerece

Posted on by marco

Crea prodotti

  • Crea velocemente un prodotto
  • Configura le funzioni e i valori
  • Crea pacchetti di prodotti
  • Vendi prodotti personalizzabili permettendo ai tuoi clienti di caricare file
  • Crea prodotti e utilizza il generatore di combinazioni per aggiungere varianti da una lista di attributi
  • Crea prodotti digitali
  • Inserisci file o informazioni aggiuntive alle pagine prodotto
  • Stabilisci una quantità minima di acquisto per alcuni prodotti
  • Scegli il messaggio da mostrare per gli articoli esauriti

Naviga fra i prodotti

  • Crea velocemente un prodotto

Gestisci le scorte

  • Traccia l’inventario di ogni prodotto
  • Aggiungi dei fornitori e associali ai prodotti
  • Aggiungi dei produttori
  • Ottieni una panoramica dei produttori e dei fornitori utilizzando i filtri

Personalizza il tuo negozio

Configura il tuo negozio

  • Offri vari metodi di pagamento
  • Configura i metodi di spedizione
  • Gestisci le zone geografiche di spedizione e associa i corrieri di spedizione
  • Determina il prezzo dei metodi di spedizione offerti
  • Definisci le dimensioni massime degli imballaggi
  • Abilita SSL
  • Configura il negozio come un catalogo

Contenuto e navigazione

  • Configura la visualizzazione dei prodotti
  • Organizza i tuoi prodotti nel negozio
  • Configura i filtri, l’ordine di smistamento e la numerazione delle pagine dei prodotti
  • Configura il motore di ricerca interno
  • Mostra i risultati con le informazioni principali sui prodotti elencati
  • Utilizza diversi metodi di visualizzazione o la navigazione a livelli (layered navigation)
  • Aggiungi una casella di ricerca prodotto alle pagine 404
  • Tieni informati i tuoi clienti sul tuo negozio
  • Mostra i tuoi negozi fisici su Google Maps

Pagamento

  • Offri vari metodi di pagamento
  • Configura i metodi di spedizione
  • Gestisci le zone geografiche di spedizione e associa i corrieri di spedizione
  • Determina il prezzo dei metodi di spedizione offerti
  • Definisci le dimensioni massime degli imballaggi
  • Abilita SSL

Giuridico

Rispetta le leggi

  • Crea pagine o blocchi CMS incentrati sulle avvertenze legali
  • Mostra le avvertenze legali su pagine apposite e appropriate
  • Adatta il processo di pagamento alle leggi europee
  • Conformati alle normative europee mostrando le informazioni relative alla spedizione e ai costi
  • Fai valere le condizioni di annullamento
  • Escludi i beni digitali dai prodotti restituibili
  • Fissa un’ecotassa

Gestisci le tasse

  • Configura le tasse in base alla località
  • Applica le tasse ai costi di spedizione e imballaggio
  • Mostra le tasse per i clienti USA

Gestisci il tuo negozio

Crea offerte speciali

  • Configura i coupon
  • Scegli il metodo di sconto
  • Crea regole per i prezzi
  • Fissa offerte speciali in base ai prodotti, ai clienti o all’ordine
  • Offri la spedizione gratuita

Metti in evidenza i tuoi prodotti

  • Mostra la pagina del prodotto completa con pulsanti Call to Action, cross-selling e contenuti promozionali
  • Suggerisci prodotti ai tuoi clienti
  • Promuovi prodotti specifici
  • Usa lo slider per promuovere i prodotti
  • Permetti ai clienti di aggiungere un pacchetto

Rassicura i clienti

  • Mostra i loghi dei metodi di pagamento per rassicurare i clienti

Aumenta il coinvolgimento

  • Riduci il tasso di carrelli abbandonati inviando e-mail
  • Sollecita i clienti inviando loro un’e-mail contenente i prodotti visualizzati
  • Invia un’e-mail a clienti per informarli del riassortimento di un prodotto

Aumenta il traffico

  • Gestisci la SEO del tuo negozio
  • Gestisci la SEO delle pagine prodotto e CMS
  • Connetti il tuo negozio ai social network

Fai pubblicità sul tuo negozio

  • Raccogli le e-mail dei clienti
  • Fai pubblicità sul tuo negozio con immagini o banner
  • Autorizza gli affiliati

Gestisci gli ordini

Gestisci gli ordini

  • Ottieni una panoramica degli ordini
  • Crea ordini dalla cartella “admin”
  • Modifica un ordine su richiesta del cliente
  • Crea un workflow di stati per ordini e resi
  • Ricevi notifiche per i nuovi ordini
  • Stampa buoni di consegna in PDF

Informa i tuoi clienti sullo stato dei loro ordini

  • Crea template di e-mail e spedisci e-mail per default
  • Automatizza le e-mail in uscita

Gestisci i clienti

Fidelizza i clienti

  • Configura il modulo di creazione account del cliente
  • Permetti ai tuoi clienti di creare un account nel tuo negozio
  • Autorizza i clienti a gestire e seguire i loro ordini

Gestisci il tuo database clienti

  • Gestisci gli indirizzi dei tuoi clienti
  • Aggiungi nuovi clienti o modifica le informazioni relative a quelli esistenti
  • Importa o esporta la lista dei clienti
  • Trova i clienti facilmente
  • Personalizza l’esperienza utente dei tuoi acquirenti creando gruppi di clienti

Gestisci il tuo servizio clienti

  • Accedi al riassunto dell’attività del servizio clienti
  • Ricevi notifiche
  • Crea un accesso IMAP e inoltra le richieste al dipendente giusto
  • Imposta delle risposte predefinite
  • Autorizza i tuoi clienti ad avviare un processo di reso
  • Genera note di credito per rimborsare i clienti insoddisfatti
  • Trasforma un carrello in ordine su richiesta del cliente
  • Visualizza informazioni e modulo di contatto con soggetti predefiniti

Ottieni informazioni

Generale

  • Ottieni una panoramica dei dati principali, definisci gli obiettivi e segui il loro progresso
  • Ottieni un’anteprima delle principali statistiche grazie ai filtri

Performance marketing

  • Misura l’impatto delle tue campagne promozionali
  • Report sul traffico
  • Analizza la navigazione dei clienti all’interno del tuo sito
  • Ottieni dati sui metodi di spedizione

Prodotti

  • Ottieni una panoramica completa dei tuoi prodotti
  • Identifica i tuoi prodotti di maggior successo e mettili in evidenza nel tuo negozio
  • Ottieni una panoramica delle tue scorte e della copertura di scorte in magazzino

Vendite e clienti

  • Ottieni dati sulle vendite
  • Ottieni una panoramica di tutti i carrelli attivi con le statistiche corrispondenti
  • Segmenta i clienti per raggiungere meglio il tuo target

Gestisci la tua azienda

Proteggi il tuo negozio dai problemi

  • Configura le notifiche e-mail per ricevere avvisi automatici

Spingiti oltre

Cresci a livello internazionale

  • Scegli in che paese rendere disponibile il tuo negozio
  • Adatta il tuo negozio a un target di mercato
  • Definisci le valute e automatizza i movimenti dei tassi di cambio
  • Usa schede prodotto multi-lingue per adattare la descrizione del prodotto ai diversi mercati

Gestisci più negozi

  • Gestisci più negozi dallo stesso back office

Amplia il tuo negozio con moduli e template grafici

  • Installa e gestisci moduli gratuiti, esterni o Addons
  • Ottieni l’anteprima del catalogo Addons e i consigli su template grafici e moduli

Semplifica il tuo utilizzo di PrestaShop

  • Utilizza la barra di ricerca universale per trovare facilmente un prodotto
  • Riorganizza il menu del back office
  • Velocizza i processi con il pulsante di upgrade automatico
  • Configura i cronjob

Approfondisci la tua conoscenza del software con le funzioni Sviluppatore

  • Ottieni informazioni sul server, il negozio, le e-mail, il database…
  • Crea e scarica i back-up del database
  • Cancella una parte o la totalità del database
  • Imposta una durata di conservazione dei cookie e altri parametri
  • Attiva o disattiva iFrames e HTML Purifier
  • Gestisci la memoria cache
  • Crea una serie di chiavi API e configura i permessi
  • Crea richieste SQL

Ottieni assistenza

Ottieni assistenza

  • Ottieni i link alla documentazione disponibile
  • Ottieni assistenza per la documentazione contestuale
  • Disattiva le estensioni e sovrascrivile, oppure passa alla modalità debug
  • Utilizza i pulsanti di accesso rapido
  • Utilizza i tasti di scelta rapida per modificare il tuo catalogo

come installare codice di monitoraggio delle conversioni google adwords in wordpress

Posted on by marco

come installare codice di monitoraggio delle conversioni google adwords
Google Adwords coversioni  codice di monitoraggio in Contact Form 7

 

 

1 insrire questo codice nel modulo di contatto del contact form nella sezione impostazioni aggiuntive

 

on_sent_ok: "location = 'http://www.tuosito.it/grazie/';"

 

2 creare una pagina di ringraziamento con questo indirizzo http://www.tuosito.it/grazie/

inserire il codice di monitoraggio delle conversioni di google adwords all’ interno della pagina
tutte le volte che gli utenti passanti dagli annunci di google adwords compileranno il form dei contatti tramite la funzione
on_sent_ok: "location = 'http://www.tuosito.it/grazie/';"

saranno reindirizzati alla pagina di ringraziamento e sara conteggiata la conversione

i godice di google adwords dovranno essere inseriti uno nel header.php e l’ altro nella pagina di ringraziamento http://www.tuosito.it/grazie/ creata con wordpress

aggiungere una nuova area widget personalizzata

Posted on by marco

aggiungere una nuova area widget.  Innanzitutto scegliere il punto in cui si vogliono inserire i widget, quindi modificare il file di competenza.

ad esempio nel footer.php vogliamo creare una nuova area widget modificabile apriamo il file footer.php del nostro tema
e inseriamo questo codice

 <?php 
 // Area Widget Personalizzata
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar
 ('Area Widget Personalizzata') ) : ?>
 <?php endif;
 ?>

 

apriamo ora il file functions.php e inseriamo questo codice

  <?php 
 if ( function_exists('register_sidebar') )
 register_sidebar( array(
 'name' => __( 'Area Widget Personalizzata'),
 'id' => 'areawidgetpersonalizzata',
 'description' => __( 'Area widget personalizzata',
 'nome del tema' ),
 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 'after_widget' => "</aside>",
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
 ) );
 ?>

Ora nella gestione Widget comparirà una nuova posizione chiamata Area Widget Personalizzata dove inserire i contenuti,
i contenuti inseriti conparirano nel div del footer dove avete insrito il primo codice

potete inserire nuove Area Widget Personalizzate in qualsiasi punto di wordpress avendo poi la possibilita di cambiare con semplicità i contenuti

 

Aggiungere frecce di navigazione per le immgini Next / Prev slider prodotto woocommerce?

Posted on by marco

per far comparire le frecce
La navigazione delle miniature, in particolare su dispositivi mobili  è ottima, ma avere frecce anche per gli utenti desktop sarebbe meglio!
questa guida mostra come far apparire le frecce sull’immagine principale del prodotto per scorrere le immagini a destra e a sinistra.
sensa installare nessun plug-in che appesantiscie il codice

 

Nel file functions.php del vostro tema in fondo al codice inserire questa funzione
// funzione per aggiungere frecce next Prev

add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );

function ud_update_woo_flexslider_options( $options ) {

$options['directionNav'] = true;

return $options;
 }
Nel foglio di stile del vostro tema style.css oaggiungere questo codice:
ul.flex-direction-nav {
    position: absolute;
    top: 30%;
    z-index: 99999;
    width: 100%;
    /* height: 100px; */
    /* background-color: black; */
    left: 0;
    margin: 0;
    padding: 0px;
	list-style: none;
}

li.flex-nav-prev {float: left;}

li.flex-nav-next {float: right;}


a.flex-next {visibility:hidden;}

a.flex-prev {visibility:hidden;}


a.flex-next::after {
	visibility:visible;
	content: '\f105';
	font-family: FontAwesome;    
margin-right: 10px;font-size: 70px;}

a.flex-prev::before {
	visibility:visible;
	content: '\f104';
	font-family: FontAwesome;    
margin-left: 10px;font-size: 70px;}