October 17, 2023

Show & Hide Buttons in the Elementor Loop Grid with ACF

Play Video

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.


Please make sure you have the following installed and activated:

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.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Show & Hide Buttons in the Elementor Loop Grid with ACF
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.