Ok, mi ero perso cercando di capire il flusso.
La lista sopra ti serve come riferimento a come vengono caricati i CSS dal tema genitore, tienila nel caso ti servisse in futuro.
Ora vediamo di semplificare il codice e per fare questo ti ho riscritto tutto cambiando anche API usata, invece di wp_deregister_style() useremo wp_dequeue_style() che a differenza della prima toglie solo dalla coda il CSS ma lo mantiene comunque nella lista dei CSS registrati, questo perché con questo tema l'altro approccio dava problemi.
Ci sono 2 punti fondamentali da comprendere, il primo è che storefront-woocommerce-style ha come dipedendenza storefront-style e storefront-icons e questo significa che se noi togliamo una delle due dipendenze storefront-woocommerce-style cercherà di caricarle ugualmente, quindi dobbiamo rimuovere dalle dipendenze anche storefront-woocommerce-style e poi se ne hai bisogno ti copi anche questo stile.
Il secondo punto è che il tema genitore se esiste un tema figlio carica in automatico il foglio di stile nella root del tema figlio, ora non discuto qui se sia un bene o un male, la cosa importante però è che questo stile non ha dipendenze ma viene caricato alla fine dellalista (quella sopra).
Tutto questo per dire che cambiando l'ordine di caricamento dei vari CSS, come poi hai notato, potrebbero esserci dei problemi di sovrascrittura degli stili, nel caso sai come fare a risolvere.
Ora ci possono essere due approcci, con il primo ti limiti solo a togliere dalla coda storefront-style e storefront-woocommerce-style e usare direttamente style.css del tema figlio mettendo lo stile che hai modificato e lo puoi fare così togliendo tutto il codice di cui abiamo discusso in questo topic:
function ctg_custom_child_theme_style() {
\wp_dequeue_style( 'storefront-style' );
\wp_dequeue_style( 'storefront-woocommerce-style' );
}
// 40 indica che la funzione viene eseguita dopo quelle del tema genitore
\add_action( 'wp_enqueue_scripts', 'ctg_custom_child_theme_style', 40 );
Il secondo approccio togli dalla coda anche lo stile che il tema genitore ti "pre-carica" in modo da caricarlo tu come vuoi e quando vuoi, la handle è questa storefront-child-style e la potresti inserire anche nella funzione sopra perché 40 comunque viene eseguito dopo.
Quindi qui dipende da te se vuoi stare semplice segui il primo approccio e usi style.css della root.
Ora però perché ti ho fatto seguire questo percorso, il motivo è semplice, in questo modo si evita di sovrascrivere il comportamento del CSS del tema genitore nel tema figlio, quando si ha la possibilità la best practice è quella di sostituire il CSS invece di sovrascrivere.
