Adding a button with Elementor

Hello @samlutostanski,

Thank you for using Direct Stripe.

1. If you define the Do not set styles option under the Styles settings tab in Direct Stripe settings page, the styles applied will be theme’s styles, in case it defines styles for <button> element

2. In the case you are not using the default editor or Gutenberg editor, you can add Direct Stripe buttons using a shortcode [direct-stripe value=”ds-999999999999″] ( edit the value ds-number with the Button unique ID number in button settings.

3. It is not possible.

Best wishes,

Nico

Hi Nico,

thanks for replying with this information! I have done as you suggested, but I still get the small grey button, not a button with theme setting.

Also I am not able to change the size of the button in any way?

Any suggestions?

thanks
sam

Hi sam,

Could you share a url of a page where you integrated a Direct Stripe button ?

For further styling than colour and corners, the button styles can be customized using CSS styles.

Nico

• This reply was modified 6 years, 5 months ago by Nicolas Figueira.

Just a thought: are you using insert shortcode element in Elementor? Shortcode is [direct-stripe value=”ds-1xxxxxxxxxx02″] so that theme’s button style is used? Have you tested different browsers?

Yes i have used the shortcode element in Elementor but the theme style isnt used.

I also cant edit the CSS – i have trying some styling in the additional css area but it doesnt update the button and i have copied the id tag from the button settings in the plugin.

Nico, here is the page: https://theholidayclubuk.com/premiummembership/#upgrade
the button is the small grey sign up button in the annual subscription box. Im trying to get it to look like the blue sign up buttons so i can replace them with the direct stripe ones

thanks for the help ??

Hello @samlutostanski,

I see the elementor button is an <a> element, so in order to reproduce the same styles we have two options :

1) Change the markup of Direct Stripe buttons using the ‘direct_stripe_button’ filter hook, ( there is an example at https://gist.github.com/New0/435f41907de2edd1292b1849c7d0456b ).
Let me know if you are interested and need further help with that solution.

2) Copy the styles used by elementor for the <a> element and apply it to Direct Stripe button :

.stripe-button-ds {
  line-height: 1em;
  color: #ffffff;
  background-color: rgb(8, 68, 164);
  border-radius: 10px 10px 10px 10px;
  padding: 4% 25% 4% 25%;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  font-size: 16px;
  width: auto;
  transition: all .5s;
  display: inline-block;
}
.stripe-button-ds:hover {
  background-color: #0844a4;
}

You can copy paste this styles in the customizer -> Custom CSS or a (child-)themes stylesheet.

I hope this will help.

Best wishes,

Nico

• This reply was modified 6 years, 5 months ago by Nicolas Figueira.
• This reply was modified 6 years, 5 months ago by Nicolas Figueira.
• This reply was modified 6 years, 5 months ago by Nicolas Figueira.

Hi Nico,

That is awesome thank you so much! definitely serious progress ??

I have added the css you gave me and tweaked the colour slightly to match. but one thing i still cant figure out, is how to make the button centered ??

what shall i add to the css?

and finally to confirm – this code will apply to all buttons from your plugin – and i just need to add the specific shortcode for the 3 different buttons created in your plugin?

thanks again
sam

Hello @samlutostanski,

To center the button, you can use :

.direct-stripe {
  text-align: center;
}

All this code will be applied to all direct-stripe buttons, if you want to target a button in particular, you can use the CSS ID option in the buton settings or using the unique ID of the button that is also applied as a CSS class.

Best wishes,

Nico

Nico you hero ?? thank you so much for your help! will leave a review on the plugin page

I’m glad I could help ! And thanks for the review, that helps.

Best wishes,

Nico

Hi Nico,

sorry for one more question, but i have added that code as you said and when in the customise view after adding the code it works fine and is centered. but when looking on the public site on other devices, it still aligns left.

Please can you have another quick look?
https://theholidayclubuk.com/premiummembership/

thanks again
sam

Hi @samlutostanski,

It’s probably a caching issue, hit Ctrl + F5 to reload the page without the browser’s cache ??

Best

hmm i have tried that yes, and tried incognito mode, and tried other devices that havent been on website before.

Does that page look ok for you with the buttons centered?

thanks

Yes, hitting Ctrl + f5 made the button to align center

https://screenshots.firefox.com/1Rl2UjfGKbxNxD3p/theholidayclubuk.com

Did you try to flush the cache from your caching system too ?

ah ok good as long as it works then ??

no i will try that and am sure it will be fine!

thanks again