Customise embedded buy button + options

Solved
Highlighted
Tourist
5 1 0

I would like to know if it's even possible and if so, how to make the following changes to the embedded buy button code so that I can achieve my desired layout/design as shown below. I am capable of making changes in the code, would just need direction as to what to add/edit:

  • Float the options dropdown and buy button with quantity 
  • Add text to the options dropdown 'Select your size'
  • Change the border of the options dropdown and the quantity field to black with no border radius
  • Change the arrow on the options dropdown to black
  • Increase padding on the options dropdown by a few pixels so it matches the height of the Buy now button
  • Ability to use the same font as I am using on my website (it isn't a Google font)

 

desired_layout.pngThanks in advance for all tips and assistance! :)

0 Likes

Hello
Can you share your site url? so that i can check and let you know.

Want to modify or custom changes on store hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Content Writer | Digital Marketing | SEO Expert | Site Optimization | Web Design | Web Development
0 Likes
Tourist
5 1 0

Thanks, I made a test page with just the component on it :)

 

https://www.siaeva.com/uncategorized/test/

0 Likes

Hello ,
You want show like this shown in below image....

border-radius.jpg

Want to modify or custom changes on store hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Content Writer | Digital Marketing | SEO Expert | Site Optimization | Web Design | Web Development
0 Likes
Tourist
5 1 0

Hi! No, that is not correct. I want it as per the image I shared above :)

0 Likes
Tourist
5 1 0

FYI I took down the URL now because I don't want it to be visible to the outside world.

0 Likes

Success.