Elementor Rating With Acf Number Field

Caroline Mae

2 min read

·

01-01-2025

3

0

Share

Integrating a rating system into your WordPress website can significantly enhance user engagement and provide valuable feedback. This tutorial will guide you through the process of displaying a rating based on a number field created using Advanced Custom Fields (ACF) within an Elementor page. We'll focus on a clean, effective solution.

Prerequisites

Before we begin, ensure you have the following installed and activated:

• WordPress: A properly functioning WordPress installation.
• Elementor: The popular page builder plugin.
• Advanced Custom Fields (ACF): A powerful plugin for creating custom fields.
• ACF Number Field: You'll need to have created a number field within ACF. Let's assume this field is named rating.

Creating the Elementor Template

1. Create a new page or edit an existing one using Elementor.
2. Add a Section: Start with a basic section to contain your rating display.
3. Add a Custom HTML widget: This widget offers the flexibility to integrate custom code.
4. Insert the Code: Paste the following PHP code snippet into the Custom HTML widget:

<?php
  $rating = get_field('rating');
  if( $rating ):
    echo '<div>';
    for($i = 1; $i <= 5; $i++){
      $class = ($i <= $rating) ? 'full' : 'empty';
      echo '<i class="fas fa-star '.$class.'"></i>';
    }
    echo '</div>';
  endif;
?>

Explanation:

• get_field('rating'): This retrieves the value from your ACF number field named 'rating'.
• The for loop iterates five times (for a 5-star rating system).
• The conditional statement ($i <= $rating) assigns the class full to stars up to the rating value, and empty for the rest. You'll need to style these classes (see below).
• <i class="fas fa-star"></i>: This uses Font Awesome's star icon. Ensure Font Awesome is included in your theme or added separately.

Styling the Rating

You'll need to add CSS to style the full and empty stars. The easiest way is using Elementor's custom CSS feature. Add the following CSS to your Elementor page's custom CSS area:

.full {
  color: gold; /* Or your desired color */
}

.empty {
  color: lightgrey; /* Or your desired color */
}

Adjust colors as needed to match your website's design.

Important Considerations

• Error Handling: The provided code includes a basic check (if($rating)) to prevent errors if the rating field is empty. You might want to add more robust error handling for production environments.
• Font Awesome: Ensure Font Awesome is correctly included in your theme or added via a plugin.
• Alternative Icons: You can easily replace Font Awesome's star icon with any other icon set you prefer. Just modify the HTML accordingly.
• Dynamic Content: This method dynamically pulls the rating from your ACF field, ensuring it's always up-to-date.

This comprehensive guide provides a functional and easily customizable solution for displaying ratings from an ACF number field within your Elementor pages. Remember to adjust the code and CSS to fit your specific needs and design preferences.