Display URL attribute as a button

Hi. I added an attribute for the add listing like phone number and a website. Is it possible to make it a button on the front end instead of a hyperlink? For example, they put a URL on the website attribute. Instead of having it look like “icon + hyperlink”, is there a way I can make it into a button? Like a button that has “visit website” in the center instead of a hyperlink. Thank you.

Please edit this URL attribute in Listings/Attributes and set this Display Format Style the URL attribute as a button (display format) #hivepress #attributes · GitHub You can also try the same format for the Phone attribute, but set tel:%value% in the link href.

3 Likes

Thank you, it works perfectly. How about positioning all the attributes to the left or right? Is this one possible?

Nevermind, I just saw this CSS code

.hp-listing--view-block .hp-listing__attributes--secondary .hp-col-lg-6,
.hp-listing--view-page .hp-listing__attributes--secondary .hp-col-lg-6 {
    flex-basis:100%;
    max-width:100%;
}

But the problem now is that the button stretches too much. Is there a way to reduce the width? I tried removing the hp-button--wide, replaced the wide with pixels or in percentage in the original code but it makes the size relative to the text. I want it to have a specific width. Thank you.

Hi, again! How do I change the “Reply to listing” in the listing page to “Contact %listing.name%”? I tried Loco Translate but it seems like they don’t allow using tokens in here. Thank you.

Please try targeting this button via CSS, and set its max-width in pixels, or a percentage:

.hp-listing--view-page .hp-listing__attributes--secondary .button {max-width:100px}

Changing the message button label and adding the current listing vendor name is possible, but this would require customizations (overriding this template part via a child theme Customizing Templates I HivePress Developer Docs - YouTube).

I just watched the video and it seems like he’s using a software to access the template. How do I access the template file?

Sorry, this is a developer-level tutorial, if you’re not familiar with code changes I recommend hiring a freelancer if extra features or advanced changes are required https://fvrr.co/32e7LvY

It’s possible to edit code via the WordPress plugin or theme editor directly in the dashboard (in Appearance/Editor and Plugins/Editor), or locally (to create a child theme, copy template files, etc).

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.