Cum să editați pagina de produs WooCommerce în mod programatic

Publicat: 2021-01-09

Căutați modalități de a personaliza pagina produsului în magazinul dvs. de comerț electronic? În acest ghid, vă vom arăta cum să editați pagina produsului WooCommerce în mod programatic .

Personalizarea paginii de produs

Chiar dacă puteți personaliza orice în magazinul dvs., cele două pagini principale în care apar cele mai multe personalizări în WooCommerce sunt pagina magazinului și pagina produselor. Dacă doriți să vă creșteți vânzările și să optimizați începutul procesului de cumpărare, trebuie să lucrați la ambele. Am văzut deja cum să personalizăm pagina Magazin, așa că astăzi vă vom arăta cum să editați pagina de produs în mod programatic (cu cod).

Un design îngrijit care se concentrează pe oferirea celei mai bune experiențe pentru clienți vă va ajuta să îmbunătățiți procesul general de achiziție și să vă creșteți ratele de conversie. Există două moduri principale de a personaliza pagina de produs:

  • Cu pluginuri
  • Din punct de vedere programatic

Chiar dacă unele plugin-uri vă pot ajuta, găsirea celui care are toate caracteristicile dorite poate fi un proces lung. Deci, dacă aveți niște abilități de bază de dezvoltator, o opțiune excelentă este să editați pagina produsului WooCommerce în mod programatic . Nu numai că puteți evita instalarea oricăror instrumente terțe, dar veți avea și mult mai multă flexibilitate pentru a personaliza orice doriți.

Dacă doriți să personalizați pagina produsului cu pluginuri și creatori de pagini, consultați acest ghid.

Cum să editați pagina produsului WooCommerce în mod programatic

În această secțiune, veți învăța cum să editați pagina produsului WooCommerce pentru produse individuale. Vom acoperi următoarele subiecte.

  1. Folosind cârlige
    1. Îndepărtați elementele
    2. Reordonați elementele
    3. Adăugați elemente noi
    4. Aplicați logica condiționată
      1. Conectat utilizator și rol de utilizator
      2. ID-uri de produs și taxonomii
    5. Editați filele Produs
    6. Suport pentru produse variabile
  2. Ignorați fișierele șablon WooCommerce
    1. Editați metainformațiile
    2. Comutați la un șablon personalizat pentru o anumită categorie de produse
      1. Editați fișierul single-product.php
      2. Creați un nou fișier content-single-product.php
      3. Creați șablon personalizat editând noul fișier content-single-product.php
  3. Personalizarea paginii produsului cu scripturi CSS

Aspect pagină de produs WooCommerce

Înainte de a începe cu tutorialul, să aruncăm o privire la pagina de produs implicită din WooCommerce pentru produse individuale și să identificăm fiecare element. Fiți atenți la diferitele secțiuni din șablon și la modul în care sunt organizate informațiile, deoarece ne vom referi la ele mai târziu în ghid. Pagina cu un singur produs WooCommerce Există două fișiere principale WooCommerce responsabile pentru ieșirea paginii de produs.

  1. single-product.php : creează șablonul necesar pentru aspectul curent
  2. content-single-product.php : Acest fișier tipărește conținutul din șablon

Ambele fișiere pot fi suprascrise folosind o temă copil. Aceasta este o practică obișnuită de a suprascrie fișierele șablon WooCommerce. Cu toate acestea, ar trebui să încercați să utilizați cârlige WooCommerce în loc să suprascrieți fișierele șablon acolo unde este posibil, deoarece este una dintre cele mai bune practici pe care WordPress le recomandă atunci când vă personalizați site-ul.

Pe de altă parte, pentru sarcini complexe care includ funcții sau obiecte, ar putea fi necesar să editați fișierele șablon. Combinând ambele tehnici, ar trebui să puteți realiza aproape orice personalizare dorită. Deci, în acest tutorial, vă vom arăta cum să editați pagina produsului WooCommerce folosind ambele metode.

