[Support request] Apply theme button css class to shortcode in elementor

[Rachel]

Hi, I have added a shortcode for an external URL link to a page using Elementor.
I want to style the shortcode like the GeneratePress theme buttons I have on the site.
How can I do this? If I have to create a custom css class, how can it use the styles already set up for my buttons in the theme customise section?
Thanks!

[Leo]

Hi there,

Hmm I’m not sure if that’s possible. Usually Elementor contents overwrites the theme settings and not other way around.

You could try adding button as CSS class but I’m not sure if that would work.

If not then you should be able to style Elementor buttons however you want using Elementor.

Let me know if this helps 🙂

[Rachel]

I can’t seem to add shortcode to an elementor button, which is why i thought I would do it the other way around and apply a class to shortcode instead. You are right that applying the button class doesn’t bring the generatepress style through..any other suggestions? I can’t think how else to do it.

[Leo]

I assume you can style Elementor buttons within Elementor.

Have you checked with their support?

[Rachel]

I have tried posting the question a number of times in the Elementor community groups with no response. As I don’t have Elementor Pro they don’t seem to offer any support so can’t contact them directly. I was hoping I could do it within GeneratePress, but if not possible i will park it for now. Thanks.

[Leo]

If you want to use GP’s button, you can add an HTML widget and adding a link with the GP button class:
<a class="button" href="URL FOR YOUR BUTTON">Your button text</a>

[Rachel]

Hi Leo, the problem is I can’t do that as it is not a simple URL – it is a shortcode with data settings associated with it that need to be applied when clicking on the button.

The elementor button settings only allows a simple URL like you indicate above for an html widget. I figured the only way around it was to use the shortcode widget in Elementor and style it like my generatepress buttons. But I don’t know how to do that!

[David]

Hi there,

can you point us to the ‘shortcode button’ and then we can take a look at the styling.

[Rachel]

Hi, the shortcode I need to use is as follows (modified to remove identifying info):
[easyazon_link identifier=”abcd” locale=”US” tag=”affiliateid-20″]Check Price[/easyazon_link]

The text markup is: Check Price

I want to be able to place either of these codes into a button that is styled to match my site. I know I can style a button in Elementor, but cannot work out how to add a shortcode or the code above into a button in either Elementor or GeneratePress..

[David]

So this is the EasyAzon plugin and persumably the amazon affiliate link buttons on your site that tou want to restyle?

[Rachel]

Yes.

[Rachel]

I am wondering whether I need to create a custom class for a button in GP, then use that class in a html widget in Elementor as Leo mentions above..

[David]

Hmmm… tricky, all of the EasyAzon links use the same .easyazon-link class, whether they are a Title, Check Price of the Buy now image button.

The Buy Now buttons use an image, with no label, so styling them would be tricky.
If you could add a class to the TablePress column then we could use that to target those Check Price links independently.

But it may be worth speaking with EasyAzon and see if their shortcodes can accept a CSS Class as one of their arguments, then we could easily provide CSS To target them. Let me know.

[Rachel]

I have asked easyazon about the buttons and they don’t currently provide an option to style them differently.
They advised it is easy to get on Amazon’s bad side with custom buttons, so perhaps I need to accept the nasty orange buttons for now 🙂 Thanks for your help with trying to find a solution – much appreciated.

[David]

i can believe that. sorry we couldn’t be of more help 🙂

[Author]

Posts