Is there's a way to add multiple buttons in product card?

Developer help
1

Hello everyone,

Need your help to add multiple buttons on product card, does some one know how to do that?

ghost_multiple buttons
ghost_multiple buttons704×684 76.2 KB

like in the above photo need to add two more buttons in the red marked areas. if some knows easy way to do that please do let me know. Appreciate your help.

Thank you!

  • Ghost 5.46.1
2

if anyone knows appreciate your help on this.

3

One option would be to create additional buttons just below the product card with the Ghost editor, and then write some javascript (or jQuery would be easier) to move the added buttons into the card.

4

Hi Cathy,

Thank you so much for you reply, it would be great if you can share the Jquery if you know since my knowledge in that very low.

Thank you!

5

If anyone here knows how to add that additional buttons function to the product card please do let me know how to do that, what code should i inject for this and how can i get this done? really appreciate your help.

Thank you!

6

Sorry for not responding sooner. I’ve been busy with paid work. You’d need to find the buttons and the product card, and then you’d need to insert the buttons into the product card itself. I don’t have code that does exactly this, although I’ve written code that does similar things for clients in the past. For example, here’s a bit of code that takes adjacent buttons and puts them into the same div, so that they can be on a row together (with appropriate styling of .button-group):

  <script>
    const e = '.kg-button-card';
    $(e).not(e + '+' + e).each(function () {
      $(this).nextUntil(':not(' + e + ')').addBack().wrapAll('<div class="button-group" />');
    });
  </script>