Add listing category dropdown description below label

[sowickesited]

Is it possible to add a description to the category dropdown on the listing submit details page?

I have added filed descriptions for images, location, tags, etc using this functions.php filter.

But inspecting the code for the select dropdown, it doesn’t appear like a label description exists.

I understand from this post in July, 2022 that it’s not a current feature to add the description in the dropdown. But what about adding a generic description above the select dropdown and below the label like I’ve done for other form fields?

[andrii]

Hi,

Unfortunately, there’s no such feature, it would require a custom implementation. If customizations are required for your site, please try customizing it using the collection of code snippets Search · user:hivepress · GitHub and other developer resources, or consider hiring someone for custom work https://fvrr.co/32e7LvY

[sowickesited]

Posting my solution below as it might be helpful to other users.

I didn’t find a way to add a functions.php filter, but I used the ::after pseudo-element in CSS to inject a label description for the dropdown select field.

There are a couple ways to display the description after the label with a line break. I found ‘display:flex’ or ‘display:table’ to work best for my needs. You can find more info from this CSS-Tricks article.

.hp-form__field--select label.hp-form__label span {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.hp-form__field--select label.hp-form__label span::after {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	content: "Add your desired dropdown description text here";
}

You may need to also adjust the font-size, color, or other CSS elements of your ‘span’ to match your other form description text.

Just a note, there are a couple disadvantages to this solution:

• It’s not supported in older browsers
• It’s not generally supported by screen readers

[sowickesited]

The CSS solution I posted above works as long as you don’t have other dropdown select fields in the rest of the form. Because there is no specific CSS class assigned to the category dropdown field, the CSS solution I posted will post the ‘content’ after every dropdown label in the form.

I messed around with the functions.php file and found this solution to work better…

add_filter(
  'hivepress/v1/forms/listing_submit',
  function( $form ) {
    if ( isset( $form['fields']['categories'] ) ) {
      $form['fields']['categories']['description'] = 'Add your desired dropdown description text here';
    }
    return $form;
  },
  1000
);