WooCommerce templates: come usarli - Francesco Grasso - WPCatania

Slide 1

Slide 1 text

WooCommerce Templates. Come usarli.

Slide 2

Slide 2 text

Francesco Grasso Developer @ YITH Trainer @ Your Inspiration Co-Organizer @ WordPress Meetup Catania WordPress Lover 2 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 3

Slide 3 text

oltre 59.552.153 download 3 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 4

Slide 4 text

WooCommerce motorizza oltre il 28% di tutti gli store online. 4 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 5

Slide 5 text

Prerequisiti Per realizzare o personalizzare un tema WooCommerce 5 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 6

Slide 6 text

Prerequisiti 6 1 WordPress e WooCommerce Installati - Un buon editor per analizzare e scrivere codice Buona conoscenza di HTML e CSS - PHP per modifiche più avanzate 2 Conoscenza base dei template di WooCommerce e gerarchia template WordPress - Action e filter hooks 3 Capacità di apprendere dalle documentazioni e sperimentare 4 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 7

Slide 7 text

Come dare uno stile unico al proprio sito WooCommerce ? Layout di pagina specifici con elementi nuovi o ordinati diversamente 7 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 8

Slide 8 text

Tre differenti approcci ● Modifiche CSS ● Aggancio agli action hooks ● Sovrascrittura dei template 8 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 9

Slide 9 text

Modifiche CSS ● Sovrascrivere le regole di woocommerce.css sul file style.css del tema ● Sovrascrivere le regole di woocommerce.css su un nuovo file appositamente creato ● Rimuovere il foglio di stile di woocommerce 9 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 10

Slide 10 text

Modifiche CSS Documentazione ufficiale di WooCommerce ● https://docs.woocommerce.com/document/disable-t he-default-stylesheet/ 10 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 11

Slide 11 text

Action e filter hooks ● Rimuovere porzioni di layout ● Aggiungere nuovi porzioni di layout ● Cambiare il contenuto di porzioni di layout 11 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 12

Slide 12 text

Action e filter hooks ● Rimuovere porzioni di layout Es. remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 ); 12 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 13

Slide 13 text

Action e filter hooks ● Aggiungere nuovi porzioni di layout Es. add_action( 'woocommerce_before_shop_loop_item_title', 'wpcatania_custom_action', 15 ); function wpcatania_custom_action() { echo 'Titolo prodotto:'; } 13 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 14

Slide 14 text

Action e filter hooks ● https://businessbloomer.com/woocommerce-visual-hook-g uide-single-product-page/ ● https://businessbloomer.com/woocommerce-visual-hook-g uide-archiveshopcat-page/ 14 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 15

Slide 15 text

Sovrascrittura template I template WooCommerce contengono markup di pagine e sezioni ecommerce del tuo sito (email incluse). Oltre ad elementi html e php, contengono hook e filtri. Utilizzare hook e filtri (dove possibile) è il miglior modo per apportare modificare. 15 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 16

Slide 16 text

Sovrascrittura template I template possono essere trovati all'interno della directory wp-content/plugins/woocommerce/templates/ 16 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 17

Slide 17 text

Non modificare mai un template di WooCommerce! 17 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 18

Slide 18 text

Sovrascrittura template Copia il template di tuo interesse in una directory all’interno del tuo tema chiamata /woocommerce Mantenendo la stessa struttura file e lo stesso nome ma rimuovendo la sottorirectory /templates/ 18 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 19

Slide 19 text

Sovrascrittura template Es: wp-content/plugins/woocommerce/templates/content-single-product.php Sovrascritto in: wp-content/themes/yourtheme/woocommerce/content-single-product.php 19 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 20

Slide 20 text

Non rimuovere gli hook di WooCommerce dai template! 20 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 21

Slide 21 text

Templates Pagina prodotto ● single-product.php ● content-single-product.php ● /single-product/** 21 WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 22

Slide 22 text

Place your screenshot here 22 Esempi pratici WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania

Slide 23

Slide 23 text

23 Thanks! Domande? Slack > @francgrasso Facebook > https://www.facebook.com/francesco.aci Mail > francgrasso@gmail.com WooCommerce Templates: come usarli - Francesco Grasso - WordPress Meetup Catania