Înainte de a începe, asigurați-vă că creați o temă copil pentru a vă testa scripturile sau utilizați un plugin pentru a genera unul. Să vedem câteva exemple practice, astfel încât să puteți afla cum funcționează fiecare dintre aceste tehnici pentru a profita la maximum de magazinul dvs.

1) Editați pagina produsului WooCommerce folosind cârlige

NOTĂ : Dacă nu sunteți familiarizat cu cârligele WooCommerce și cum să le utilizați, consultați acest ghid.

1.1) Îndepărtați elementele de pe paginile unui singur produs

Există mai multe cârlige WooCommerce pe care le puteți folosi pentru a elimina orice element dintr-o singură pagină de produs. Fiecare dintre ele va funcționa cu un grup de elemente specifice, așa că trebuie să utilizați cârligul potrivit, funcția de apel invers WooCommerce potrivită și valoarea de prioritate potrivită.

De exemplu, dacă doriți să eliminați titlul tuturor paginilor de produse, veți folosi următorul script în fișierul functions.php al temei copilului dumneavoastră.

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

Veți găsi toate cârligele și parametrii aferenti acestora aici sau în comentarii în fișierul content-single-product.php al plugin-ului WooCommerce. Acum, să aruncăm o privire la alte exemple de scripturi pentru a elimina diferite elemente și a personaliza pagina produsului.

 // elimina titlul
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// elimină stelele de evaluare
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// elimină meta produs 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// elimină descrierea
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// elimina imaginile
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// eliminați produsele aferente
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// elimină filele de informații suplimentare
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

1.2) Reordonați elementele

Reordonarea elementelor paginii produsului este destul de simplă. Mai întâi, trebuie să scoateți cârligul în același mod în care am făcut-o înainte, apoi trebuie să îl adăugați din nou cu un alt număr de prioritate/comandă. De exemplu, următorul script va muta descrierea produsului chiar sub titlu:

 // schimba ordinea descrierii
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

După cum vedeți, eliminăm acțiunea și apoi o adăugăm din nou cu o prioritate diferită (6 în loc de 20). De ce am ales o prioritate/ordine de 6? Știm că elementul titlu are o valoare de prioritate de 5, așa că acest lucru ne permite să știm valoarea de prioritate pe care trebuie să o atribuim cârligului nostru personalizat pentru a afișa elementul de apel invers imediat după titlu (6).

Folosind informațiile pe care vi le-am furnizat la punctul 1.1, puteți face același lucru cu orice cârlig și apel invers și le puteți plasa în orice ordine doriți.

1.3) Adăugați elemente noi

Dacă trebuie să personalizați pagina produsului WooCommerce adăugând conținut nou, poate fi necesar să luați în considerare suprascrierea fișierelor șablon. Cu toate acestea, puteți utiliza și următorul cârlig pentru a adăuga conținut nou:

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">Felicitări, tocmai ați adăugat un link!</a></h4>');
}
);

woocommerce_before_single_product_summary hook personalizarea paginii produsului Alternativ, vă puteți crea propria funcție:

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
funcția QuadLayers_callback_function(){
    printf('
    <h1> Bună!</h1>
    <div><h5>Bine ați venit pe pagina de produs personalizat</h5>
    <h4><a href="?link-to-somewere">Link către somewere!</a></h4>
    <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
    </div>');
}

personalizarea paginii produsului woocommerce_after_single_product_summary

1.4) Logica condiționată pe o singură pagină de produs

Am văzut anterior cum să adăugați câmpuri condiționate pe pagina de finalizare a comenzii, dar le puteți adăuga și pe pagina produsului. Puteți crea o logică condiționată pentru a îndeplini cerințele dorite folosind oricare dintre funcțiile native WordPress. Să aruncăm o privire la câteva exemple.

1.4.1) Utilizator autentificat și rol de utilizator

