Join

Add Listing Type Name to Listing Preview Cards

Don't want to mess with code snippets? Request for this to be a feature of MyListing Pro.

Instructions

  1. Create a new CSS code snippet.
  2. Copy the contents of code snippet below.
  3. Paste the contents into your code snippet.
  4. Review any notes that I’ve provided.
  5. Save and enable the code snippet.
  6. Test.

Snippet

By default, MyListing does not provide a way to show Listing Types as a taxonomy on Listing Preview Cards. Until they bring this feature to the core functionality of the theme, here’s an easy way to do it.

MyListing Websites With 1 Listing Type

In the example below, let’s assume you have a Listing Type named ‘Cars.’ Adjust the highlighted lines below to match the name of your Listing Type.

.lf-item-container.type-cars:after {
    content: 'Cars';
    height: 40px;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-weight: 700;
    font-size: .813rem;
}

MyListing Websites With Multiple Listing Types

In the example below, let’s assume you have Listing Types named ‘Cars’ and ‘Boats.’ Adjust the highlighted lines below to match the name of your Listing Type.

.lf-item-container.type-cars:after {
    content: 'Cars';
}
.lf-item-container.type-boats:after {
    content: 'Boats';
}
.lf-item-container.type-cars:after,
.lf-item-container.type-boats:after {
    height: 40px;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-weight: 700;
    font-size: .813rem;
}