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:
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.