user_is_logged_in() este o funcție implicită WordPress folosită pentru a valida vizitatorii site-ului web. În plus, putem folosi funcția wp_get_current_user() pentru a prelua toate informațiile legate de utilizatorul conectat. În următorul script, pur și simplu adăugăm conținut în funcție de dacă utilizatorul este autentificat și de rolul său, dar puteți adăuga funcțiile dvs. personalizate pentru funcționalități mai complexe

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
funcția QuadLayers_get_user() {
    if( is_user_logged_in() ) {
    $user = wp_get_current_user(); 
    printf ('<h1>Bună ' .$user->user_nicename.'!</h1>');
    $roluri = ( array ) $utilizator->roluri;
        if($roles[0]=='administrator'){
            echo „<h4><b>Sunteți $roles[0]</h4></b>”;
        }     
    } 
    else {
    return array();
    }     
}
1.4.2) ID-uri de produs și taxonomii

În mod similar, putem prelua ID-ul produsului și/sau categoriile de produse. Diferența este că vom folosi obiectul global WP $post pentru a obține ID-ul și funcția get_the_terms() pentru a obține categoriile de produse.

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies');
funcția QuadLayers_get_product_taxonomies(){ 
    global $post; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat');
    $terms_string = join(', ', wp_list_pluck($term_obj_list, 'nume'));
    if($terms_string=='Afișe'){
        ecou"
<h1>Acesta este unul dintre cele mai bune $terms_string</h1>"; echo "<h2>ID produs: $post->ID"; } }

Scriptul de mai sus va returna o singură categorie. Dacă trebuie să preluați mai multe categorii sau etichete, va trebui să creați o funcție mai complexă. Va trebui să treceți peste taxonomii înainte de a vă aplica condiționalele, așa cum se arată mai jos:

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
funcția QuadLayers_get_multiple_taxonomies(){
    global $post;
    $args = array( 'taxonomy' => 'product_tag',);
    $terms = wp_get_post_terms($post->ID,'product_tag', $args);
    $număr = număr ($termeni);
 dacă ($număr > 0) {
        echo '<div class="custom-content"><h4>Lista de etichete:</h4><ul>';
        foreach ($termen ca $term) {echo '<li>'.$term->nume.'</li>';}
        ecou „</ul></div>”;
    }
}

1.5) Editați filele de produse

Cârligul de filtru woocommerce_product_tabs ne permite să eliminăm, să adăugăm, să reordonăm sau să adăugăm o filă nouă în secțiunea Informații suplimentare . Următorul script va elimina fila Descriere și conținutul acesteia, va redenumi fila Recenzii și va schimba pe primul loc prioritatea Informațiilor suplimentare.

 add_filter( 'woocommerce_product_files', 'woo_remove_product_files', 98 );
funcția woo_remove_product_tabs( $tabs ) {
    unset( $tabs['descriere'] ); // Eliminați fila Descriere
    $tabs['reviews']['title'] = __( 'Evaluări'); // Redenumiți fila Recenzii
    $tabs['additional_information']['priority'] = 5; // Informații suplimentare la început
    returnează $tabs;
}

Editați pagina produsului WooCommerce în mod programatic - Personalizați filele Produs Pentru a edita conținutul unei file, trebuie să utilizați o funcție de apel invers ca aceasta:

 add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );

funcția woo_custom_description_tab( $tabs ) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Descriere personalizată apel invers
	returnează $tabs;
}
funcția woo_custom_description_tab_content() {
	ecou'
<h2>Descriere personalizată</h2>
'; echo „Aici o descriere personalizată”; }

În mod similar, putem crea o filă nouă după cum urmează:

 add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
funcția woo_new_product_tab( $tabs ) {	
	// Adaugă noua filă	
	$tabs['test_tab'] = matrice(
		'title' => __( 'Fila Produs nou', 'woocommerce'),
		'prioritate' => 50,
		'callback' => 'woo_new_product_tab_content'
	);
	returnează $tabs;
}
funcția woo_new_product_tab_content() {
	echo „<h2>Fila Produs nou</h2><p>Iată conținutul filei de produs nou</p>.'; 
}

În acest exemplu, tocmai am creat o filă nouă numită „Fila Produs nou”. Așa arată în față.

1.6) Suport pentru produse variabile

