Mostre de culoare pentru produsele WooCommerce cu un plugin gratuit

Publicat: 2021-05-28

Activarea mostrelor de culoare și a mai multor opțiuni de produse pentru produsele WooCommerce vă poate crește vânzările. Cea mai populară soluție este un produs WooCommerce cu variante. Astăzi, vă voi arăta cum să schimbați culorile produsului cu mostre pentru produse simple și variabile și să adăugați câmpuri personalizate folosind un plugin gratuit WooCommerce!

A nu oferi opțiuni pentru produse vă poate descuraja clienții să cumpere. Pe de altă parte, după cum știți, produsele variabile nu sunt întotdeauna cea mai bună alegere .

Permiteți-mi să vă arăt cum să îmbogățiți produsele WooCommerce cu mostre de culoare , mai multe opțiuni de produs și câmpuri personalizate. Ceea ce este important, voi folosi un plugin gratuit pentru crearea de produse pentru WooCommerce. Sa incepem!

Cuprins

  • Produse variabile în WooCommerce
  • Mostre de culoare WooCommerce cu un plugin gratuit!
  • Mostre de culoare WooCommerce - un ghid pas cu pas
  • Rezumat și mai multe despre câmpurile personalizate

Produse variabile în WooCommerce

În mod implicit, puteți utiliza câteva tipuri de produse WooCommerce , inclusiv produse simple și variabile.

Produsul simplu WooCommerce este ușor de configurat, dar dacă doriți să adăugați opțiuni de culoare, este posibil ca acestea să nu fie suficiente. Când trebuie să adăugați mostre de culoare, produsele variabile WooCommerce pot fi o alegere mai bună.

Produse variabile: variații

Clienții tăi vor vedea produsul WooCommerce cu 3 opțiuni.

Variante pe pagina produsului

Citiți mai multe despre cum să adăugați un produs WooCommerce cu variante .

Cred că poate doriți să adăugați mostre de culoare mai atractiv!

Mostre de culoare WooCommerce cu un plugin gratuit!

Puteți adăuga cu ușurință câte mostre de culoare doriți.

Câmpuri de produs flexibile - câmp după modificările CSS
Variante de produse WooCommerce adăugate cu Câmpuri de produse flexibile

Vizualizarea opțiunii selectate pe care o alege clientul va da un efect mai bun decât textul în sine. Această regulă este și mai importantă când vine vorba de culoarea produsului. Inserarea mostrelor de culoare pentru produsele WooCommerce va minimiza nemulțumirea față de alegerea greșită a culorilor și va face site-ul web să arate mai frumos.

Câmpul Radio cu culori vă permite să adăugați mostre de culoare produselor dvs. WooCommerce.

Descărcați versiunea GRATUITĂ a Câmpurilor de produse flexibile și adăugați un nou Radio cu câmpuri de culoare.

Câmpuri flexibile de produse pentru WooCommerce

Schimbați culorile WooCommerce adăugând câmpuri radio cu culori. Mostrele WooCommerce sunt simplificate cu Câmpuri de produse flexibile.

Descărcați sau accesați WordPress.org
Peste 10.000 de instalații active
Ultima actualizare: 2023-03-13
Funcționează cu WooCommerce 7.1 - 7.5.x

De asemenea, aruncați o privire la videoclip, care vă va arăta ce poate face acest plugin în versiunea gratuită:

Mostre de culoare WooCommerce - un ghid pas cu pas

Adăugarea unui astfel de câmp este destul de simplă și datorită CSS va fi posibilă ajustarea acestuia, de exemplu pentru a schimba forma sau dimensiunea. Urmați pașii de mai jos:

Mai întâi, accesați tabloul de bord WordPress → Produse → Câmpuri de produse .

Adăugați mostre de culoare
Câmpuri flexibile pentru produse în meniul WordPress

Apoi, adăugați un grup nou sau selectați un grup existent. Dacă Grupul este unul nou - dați-i un nume (de exemplu, „Opțiuni de culoare”) și adăugați-l la produse/categorii sau etichete.

Radio cu culori
Creați un nou grup de câmpuri

Apoi, adăugați un câmp nou. Accesați categoria Câmpuri de opțiuni și selectați Radio cu culori din lista de opțiuni.

Adăugarea unui eșantion de culoare la pagina produsului WooCommerce
Alege Radio cu imagini

În cele din urmă, introduceți eticheta câmpului, care va fi și numele câmpului dvs. Să spunem „Culoarea produsului”.

Etichetă pentru un câmp de eșantion de culoare
Dați noului dvs. câmp o etichetă

Personalizare câmpuri de produse

Acum să vedem opțiunile suplimentare de plugin:

    1. De asemenea, citiți documentația noastră dacă aveți nevoie de mai multe informații despre fiecare dintre câmpurile pe care le veți vedea în acest moment:

      Mostre de variante ale produsului WooCommerce
      Mostre de culoare: diferite tipuri de câmpuri
    2. Completați câmpurile cu informațiile pe care doriți să le afișați pe pagina produsului WooCommerce.

      Schimbați culorile WooCommerce adăugând un radio cu tip de câmp de culoare
      Configurarea mostrelor de culoare
    3. Accesați fila Avansat . Aici puteți modifica lățimea elementului unic în pixeli:

      Mostre de variante de produs WooCommerce - fila Avansat
      Radio cu câmp de culori tip pagina produsului WooCommerce
    4. De asemenea, puteți seta prețul (fix sau procentual) sau puteți utiliza o altă opțiune (de exemplu, logica condiționată ) dacă este necesar. De exemplu, să adăugăm o clasă CSS, de exemplu, „custom-color-swatches” pentru a personaliza stilul câmpului.

      Prețul pentru mostrele de culoare
      Stabilirea prețurilor pentru mostrele de culoare. Puteți alege dintr-un tip de preț fix sau procentual pentru fiecare opțiune.

Personalizarea mostrelor de culoare WooCommerce cu CSS

Nu este obligatoriu, dar este posibil să lipiți codul CSS pe pagină pentru a personaliza câmpul de culoare. Dar, desigur, puteți utiliza clasa CSS atribuită în pasul al 4-lea, de exemplu , custom-color-swatches .

Ascunderea legendei sub imagine

/* Mostre de culoare pentru produsele WooCommerce - fără legenda sub imagine */
div.fpf-radio-imagini p. personalizate-color-swatches input+label span {
afișaj: niciunul;
}

Modificarea dimensiunii imaginii la 50 px și a dimensiunii cadrului la 10 px

/* Mostre de culoare pentru produsele WooCommerce - imagini de 50 px și chenar de 10 px */
div.fpf-radio-imagini p. etichete-swatch-uri personalizate de intrare+etichetă {
lățime: calc( 50px + 2* 10px );
}
div.fpf-radio-imagini p. mostre-color personalizate intrare+etichetă img {
lățime: calc( 50px + 2* 10px );
înălțime: calc( 50px + 2* 10px );
chenar: 10px solid transparent;
}

Schimbați culoarea chenarului (când este selectat) la #d3d3d3

/* Mostre de culoare pentru produsele WooCommerce - culoarea chenarului (selectată) #d3d3d3 */
div.fpf-radio-imagini p. etichete-color personalizate intrare: bifat+etichetă img {
culoare-chenar: #d3d3d3 ;
}

Schimbați forma imaginii într-un cerc

/* Mostre de culoare pentru produsele WooCommerce - imagini în formă de cerc */
div.fpf-radio-imagini p. mostre-color personalizate intrare+etichetă img {
raza-limită: 50%;
}
Aveți nevoie de îndrumări suplimentare despre clasele CSS? S-ar putea să vă fie util articolul nostru despre Personalizarea câmpurilor personalizate cu CSS .

Mostre WooCommerce pe pagina produsului

Să vedem acum efectul final și opțiunile de mostre de culoare pe pagina produsului WooCommerce!

Câmpuri de produs flexibile - câmp după modificările CSS
Variante de produse WooCommerce adăugate cu Câmpuri de produse flexibile

Rezumat și mai multe despre câmpurile personalizate

Mostrele de culoare pentru produsele WooCommerce sunt un element important care atrage atenția clientului.

Desigur, această soluție va funcționa pentru o gamă largă de magazine, deoarece este destul de simplu de adaptat la un anumit site web. De asemenea, este posibil să inserați un model sau o imagine (care arată, de exemplu, textura produsului) în locul culorii.

Puteți obține efectul pe care îl căutați datorită tipului de câmp Radio cu culori , pe care îl veți adăuga și personaliza cu ușurință în timp ce utilizați pluginul Câmpuri de produse flexibile.

În plus, puteți găsi mai multe tipuri de câmpuri în versiunea gratuită a pluginului, de exemplu:

      • câmpuri de text - E-mail și URL
      • câmpuri de opțiuni - Casetă de selectare multiplă și Radio cu culori
      • câmpuri de selecție - Ora și Culoare
      • și alte câmpuri pentru formatarea paginii produsului - Paragraf sau HTML pentru inserarea textului și Imaginea