Dacă ai un magazin online WooCommerce și dorești să afișezi un indicator vizual pentru evaluarea produselor, acest tutorial îți va arăta cum să implementezi o casetă de evaluare fără a utiliza un plugin suplimentar. Vom folosi o funcție PHP și un script JavaScript pentru a anima procentul de recomandare.

Vezi tutorialul pe YouTube 🎬

1. Adaugă codul în funcțiile temei WordPress

Pentru a adăuga această funcționalitate, editează fișierul functions.php al temei active și inserează următorul cod:

add_action('woocommerce_single_product_summary', 'micadan_display_review_evaluation', 7);

function micadan_display_review_evaluation() {
    global $product;
    $rating_count = $product->get_rating_count();
    $average      = $product->get_average_rating();

    if ($rating_count > 0) {
        $recommendation_percentage = round(($average / 5) * 100);
        echo '<style>
                .micadan-review-box {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background: #f9f9f9;
                    padding: 5px 8px;
                    border-radius: 5px;
                    font-size: 12px;
                    font-weight: 500;
                    color: #222;
                    margin-top: 5px;
                    text-align: center;
                    box-shadow: 1px 1px 2px rgba(0,0,0,0.08);
                    transition: all 0.2s ease-in-out;
                    cursor: pointer;
                    max-width: 200px;
                }
                .micadan-review-box:hover {
                    background: #ffffff;
                    transform: scale(1.02);
                    box-shadow: 2px 2px 6px rgba(0,0,0,0.12);
                }
                .micadan-icon {
                    font-size: 14px;
                    margin-right: 3px;
                }
                .micadan-review-text {
                    font-size: 10px;
                    font-weight: 400;
                    color: #777;
                    margin-top: 2px;
                }
              </style>
              <div class="micadan-review-box">
                <div>
                    <span class="micadan-icon" id="micadan-icon">❌</span>
                    <strong id="micadan-percentage">0%</strong> - <span id="micadan-label">Produs slab</span>
                </div>
                <div class="micadan-review-text">Evaluat pe baza recenziilor</div>
              </div>

              <script>
                document.addEventListener("DOMContentLoaded", function() {
                    var percentageText = document.getElementById("micadan-percentage");
                    var iconElement = document.getElementById("micadan-icon");
                    var labelElement = document.getElementById("micadan-label");
                    var targetPercentage = ' . esc_html($recommendation_percentage) . ';
                    var currentPercentage = 0;

                    function updateLabelAndColor(percentage) {
                        if (percentage <= 20) {
                            percentageText.style.color = "#e74c3c";
                            iconElement.innerText = "❌";
                            labelElement.innerText = "Produs slab";
                        } else if (percentage <= 50) {
                            percentageText.style.color = "#e67e22";
                            iconElement.innerText = "⚠️";
                            labelElement.innerText = "Produs decent";
                        } else if (percentage <= 70) {
                            percentageText.style.color = "#f1c40f";
                            iconElement.innerText = "👍";
                            labelElement.innerText = "Produs bun";
                        } else if (percentage <= 90) {
                            percentageText.style.color = "#28a745";
                            iconElement.innerText = "✅";
                            labelElement.innerText = "Produs foarte bun";
                        } else {
                            percentageText.style.color = "#2ecc71";
                            iconElement.innerText = "🏆";
                            labelElement.innerText = "Produs excelent";
                        }
                    }

                    var interval = setInterval(function() {
                        if (currentPercentage < targetPercentage) {
                            currentPercentage++;
                            percentageText.innerText = currentPercentage + "%";
                            updateLabelAndColor(currentPercentage);
                        } else {
                            clearInterval(interval);
                        }
                    }, 15);
                });
              </script>';
    }
}

2. Cum funcționează codul?

✅ Afișează un indicator vizual al evaluării produselor pe baza ratingului WooCommerce.
✅ Animație progresivă a procentului de recomandare, de la 0% la valoarea reală.
✅ Schimbă culoarea și simbolul în funcție de evaluare pentru o mai bună interpretare vizuală.
✅ Compatibil cu orice temă WooCommerce, fără pluginuri suplimentare.

🎯 Testează-l acum și îmbunătățește experiența utilizatorilor tăi!