Variațiile produselor sunt o caracteristică implicită WooCommerce și puteți crea și utiliza produse variabile fără niciun fel de personalizare. Cu toate acestea, trebuie să urmați instrucțiunile WooCommerce pentru a face o soluție personalizată compatibilă cu variantele de produs.

Este important de reținut că orice soluție personalizată trebuie integrată cu întregul site web și nu cu o singură pagină. Deci, ținând cont de acest lucru, putem folosi în continuare unele dintre cârligele disponibile legate de produse variabile. Aceste cârlige se vor declanșa numai atunci când se află pe o pagină de produs variabilă.

  • woocommerce_before_variations_form
  • woocommerce_before_single_variation
  • woocommerce_single_variation
  • woocommerce_after_single_variation

2) Personalizați pagina produsului suprascriind fișierele șablon WooCommerce

A doua alternativă de a edita pagina de produs WooCommerce în mod programatic este să suprascrieți fișierele șablon. Deoarece această metodă este puțin mai riscantă decât cea anterioară, vă recomandăm să creați o copie de rezervă completă a site-ului dvs. înainte de a începe. Dacă nu sunteți sigur cum să o faceți, consultați acest ghid despre cum să faceți copii de rezervă pentru un site WordPress.

Suprascrierea fișierelor șablon WooCommerce este similară cu înlocuirea oricărui alt fișier din tema copil, așa că pentru a evita pierderea personalizărilor atunci când actualizați tema, vă recomandăm să creați o temă copil sau să utilizați oricare dintre aceste pluginuri dacă nu aveți unul.

2.1) Editați metainformațiile

Pentru a edita metainformațiile, trebuie să suprascriem fișierul șablon responsabil pentru a tipări datele corespunzătoare. Fișierul meta.php aflat în pluginul WooCommerce urmează această cale: woocommerce/templates/single-product/meta.php

Acum editați directorul de fișiere cu tema copilului și creați un folder WooCommerce. Apoi, creați un alt folder în interiorul acestuia numit single-product și inserați fișierul meta.php acolo: Child_theme/woocommerce/single-product/meta.php

După aceasta, ar trebui să puteți edita fișierul meta.php și să vedeți modificările dvs. în frontend. Următorul fișier exemplu meta.php va:

  • Schimbați eticheta SKU în ID
  • Schimbați etichetele la Publicat sub
  • Eliminați eticheta categoriei
 global $produs;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?php if ( wc_product_sku_enabled() && ( $produs->get_sku() || $produs->is_type( 'variabilă' ) ) ) : ?>

		<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?> 
			<span class="sku"><?php echo ( $sku = $produs->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>
			</span>
		</span>
	<?php endif; ?>
	<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce ' ) . ' ', '</span>' ); ?>
	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Publicat sub:', 'Publicat sub:', count( $product->get_tag_ids () ), „woocommerce” ). „ „, „</span>” ); ?>
	<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2) Comutați la un șablon personalizat pentru o anumită categorie de produse

Acum să încercăm o sarcină mai complexă. Vom înlocui șablonul de produs unic numai atunci când produsul curent aparține unei anumite categorii.

2.2.1) Editați fișierul single-product.php

Mai întâi, copiați fișierul single-product.php și inserați-l în folderul cu tema copilului, în directorul WooCommerce:

Child_theme/woocommerce/single-product.php

Apoi, deschideți fișierul și verificați linia 37: wc_get_template_part('content','single-product');

Așa intră în acțiune fișierul content-single-product.php , imprimând toate elementele produsului curent pentru a finaliza bucla și a construi layout-ul.

Dorim să suprascriem acest fișier numai atunci când produsul aparține categoriei specificate, așa că vom șterge linia 37: wc_get_template_part( 'content', 'single-product' ); și înlocuiți-l cu următorul script:

 $terms = wp_get_post_terms( $post->ID, 'product_cat' );
				$categorii = wp_list_pluck( $termeni, 'slug');
			
				if ( in_array( 'postere', $categorii ) ) {
					wc_get_template_part('conținut', 'postere-un singur produs');
				} altfel {
					wc_get_template_part('conținut', 'produs unic');
				}

