Show & Hide Buttons in the Elementor Loop Grid with ACF

Learn how to show and hide buttons in your Elementor Loop Grid using Advanced Custom Fields (ACF). This tutorial will walk you through the process of setting up ACF fields and integrating them with your Elementor Loop Grid to control button visibility.

Prerequisites

Please make sure you have the following installed and activated:

• Elementor (Pro)
• Advanced Custom Fields

Understanding the Basics

Before diving into the steps, it’s important to understand what we’re dealing with. Advanced Custom Fields is a WordPress plugin that allows you to add custom fields to your WordPress edit screens. These fields can be anything from text boxes to checkboxes and URLs. For this tutorial, we’ll be using ACF’s URL and checkbox fields.

Tip: If you’re new to ACF, you can learn more about its fields, functions, actions, and filters here.

Setting Up ACF Fields

1. Navigate to Custom Fields > Field Groups in your WordPress dashboard.
2. Create a new field group and add two URL fields and two checkbox fields. Name them as follows:
   • URL Fields: book_resort_url, book_flight_url
   • Checkbox Fields: book_resort_complete, book_flight_complete
3. Set the checkbox fields to be required and have choices of “Yes” or “No”.

Integrating ACF with Elementor

1. Open your Elementor Loop Grid template.
2. Add buttons where you want them to appear.
3. Go to the button settings and find the ‘Link’ option.
4. Select the dynamic tag icon and choose the corresponding ACF URL field for each button.

Controlling Button Visibility

1. Navigate to the ‘Advanced’ tab of your button.
2. Insert a dynamic tag in the CSS Class field and select the corresponding ACF checkbox field.
3. Add custom CSS to hide the button if the checkbox field is set to “No”:

   /* Custom CSS */
   .no { display: none; }
   

Note: The .no class will hide the button if the ACF checkbox field is set to “No”.

Show & Hide Buttons in the Elementor Loop Grid with ACF – Conclusion

By following these steps, you can easily control the visibility of buttons in your Elementor Loop Grid using Advanced Custom Fields. This method is efficient and doesn’t require any additional plugins or complex code.