Jquery spostare un elemento

A volte vi sarà capitato di dover spostare un elemento grafico ma senza voler toccare, per una serie di motivi, il template.  Vediamo come farlo in modo veloce e rapido usando Jquery.

 

In questo particolare esempio, applicheremo la modifica ad un template woocommerce / wordpress in quanto non essendo stato attivato il child theme, e volendo evitare al cliente il costo per questo, abbiamo optato per una risoluzione rapida. 

Vediamo quindi quali sono gli step: 

1) SITUAZIONE DI PARTENZA

Vogliamo spostare in alto il pulsante del carrello e metterlo subito sotto al titolo. 

2) CERCHIAMO IL SELETTORE CSS DEL PULSANTE DI ACQUISTO 

3) CERCHIAMO IL SELETTORE CSS DEL BLOCCO A CUI FAR PRECEDERE IL PULSANTE 

4) INSERIAMO IL CODICE JS

In questo caso abbiamo inserito il codice javascript di Jquery direttamente nelle opzioni del template. Se non dovesse esserci, vi basterà metterlo dentro al template ricordandosi di aggiungere <script type="text/javascript" language="javascript">  in apertura e  </script> in chiusura

5) RISULTATO FINALE

NOTE 

1) abbiamo usato JQuery anzichè $, questo perchè è stato usato questo tag dal template.Se non dovesse funzionare, usate $. Cercate di capire come viene usato JQuery nel vostro temlate

2) Chiaramente stiamo usando JQuery, se non dovesse esserci, crcate di fare un avariante in javascript