Recommended Products Cards Grid using ACF Repeater and OxyMade

As part of the WPDevDesign site redesign that we are currently working on, we set up a "Resources" page that shows links to plugins that we recommend as a grid of cards.

Advanced Custom Fields Repeater was used for setting up custom fields like title, description for each product/item and these were output inside a card. Styling for elements of each card and the cards grid was done by adding OxyMade's utility classes.

We added

• random order on page load for the cards
• the ability to set mix-blend-mode multiply on for product logos that wouldn't blend with the background color
• the ability to disable selected rows so they won't be output

This members-only tutorial provides the steps to set up the above in Oxygen.

Step 1 - ACF Field Group

Install and activate ACF Pro.

If you would like to follow along or want the same fields for practice, here is the ACF export file.

You may ignore/delete the "WordPress Development" repeater field.

Step 2 - Populate Custom Fields

Edit the Page to which the field group is attached to and fill the data for as many rows as needed.

Step 3 - OxyMade

If you have not already, install and activate OxyMade. Add the framework in your Oxygen site.

Step 3 - Repeater Code

Edit the Page with Oxygen.

Add a Code Block. Add a class of w-full to make it 100% wide.

PHP & HTML: