Adding button under services

Dear,
On my website:

Www.PrimaveraP6.net

I have 6 services,

1: Intro to planning

2: Schedule and time management.

ETC ETC.

Now I want to add a button under each service.

Button name will be, "; "Learn more ", and than it will be re directed to details page.

Plz help me from where to add these?

I know there are links, that re direct to details page, but i also want to add a button.

Regards,

Ammar

Hello Ammar,

To achieve it, try doing the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

  if( $('.widget_sydney_services_type_a').length ) { 

    $('.widget_sydney_services_type_a .service').each(function(){

      var link = $(this).find('a').attr('href');

      $(this).find('.content').append('<p style="margin-top:10px;"><a href="'+link+'" class="roll-button">Learn more</a></p>');
      
    });
    
  }

})(jQuery);

  1. Update

Regards,
Kharis

HelLo this is not working properly …
“Uncaught SyntaxError: Unexpected token if”

could you help ?

Hello there,

Visiting your site again, it looks like the code is working fine now as seen on the following screenshot.

Cloudup

Or, am I missing something?

Regards,
Kharis

Dear Kharis

I have a question. how we can set dedicated URL for each buttons? and is there possible set different labels for each buttons?

thanks for your help
Kourosh

Hello there,

Replace the old code with this one:


;(function($) {

   'use strict'

  if( $('.widget_sydney_services_type_a').length ) { 

    $('.widget_sydney_services_type_a .service').each(function(index){

      var link        = $(this).find('a').attr('href');
      var buttonLabel = 'Learn more';
      var n           = index+1; 

      if(n == 1) {
        link        = 'http://yoursite.com/link1';
        buttonLabel = 'Label 1';
      }

      if(n == 2) {
        link        = 'http://yoursite.com/link2';
        buttonLabel = 'Label 2';
      }

      if(n == 3) {
        link        = 'http://yoursite.com/link3';
        buttonLabel = 'Label 3';
      }

      if(n == 4) {
        link        = 'http://yoursite.com/link3';
        buttonLabel = 'Label 3';
      }

      if(n == 5) {
        link        = 'http://yoursite.com/link3';
        buttonLabel = 'Label 3';
      }      
      
      $(this).find('.content').append('<p style="margin-top:10px;"><a href="'+link+'" class="roll-button">'+buttonLabel+'</a></p>');
      
    });
    
  }

})(jQuery);

The first button label and link are defined in this code block:


if(n == 1) {
  link        = 'http://yoursite.com/link1';
  buttonLabel = 'Label 1';
}

Regards,
Kharis

Dear Kharis

thanks a lot for your help. it was very professional.

have a nice day,
kourosh

You’re welcome! I am glad to have an opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis