Listing Attributes on Listing Page One Per Row

General HivePress
1

Hello everyone,

Just posting something that may help anyone that wants to display one attribute per row on a listing page if you are using the primary/secondary/ternary attributes…

i just replaced commas with line breaks with plugin WPcode on Footer section

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.hp-listing__attribute span').forEach(span => {
      if (span.textContent.includes(',')) {
        span.innerHTML = span.textContent
          .split(',')
          .map(item => item.trim())
          .join('<br>');
      }
    });
  });
</script>

just the first attribute is not accepting a line break even when on ‘‘display ’’ settings of each attribute i have input:

%icon% %label%:  <span> <br> %value% </span>
2

Tried this and its ok now, but if you have other listing attributes they ll also get affected (e.g. manual address attribute)

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.hp-listing__attribute span').forEach(span => {
      // Split by commas and trim items
      const items = span.textContent.split(',').map(item => item.trim());
      // Join items with <br> before each item
      span.innerHTML = '<br>' + items.join('<br>');
    });
  });
</script>
3

Hi @Christos,

This doesn’t sound like the best approach, as like you’ve since found out yourself, it’ll happen in other places and cause weird formatting issues.

Try this instead. In the Display field enter:

%icon% %label%:<br>%value%

If you still want more spacing:

%icon% %label%:<br><br>%value%

The

<br>

part causes a line break.

I hope this helps!

Cheers,
Chris :victory_hand:

2 Likes
4

Hello, thanks for your answer!!

I tried this before but when a listing attribute is listed as

Label: A,b,c

It will then be

Label:

A,b,c

With your approach on display…

Where with this script it displays

Label:

A

B

C

Still if you have a suggestion maybe css i am open to it, since i don’t know much abou code and if scripts are more heavy on the site

7

Hi,

If you mean adding the format after each option within the attribute and not after the label, unfortunately, this feature is not available yet, since options are currently comma-separated. We plan to add this functionality in the next HivePress update.

1 Like
8

It’s ok i have this for now thanks!! i tried to paste earlier on my reply the code i used, but it wouldnt appear, i just found out i need to use ``` for code on the forum

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.hp-listing__attribute span').forEach(span => {
      // Split by commas and trim items
      const items = span.textContent.split(',').map(item => item.trim());
      // Join items with <br> before each item
      span.innerHTML = '<br>' + items.join('<br>');
    });
  });
</script>
1 Like
9

Thanks for sharing the solution!
It would be helpful for our community.

1 Like