I added a new button via shortcode in the WooCommerce / WordPress product page description. I would like to format it in the same layout of the button (including the hover effect).
The "Configure Now!" is the second button, which needs to be visually equal to the "Buy" button in my template.
Edit:
This is the code that the "Popup" plugin provides for this function:
<a href="javascript:void(0)" class="sg-show-popup" data-sgpopupid="1" data-popup-event="click">Configure Agora!</a>
You can solve this using jQuery!
jQuery('.sg-show-popup').addClass('button');
With this code, you select all items that have class .sg-show-popup and add to each item in that list the class button . Just add this script to your theme, cutting off the need to edit the plugin.
Well, I found a "palliative" solution. I say this because I do not know if it's the right way.
I've edited the plugin file that inserts the class into the item. Specifically this snippet of code:
if(isset($args["wrap"])) {
echo "<".$args["wrap"]." class='sg-show-popup ' data-sgpopupid=".@$args['id']." $attr data-popup-event=".$eventName.">".$content."</".$args["wrap"]." >";
} else {
echo "<a href='javascript:void(0)' class='sg-show-popup button' data-sgpopupid=".@$args['id']." $attr data-popup-event=".$eventName.">".$content."</a>";
}
}
I entered the same class that the theme uses to stylize the button. A class "button".
Is there any other way to do it, or is it okay to keep it that way? The problem here is that I will need to edit this file every time the plugin is updated. = /
If you prefer, you can simply add the class button to the direct element in the html.