Rețineți că folosim produsele eșantion furnizate de WooCommerce, deci există o categorie numită „ Pofișe ” pe care o folosim pentru acest exemplu. Pur și simplu înlocuiți „ afișe ” cu o categorie de produse existentă a site-ului dvs. web.

Amintiți-vă că puteți găsi toate categoriile de produse în tabloul de bord principal WordPress > Produse > Categorii .

2.2.2) Creați un nou fișier content-single-product.php

Acum trebuie să creăm un fișier nou care îl va înlocui pe cel implicit content-single-product.php . Acest fișier va avea categoria slug în numele său.

Aruncă o privire la exemplul de mai sus pentru a vedea cum este numit fișierul content-single-product-posters.php . Acest lucru este important deoarece numele fișierului trebuie să se potrivească cu codul din pasul anterior, așa că fișierul dvs. ar trebui să se numească content-single-product-/*YOURCATEGORYSLUG*/.php .

În acest fel, wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) va declanșa fișierul content-single-product-YOURCATEGORY.php și va suprascrie fișierul șablon WooCommerce implicit.

Pur și simplu inserați fișierul implicit content-single-product.php în folderul WooCommerce al temei copilului, redenumiți-l urmând instrucțiunile explicate mai sus și faceți câteva ediții pentru a-l testa.

2.2.3) Creați un șablon personalizat editând noul fișier content-single-product.php

Aceasta este un exemplu de pagină de produs care va fi afișată numai atunci când produsul curent aparține categoriei „ postere ”. Veți vedea că am adăugat conținut, am adăugat și eliminat elemente, le-am reordonat și am rulat câteva shortcodes.

În ciuda faptului că este un exemplu de bază, vă va oferi o idee despre ce puteți face pe o pagină șablon și vă va permite să explorați noi posibilități.

 // elimină elementele rezumatului produsului
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	
		// Conținut personalizat
		printf('<h1>Acesta este <b>'.$post->post_name.' </b>poster</h1>');
		printf('<h4>O pagină de produs complet personalizată pentru produse din categoria „postere”</h4>');
		// Descriere
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//miniatură
		do_action( 'woocommerce_before_single_product_summary' );
				
		//adăugați meta
		do_action('woocommerce_single_product_summary');
		// coduri scurte
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo „<h3>Contact:</h3>”.do_shortcode('[wpforms]'); echo „<h3>Mai multe postere:</h3>”.do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

Acum, dacă verificăm frontend-ul, vom vedea următoarele: Cum să editați pagina de produs WooCommerce în mod programatic - șablon de pagină de produs pentru o taxonomie specifică Rețineți că folosim obiectul post global. var_dump($post); pentru a vă arăta toate informațiile disponibile legate de produsul curent. Puteți utiliza oricare dintre datele sale exact așa cum am făcut în exemplul de script cu descrierea produsului: $post->post_excerpt .

3) Personalizați pagina produsului cu script CSS

O altă modalitate utilă și simplă de a edita pagina produsului WooCommerce (și orice altă pagină) în mod programatic este utilizarea codului CSS . Acest lucru vă va ajuta să stilați pagina produsului și să îi oferiți aspectul afacerii dvs.

    1. Mai întâi, trebuie să creați un fișier nou în tema copilului cu extensia .css , astfel încât să puteți adăuga acolo scripturile CSS. Vă recomandăm să îl denumiți single-product.css sau ceva similar, astfel încât să fie ușor de găsit.
    2. Apoi, plasați fișierul în folderul principal al temei copil la același nivel cu fișierele functions.php și style.css .
    3. După aceea, lipiți următorul script în fișierul functions.php al temei dvs. copilului și înlocuiți numele fișierului dvs. CSS dacă este necesar.
 add_action( 'wp_enqueue_scripts', 'load_custom_product_style');
      funcția load_custom_product_style() {
        dacă ( este_produsul() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
          wp_enqueue_style('product_css');
        }
	  }

