Join our new community forum for support & discussion

Join Now

Home Support Themes ExpertHive Attributes Fomat spacing and line jumping

Attributes Fomat spacing and line jumping

  • Author
  • Alf


    Would it be possible for the attributes to be shown in the following way:
    – Top line: icon + label
    – Below: the different values, if possible: each value on a different line (like a list)

    Thank you very much.



    More info: This was for the Attributes shown in Primary.

    Related question: is there a way for the different attributes in Secoundary to be shown in different lines? (no need to separate the icon and heading, just show one attribute under the other)

    ihor developer


    1. Sorry, this would require customizing the attributes template part. If you’re familiar with PHP please try overriding the /listing/view/page/listing-attributes-primary.php template part (by placing it inside the child theme’s folder).

    2. This may be possible with CSS only:

    .hp-listing--view-block .hp-listing__attributes--secondary .hp-col-xs-12 {flex-basis: 100%;max-width: 100%;}


    Thank you for that part 1.

    Regarding point 1, is there no way to specify at least a line jump between the label and the values of an attribute?

    Right now it looks like this:

    In a more generic question: what can go inside the Display Format field (aside from %icon%, %label% and %value%)?

    Thank you.



    I found a way to separate the titles from the different values just by adding <br>:
    %icon% %label% <br> %value%

    This does the job for now.
    I will leave all the values in the same line, at least for now.

    Thank you!

    ihor developer

    @Alf You can also use any other listing attribute, for example %listing.something%, mixing different attribute values within the same format. Thanks for sharing the solution with the <br> tag.


    Thank you veyr much, gabetu

    Your solution looks great. But I am not skilled on JS yet.
    Can the code work on Code Snippets? Or do I need a Child Theme and adjust the configuration to run it?

    Also, which are the parameters I should customize in the code?
    I understand “hp-listing__attribute–your-attribute-1” and similar need to be changed for my attributes. But is there anything else?

    Thank you very much!

    ihor developer

    If you mean the CSS snippet above you can add it to Appearance/Customize/Additional CSS field. For PHP snippets, please try using this plugin A child theme is not required unless you want to override some template parts by copying them to the child theme folder.

    You can target any attribute via CSS using this class:

    .hp-listing__attribute--attributename { any styles here }

    Replace “attributename” with the attribute slug, for example if you name some attribute “Hourly Rate” its slug will be “hourly-rate”.



    I meant the JS part of the code Gabetu shares in his linked post:

    Do you think what he has done there can be achieved only with CSS?


    Hi @Alf,

    You can use the code snippets for testing custom code but for large projects I recommend using a child theme though.

    Let’s assume that you have created a select/checkboxes field type attribute called “Features” with “Option 1, Option 2, Option 3, etc.”

    1. In attribute Display Format you can use the string something like <h3>Features</h3><div id="<strong>yourdivid</strong>">%value%</div>

    2. The CSS code for displaying the list:

    /* Split string into ul */
    ul.features {text-align:left;list-style:none;padding-left:0;margin:10px 0 10px 0;columns:2;-webkit-columns:2;-moz-columns:2;column-gap:5px;}
    ul.features li {font-size:14px;color:#000000}
    ul.features li::before {padding-right:10px;content:'\2713';color:#1e73be;font-weight:bold}

    Please note that I’m splitting the list into 2 columns but you can use with:100% instead of columns.

    3. The JS code for splitting the string into list (this is a simplified version of the previous post):

    ( function( $ ) {
    'use strict';
    // First list
        return $('<ul class="features">').append($(",")).map(function() {
            return $('<li>').text(this).get();
    // Second list
        return $('<ul class="features">').append($(",")).map(function() {
            return $('<li>').text(this).get();
    } ( jQuery ) );

    Practically you can use this code for multiple attributes by duplicating the JS block for every div id containing the %value% of each attribute.

    Hope this will help you.


    Hmmm, I forgot to wrap the JS into code brackets, any chance to edit the post above ?


    Thank you very much for your help, Gabetu.

    Still not working, though. But I guess we are closer.

    I think there are some problems right at the first steps. The Display Format box is re-writen after I save and publish and the result is this:
    <h3>Features</h3><div id=&quot;<strong>yourdivid</strong>">%value%</div>

    I think some coding characters are not recognized within the Display Format box…

    As for the brakets, any special way to place them?
    I have added the code into a Code Snippet that looks like this:

    add_action( 'wp_head', function () { ?>
    	/* JavaScript code here */
    <?php } );

    I think the forum text editor changed the Display Format phrase and it looks ok again…
    in WordPress it looks like this:


    Sorry, the Display Format content should be only:
    <h3>Features</h3><div id="yourdivid">%value%</div>
    where you can use any name for yourdivid

    And the JS should be:

    ( function( $ ) {
    ‘use strict’;
    // First list
    return $('<ul class="features">').append($(",")).map(function() {
    return $('<li>').text(this).get();
Viewing 15 posts - 1 through 15 (of 15 total)

New Reply

This forum has been archived and is no longer accepting new posts or replies. Please join our new community forum for support & discussion.