Un mod excelent de a atrage atenția clienților și de a crește conversiile în magazinul tău WooCommerce este afișarea unui mesaj personalizat despre stocul disponibil direct pe pagina produsului. Acest tutorial te va ghida pas cu pas pentru a implementa această funcționalitate.
Ce face acest cod?
- Verifică stocul produsului:
- Dacă stocul este limitat (în exemplu, sub 5 unități), afișează un mesaj de urgență: „Grăbește-te! Doar X bucăți rămase în stoc.”
- Dacă stocul este suficient, afișează un mesaj liniștitor: „Avem suficiente bucăți în stoc. Comandă acum!”
- Dacă produsul nu este disponibil, afișează mesajul: „Acest produs nu este momentan disponibil.”
- Pluralizarea cuvintelor:
- Mesajul se ajustează automat pentru „bucată” (singular) sau „bucăți” (plural).
- Design atractiv:
- Stiluri personalizate pentru mesaj (fundal, bordură, text accentuat).
Cod complet pentru funcționalitate
Adaugă următorul cod în site-ul tău WordPress:
add_action( 'woocommerce_single_product_summary', 'custom_stock_message', 20 );
function custom_stock_message() {
global $product;
// Obține cantitatea din stoc
$stock_quantity = $product->get_stock_quantity();
// Dacă produsul este gestionat prin stoc
if ( $product->managing_stock() && $stock_quantity ) {
$unit = ( $stock_quantity == 1 ) ? 'bucată' : 'bucăți'; // Singular/plural
if ( $stock_quantity < 5 ) {
echo '<div class="custom-stock-message"><p>⚠️ Grăbește-te! Doar <strong>' . $stock_quantity . '</strong> ' . $unit . ' rămase în stoc!</p></div>';
} else {
echo '<div class="custom-stock-message"><p>✅ Avem suficiente ' . $unit . ' în stoc. Comandă acum!</p></div>';
}
} else if ( !$product->is_in_stock() ) {
echo '<div class="custom-stock-message"><p>❌ Acest produs nu este momentan disponibil.</p></div>';
}
}
// Adaugă CSS pentru mesajele personalizate
add_action( 'wp_footer', 'custom_stock_message_css' );
function custom_stock_message_css() {
if ( is_product() ) { // Aplică CSS doar pe pagina produsului
echo '<style>
.custom-stock-message {
margin-top: 10px;
padding: 10px;
border-radius: 5px;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.custom-stock-message p {
margin: 0;
}
.custom-stock-message strong {
color: #ff6f61;
}
.custom-stock-message p:first-child {
background-color: #fffbcc;
border: 1px solid #ffd700;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
</style>';
}
}
Explicația codului
1. Funcționalitatea principală:
Codul verifică dacă produsul:
- Este gestionat prin stoc.
- Are mai puțin de 5 bucăți disponibile, caz în care afișează un mesaj de urgență.
- Este epuizat, afișând un mesaj corespunzător.
2. Pluralizarea:
Codul folosește o verificare simplă pentru a afișa „bucată” sau „bucăți”, în funcție de stocul disponibil.
3. CSS pentru design:
Mesajele au un aspect vizual atractiv:
- Fundal galben deschis pentru a atrage atenția.
- Text evidențiat cu accente de roșu.
- Umbră subtilă pentru un efect modern.
Cum să implementezi acest cod?
1. Folosește pluginul Code Snippets:
- Instalează și activează pluginul Code Snippets.
- Creează un snippet nou, inserează codul de mai sus și salvează-l.
2. Adaugă direct în functions.php
:
- Copiază codul și inserează-l în fișierul
functions.php
al temei copil (child theme).
Notă: Folosește o temă copil pentru a evita pierderea modificărilor la actualizarea temei.
Rezultatul final
- Produs cu stoc limitat:
⚠️ Grăbește-te! Doar 1 bucată rămasă în stoc!
- Produs cu stoc suficient:
✅ Avem suficiente 10 bucăți în stoc. Comandă acum!
- Produs epuizat:
❌ Acest produs nu este momentan disponibil.
Concluzie
Acest snippet îmbunătățește experiența utilizatorului și poate crește conversiile prin crearea unui sentiment de urgență pentru produsele cu stoc limitat. Poți personaliza textul și culorile pentru a se potrivi cu designul magazinului tău.