How to change 'Buy it now' button to 'Inquire' in Studio theme?

[kyodong]

Just want one button and I want one button to show as ‘Inquire’ button instead of ‘Buy it now’ button

And when Inquire button has been made, I want it to lead to ‘Contact’ page.

Please take a look at the screenshot attached.

The theme I am trying to use is 'studio' by the way.

Please help anyone 😭

 

[pawankumar · Accepted solution]

Please replace custom css with 

.enquire-me-button-wrapper .button::before,
.enquire-me-button-wrapper .button::after {
  border-radius: initial;
}
.enquire-me-button-wrapper .button::before {
  outline: 2px solid grey;
  outline-offset: 2px;
}

Final result will be as i shown in screenshot 
Thanks!

[kyodong]

yes please precede on guiding me with details if possible straight away

[pawankumar]

Hi @kyodong 
Follow these steps
1. Disable dynamic checkout buttons

Uncheck "Show dynamic checkout buttons" this checkbox
2. Add a custom liquid block

Add it after Buy buttons block
3. Add this code 

<div class="enquire-me-button-wrapper">
<a class="button button--full-width button--secondary" href="/pages/contact">
            <span>Enquire me</span>
 </a>
          
</div>

in custom liquid block
4. Change href to your contact page and change "Enquire now" text to your desired text
Thanks!

[kyodong]

It worked except I get this now the inquire button looks too similar to 'Size' 'Material' & 'Status' ones, making it look like it might now be a button, do you know how to make it more like special button so it looks different with rest of them. I think looking square button (perhaps sharper edged ) with double border around it might make it distinguishable  do you think thats possible?

 

 

[pawankumar]

Paste this code in section's custom css

.enquire-me-button-wrapper .button::before,
.enquire-me-button-wrapper .button::after {
  border-radius: initial;
}

Click product information and in the bottom you will find custom css
Final button will look like this after adding that css

Thanks!

[kyodong]

I get this and see that the code is not applying as it should be according to your screenshot. Or have I possibly forgot something in the code?

Mine shows like this right now:

[pawankumar]

You have put it in wrong place.

In liquid code you have to put previous code of button and save it 

After that, you have to click product information section and in the bottom of the section, there is custom css section where you have to put css code.

Both 2 are separate places, one to put button code while other is to put custom css

[kyodong]

Thank you I found the proper place and had it fixed.

But now that I acheive this look, I see that the buttons tract more attention than the product/item image it self for it's got shape and filled in colors. 

Could you please look at my attachment? 😭

*Is there possibly, any way to make it look like as the attached?

Because that will be so much better looking on my site and I'd have nothing more to fix if I could achieve this type of look:.

 

[pawankumar · Accepted solution]

Please replace custom css with 

.enquire-me-button-wrapper .button::before,
.enquire-me-button-wrapper .button::after {
  border-radius: initial;
}
.enquire-me-button-wrapper .button::before {
  outline: 2px solid grey;
  outline-offset: 2px;
}

Final result will be as i shown in screenshot 
Thanks!

[kyodong]

everything went as planned thank you so much!

I'm just stuck on how to turn these black blocks to just white with black thin line (just thin single line) with text just black like the attachment.

 I've been searching and playing around quite a while under 'Theme settings' > 'Colors' > looking some Scheme options but still was unable to achive it.

If this could be done, it will be just cherry on top 😃

[kyodong]

Any insights anybody?

[pawankumar · Accepted solution]

Please replace custom css (Product information --> custom css) with this 

.enquire-me-button-wrapper .button::before,
.enquire-me-button-wrapper .button::after {
  border-radius: initial;
}
.enquire-me-button-wrapper .button::before {
  outline: 2px solid grey;
  outline-offset: 2px;
}
button {
  background: #fff;
  color: #000;
}
button::before,
button::after,
.product-form__input label {
  border-radius: initial;
}

It will not replace that green background, That is necessary because it is for selected option, if you will emit that as well then after option selection, it will not be highlighted if option is selected or not.
Final result will be like this after the change:

Thanks!

[kyodong]

Thank you!