if(is_product()) va verifica dacă pagina curentă este o pagină de produs. Acest lucru previne încărcarea inutilă a fișierului CSS atunci când nu este o pagină de produs.

4. După ce adăugați acest fragment, ar trebui să puteți edita stilul paginilor de produse adăugând regulile CSS personalizate în fișierul dvs. CSS.

Chiar dacă această metodă este destul de simplă și vă va oferi o soluție rapidă și ușoară, s-ar putea să nu fie ideală pentru unele cazuri. Deoarece CSS poate fi editat de pe front-end, dacă un utilizator știe cum să folosească instrumentele de dezvoltare a browserului, ar putea face vizibil cu ușurință orice element ascuns prin editarea CSS-ului.

Editați pagina de produs unică WooCommerce cu CSS

Să vedem alte câteva exemple de modificări pe care le puteți face pe pagina produsului folosind un pic de CSS.

Pentru a aplica următoarele scripturi, pe tabloul de bord WordPress, accesați Aspect > Personalizare > CSS suplimentar.

Schimbați dimensiunea fontului titlului

Aceasta va schimba dimensiunea fontului titlurilor produselor din pagina dvs. la 32. Pur și simplu ajustați codul pentru a selecta dimensiunea dorită.

 .woocommerce div.product .product_title { 
        dimensiunea fontului: 32px; 
}
Schimbați culoarea titlului

De asemenea, puteți personaliza culoarea titlului paginii produsului dvs. Pentru a face asta, pur și simplu utilizați următorul cod și ajustați culoarea. Pentru acest exemplu, folosim portocaliu. Vă recomandăm să utilizați un selector de cod hexadecimal ca acesta pentru a alege culoarea dorită.

 .woocommerce div.product .product_title { 
            culoare: #FFA500; 
}
Schimbați culoarea butonului Cumpărați acum

În mod similar, puteți schimba culoarea butonului Cumpărați acum. În acest exemplu, folosim dodger blue, dar puteți alege orice altă culoare pe care o doriți ajustând codul.

 .woocommerce div.produs .button { 
        fundal: #1E90FF; 
}

Concluzie

În rezumat, personalizarea magazinului dvs. online este cheia pentru a vă distinge de concurenți. Paginile de produse sunt unele dintre cele mai importante pagini din orice magazin și puteți face multe pentru a îmbunătăți experiența clienților și pentru a vă crește vânzările.

Chiar dacă ați putea folosi pluginuri pentru aceasta, vă recomandăm să editați pagina produsului WooCommerce în mod programatic dacă aveți anumite abilități de codare. Vă oferă multă flexibilitate pentru a personaliza orice element al magazinului dvs. fără a fi nevoie să instalați instrumente suplimentare. În acest ghid, am văzut cum să personalizăm pagina produsului în trei moduri diferite:

  • Folosind cârlige
  • Suprascrierea șabloanelor WooCommerce
  • Cu scripturi CSS

Când este posibil, ar trebui să încercați să utilizați cârlige WooCommerce în loc să suprascrieți fișierele șablon. Este una dintre cele mai bune practici pe care WordPress le recomandă și este mai puțin riscantă. Cu toate acestea, pentru sarcini complexe care includ funcții sau obiecte, poate fi necesar să editați fișierele șablon. Dacă reușiți să combinați ambele tehnici, veți putea personaliza orice doriți în magazinul dvs.

În cele din urmă, aruncați o privire la tema copil completă care include toate exemplele de scripturi pe care le-am folosit în acest tutorial. Pentru mai multe informații despre cum să vă personalizați magazinul, consultați următoarele ghiduri:

  • Învață să personalizezi fișierele șablon WooCommerce
  • Cum să personalizați pagina magazinului WooCommerce
  • Personalizați butonul Adaugă în coș în WooCommerce
  • Cum să eliminați produsele legate de WooCommerce
  • Cum să editați WooCommerce Checkout (Codare și pluginuri)

Ați avut probleme în urma tutorialului nostru? Spune-ne în secțiunea de comentarii de mai jos și vom face tot posibilul să te ajutăm.