Add Link buttons under photos to click and buy

• 

  oliviacorin26 · Member · Oct 10, 2016 at 4:31 am

  • Copy link
  • Add topic to favorites

  I am wanting to add link buttons underneath my thumbnail photos so that my viewers can click on the button, and then be directed to the website where I bought the item. I have used them previously on WIX, but I know I will have to use either CSS or HTML on wordpress. Is there a way I customize buttons, directly under photos with links? Thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  kathrynwp · Staff · Oct 10, 2016 at 4:11 pm

  • Copy link

  Sure, you can create buttons with HTML and CSS.

  Your button could look something like this:

  <a href="http://YOUR-URL-HERE" class="mybutton">Buy this</a>

  Replace YOUR-URL-HERE with your real link.

  Then you can style your button using CSS, depending what you want it to look like.

  I see that my colleague showed you an example button style here:

  Quick Button CSS

  Add the CSS to your Customizer‘s CSS panel.

  Give that a try and see how it goes. If you want the button to look different than the example, let me know in what way and I’ll be glad to help.

• 

  oliviacorin26 · Member · Oct 11, 2016 at 12:12 am

  • Copy link

  Perfect! That was such a big help. I am wanting it to say “Buy Me” but not in bold. I think I can figure out how to add a URL, but how would I center it underneath my pictures? Here is page I am wanting to put the button under. They are thumbnails at the bottom of the page, https://silverliningfashioncom.wordpress.com/2016/07/02/beachy-keen/
  Thank you!!!!

• 

  oliviacorin26 · Member · Oct 11, 2016 at 12:15 am

  • Copy link

  I am also wanted to center my pictures on the page, is there way I can get help with that? Thanks!

• 

  siobhyb · Member · Oct 11, 2016 at 10:18 am

  • Copy link

  Hi @oliviacorin26,

  I recommend adding the HTML for your buttons as a caption for each image. You can add a caption directly from within your editor, as described here:

  https://en.support.wordpress.com/images/image-settings/#within-posts

  The captions can then be styled via CSS.

  Let me know when you’ve added the HTML as a caption for each image and I can then help if you’d like to style them further from there.

• 

  siobhyb · Member · Oct 11, 2016 at 10:53 am

  • Copy link

  I am also wanted to center my pictures on the page, is there way I can get help with that? Thanks!

  You can centre the images by taking the following steps:

  • Navigate to the editor for the post, click on each image one by one, and ensure the No Alignment option is selected from the toolbar.
  • Next, click on the HTML tab in the top right corner of the editor.
  • Surround the HTML for the images with HTML div tags and give the opening tag a class named “image-container.” For example:

  <div class="image-container">
  HTML for images here.
  </div>

  • Finally, add the following snippet to the CSS panel of the WordPress.com Customizer:

  .image-container {
      text-align: center;
  }
  
  .image-container img {
      margin: auto;
  }

  Give the above a go and let me know if questions come up along the way.