Dacă dorești să afișezi un mesaj personalizat în pagina de coș din WooCommerce, acest tutorial te va ghida pas cu pas pentru a face acest lucru. Vei adăuga un mesaj care își informează clienții că trebuie să adauge produse în coș în valoare minimă de 100 lei pentru a beneficia de livrare gratuită. De asemenea, mesajul va avea un design personalizat folosind CSS.
Pasul 1: Adaugă funcționalitatea prin PHP
Mai jos este codul complet care afișează mesajul personalizat în pagina de coș. Acesta verifică valoarea totală a coșului și afișează un mesaj dacă suma totală este mai mică de 100 lei.
// Adaugă mesaj personalizat în coș
add_action( 'woocommerce_before_cart', 'custom_cart_message' );
function custom_cart_message() {
$cart_total = WC()->cart->get_cart_contents_total();
if ( $cart_total < 100 ) {
echo '<div class="custom-cart-notice">';
echo '<p>Adăugați produse de minim 100 lei pentru a beneficia de livrare gratuită!</p>';
echo '</div>';
}
}
// Adaugă CSS pentru mesajul personalizat
add_action( 'wp_footer', 'custom_cart_message_css', 100 );
function custom_cart_message_css() {
if ( is_cart() ) { // Aplică CSS doar pe pagina de coș
echo '<style>
.custom-cart-notice {
background-color: #ffffff;
border: 2px solid red;
color: #856404;
padding: 15px;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>';
}
}
Pasul 2: Explicația codului
1. Adăugarea mesajului:
Funcția custom_cart_message
este conectată la acțiunea woocommerce_before_cart
. Aceasta verifică valoarea totală a coșului folosind metoda WC()->cart->get_cart_contents_total()
. Dacă valoarea este mai mică de 100 lei, afișează un mesaj personalizat într-un container HTML cu clasa custom-cart-notice
.
2. Adăugarea stilului personalizat:
Funcția custom_cart_message_css
inserează CSS în pagina doar dacă utilizatorul se află pe pagina de coș (is_cart()
). Stilurile adăugate includ un fundal alb, o bordură roșie, colțuri rotunjite și o umbră subtilă pentru un aspect elegant.
Pasul 3: Cum să adaugi acest cod pe site-ul tău WordPress
- Folosește pluginul Code Snippets:
- Instalează și activează pluginul Code Snippets.
- Creează un snippet nou, adaugă codul de mai sus și salvează-l.
- Direct în fișierul functions.php:
- Dacă nu dorești să folosești un plugin, poți adăuga codul direct în fișierul
functions.php
al temei copil (child theme). - Evită să modifici tema principală, deoarece aceste modificări vor fi pierdute la actualizări.
- Dacă nu dorești să folosești un plugin, poți adăuga codul direct în fișierul
Rezultatul final
Când valoarea totală a coșului este sub 100 lei, utilizatorii vor vedea următorul mesaj pe pagina de coș:
Adăugați produse de minim 100 lei pentru a beneficia de livrare gratuită!
Mesajul este stilizat cu un fundal alb, bordură roșie, colțuri rotunjite și text evidențiat, pentru a atrage atenția într-un mod elegant.
Concluzie
Acest snippet este o modalitate excelentă de a îmbunătăți experiența utilizatorului și de a-i îndemna să adauge mai multe produse pentru a beneficia de livrare gratuită. Personalizează textul și stilurile după preferințele tale pentru a se potrivi cu designul site-ului tău.