September 25, 2023

Redirect Elementor Loop Grid Items to Retail Sites with ACF

Play Video

How to redirect Elementor Loop Grid Items to Retail Sites with ACF to external retail sites like Amazon, eBay, or Vinted can be a good strategy if your products are exclusively available on these platforms. Instead of relying on multiple plugins or complex API integrations, you can achieve this using Advanced Custom Fields (ACF) and Elementor. In this tutorial, we’ll walk you through the process of setting up such redirects, ensuring a smooth user experience.

Preparing Your Product Images

  1. Gather images of the products you wish to redirect.
  2. Use a tool like Canva to standardize these images. For our example, we’ve used a 600×600 pixel canvas.
  3. Upload these images to your WordPress media library.

Setting Up Advanced Custom Fields

  1. Install and activate the ACF plugin from the WordPress repository.
  2. Navigate to ACF in your WordPress dashboard and select “Field Groups.”
  3. Create a new field group. For our example, we named it “WooACF.”
  4. Add your first field as a text field and name it “Web Name” This will be the label or call-to-action for your redirect, like “Buy Now” or “See More.”
  5. Add another field, this time selecting the URL field type. Name it “Web URL” This is where you’ll input the external link to the retail site.
  6. Make sure to select ‘Post Type’ ‘is equal to’ ‘Product’ in the settings section.

Tip: Remember to set the post type to “Products” under settings. This ensures the custom fields appear in the WooCommerce product editor.

Adding Products with Redirects

  1. Go to the WooCommerce section and select “Add New Product.”
  2. Name your product and, in the custom fields section below, input the call-to-action in the “Web Name” field (e.g. “Buy Now”) and the external link in the “Web URL” field.
  3. Set the product image you prepared earlier as the featured image.

Displaying Products in Elementor

  1. Create or edit a page with Elementor.
  2. Add a loop grid widget to display your products.
  3. Create a template for the loop grid. This will define how each product appears in the grid.
  4. Add a container, then insert the product’s featured image and title.
  5. Add a dynamic heading or button. For the text, link it to the “Web Name” custom field. For the URL, link it to the “Web URL” custom field.

Note: You can style and position these elements as you see fit, ensuring they align with your website’s design.

Testing the Redirects

  1. Preview or visit the page you edited with Elementor.
  2. Click on the products that have external links.
  3. Ensure they redirect correctly to the respective retail sites.

Redirect Elementor Loop Grid Items – Conclusion

You just learned how to redirect Elementor loop grid items to external retail sites using ACF is a straightforward process that can enhance your website’s functionality. By guiding visitors to where they can purchase products, you provide a seamless shopping experience. Whether you’re showcasing products available on multiple platforms or highlighting exclusive items on specific retail sites, this method offers flexibility without the need for complex integrations.

Required Resources

WooCommerce Logo
Free Options
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.
Redirect Elementor Loop Grid Items to Retail Sites 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.