Can I display specific WooCommerce Attributes in a layout?

Loops & Logic
1

Hi there,

I have WooCommerce variable products set up with the following attributes – Type, Strength, Flavours and Size.
In particular, I would like to be able to display the content of the Flavours attribute in a “Best Sellers” layout. I am using Beaver Builder Product Grid Module with a custom layout (which enables me to add custom content and shortcodes).

This is as far as I have got…

<Loop type=woo_product product_type="variable"> <Field pa_flavours> </Loop>

but this doesn’t return anything.

I would be grateful for any direction as to how to display the current variation attribute (if it is indeed possible)

2

Hello,

Thank you for the question. It’s kind of a tough one to answer/solve, but it helps me see what might be missing from the plugin and its documentation.

About Beaver Builder’s Product Grid module - its “custom layout” field supports regular HTML and shortcodes, but not dynamic tags provided by Loops & Logic. (In other words, L&L doesn’t yet integrate with the field specifically.)

You can use the [template] shortcode (documented here) to load from the Template post type in the admin. So, it’d be necessary to:

  • Create a template post
  • Load it in the custom layout, like: [template id=7]

Since all you need is to show a product attribute, it would be nice if the shortcode also supported putting a template directly in its inner content, like [template]..[/template]. It should be easy to add this feature, I’ve made a note of it.

About the loop type woo_product, it’s provided by a separate add-on called Loops for WooCommerce, which is not publicly released yet. It’s also planned to be a premium product, like the other add-ons for third-party plugin integrations. So, that should be made clearer in its documentation. (We will likely do a beta testing phase of these add-ons soon.)

That said, the L&L core plugin should be capable of handling any post type and field, at least as “raw” values.

Since the Product Grid module already creates a product loop to render the custom HTML layout for each product, I believe just the Field tag is enough to display the product attribute.

Trying this on a local site, I see that product attributes are in a field called attributes, which is a “map” (associative array). Each attribute is inside of it as a “subfield”. That would be accessed like this:

<Field attributes field=pa_flavors />

…Hmm, I see that the above doesn’t work as expected. Looking at the attributes field itself:

<Field attributes />

This shows something like: {"pa_flavors":{}}.

Well, it looks like product attributes need special processing, and cannot be accessed as raw values. Too bad, it seemed so close!

OK, I’ve made a note to look into it deeper. We’ll probably need to add support for product attributes in the add-on, Loops for WooCommerce.

1 Like
3

For now, it can be solved with a custom shortcode in functions.php.

add_shortcode('product-attribute', function($atts) {

  $product = wc_get_product();
  if (empty($product)) return;

  $name = isset($atts[0]) ? $atts[0] : '';
  if (empty($name)) return;

  return $product->get_attribute('pa_' . $name);
});

It can be used like: [product-attribute flavours]

1 Like
4

Hi Eliot,

Thank you for the detailed post. Much appreciated.

I realised that I still had CCS installed on the site and I gave it a try, using the following worked within the custom layout in the Product Grid module…

[content taxonomy=pa_flavours]

I understand totally about the premium add-ons for Loops & Logic, looking forward to seeing what options are available in the future.

Best,
Craig

5

Awesome, thank you for that. Will give that a try on a staging site and hopefully that would be a good way forward using Loops & Logic.

1 Like
6

It’s funny that CCS was able to solve it somehow.

I see, the product attribute can be accessed as a taxonomy, I didn’t realize that.

I’ve noted the link to this discussion thread, so when we have better support for product attributes, I’ll be sure to let you know.

1 Like
7

Reviving an old topic here, but I thought I’d mention that I’m fairly certain one could use the L&L taxonomy_term loop in the same way: <Loop type=taxonomy_term taxonomy=pa_flavours post=current><Field title /></Loop>

WooCommerce creates attributes as custom taxonomies in the format pa_slug and for the most part they work the same way as any other taxonomy.

1 Like