WooCommerce tips og trick 2. del:

WooCommerce opfører sig ikke altid hensigtsmæssigt på mobile platforme. Dog kan man med CSS ofte nemt forbedre WooCommerce på smalle skærme. Et eksempel på dette er formene.

WooCommerce bruger tre classes til deres tekst input felter. Den ene class hedder ’form-row-wide’ og den dikterer, at et input felt skal stå på en linje/row for sig selv og være 100% bred. De to andre classes hedder ’form-row-first’ og ’form-row-last’ og de bruges til at have to input felter stående på samme linje, f.eks. for- og efternavn.

De sidst nævnte input felter ser fine ud på bredde skærme, men fungerer knap så godt på mobiler. Ved hjælp af media queries kan man dog nemt få input felterne til at tilpasse sig de smalle skærme. Dette gøres ved at sætte bredden på ’form-row-first’ og ’form-row-last’ til 100% når skærmens width er mindre end f.eks. 768px.

CSS kode:

@media (max-width: 767px){
  .form-row-first, .form-row-last{
    width: 100% !important; 
  }
}

Før:

Efter: