Redirect Elementor Loop Grid Items to Retail Sites with ACF

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.