Issue #182 Loop WP

Hi, {{first_name|friend}}. 👋

Welcome to Issue #182 of Loop WP!

Last week, it was about a new Address AutoComplete feature in WooCommerce 10.3, and I had a go at extending it!

This week, it’s a quick WooCommerce tutorial on a common feature I use for my Shopify clients, plus some bonus code!

Let’s go! 👇

🫠 Shopify has accordions as standard for PDPs (“Product Detail Pages”), and WordPress core is finally getting them.

The cool thing about these accordions in Shopify is that you can hook up dynamic data and use them on all product pages (with a single template), and some JavaScript to conditionally hide the accordion rows that don’t contain any data.

You don’t want PDPs with accordion rows and no data; that’s a poor user experience, so hide them.

You can do the same with WooCommerce as I recently had to do for a client. 👇

💡 The free version of ACF was used to create field groups for the dynamic data and add them to the product admin screen for this client.

The client uses Elementor on their website, so we use the Elementor Nested Accordion widget for the PDPs. **

✨ This widget is great, as you can put pretty much anything in it, including videos, which look great in accordions.

** (You need the Pro version to use dynamic data from custom fields and post types. If you are not using dynamic data, you should be able to use the free version of Elementor.)

✨ This is the crucial bit! We then use this code snippet to hide any accordion rows that contain no content.

Why is that important?

💡 The code can be added using the Elementor Code Editor (if you are using the Pro version of Elementor), a custom mu-plugin, the functions.php file or a free plugin like Code Snippets.

🚨 You don’t have to use Elementor; there are plenty of WordPress accordion solutions, including page builders and plugins, but you will need to tweak the original code.

I’ve included the ACF JSON file in the Gist. I’ve designed the Field Groups to be as compact in the backend as possible.

The toggles allow the content editors to be hidden by default, taking up as little space as possible in the WooCommerce product admin.

🚨 A quirk I discovered along the way is the structure of ACF fields and how Elementor can’t see supported fields if they are not “flat”.

Instead of toggles, I wanted a tabbed layout in the Product admin screen, but Elementor was having none of it! 🫠

For Elementor compatibility, you can’t wrap your flat fields inside a true ACF Group or Tab layout (because Elementor loses visibility to subfields in ACF Free).

I hope you found this tutorial/code helpful, {{first_name|friend}}, and I’d love to get your feedback for future content. 👇

🐌 It’s been a long time since I’ve made a tutorial for WooCommerce.

The last time was when this newsletter was called “WordPress Wednesdays”, and I coded a solution to make “Featured Products” sortable in the Product Admin screen.

That was back on May 31st, 2023, wow! If you don’t want to read about the code and why I created it (along with another solution), you can jump straight to the code (it still works).

WooCommerce is now seeking testers for the WooCommerce MCP Beta. You can find out more information on the developer blog, and make sure you check out the video below. 👇

That’s it for this week! 👋

This week's excellent and insightful WordPress News & Tips:

If you have a question about this email or WordPress, please reply, and I will respond as soon as possible.

👋 Until next time,

This image is an original illustration created for editorial use. The WooCommerce name and logo are trademarks of Automattic Inc. All trademarks, logos, and brand names are used here for illustrative and commentary purposes only. No affiliation or endorsement is implied.