Change Button Hyperlinks

Author Posts

kamarch June 14, 2015 at 1:11 am

Not sure if this is redundant and couldn’t find anything already in the forum but is there a way to actually change the hyperlink of a button and not just they visual styling?

Sebastian June 14, 2015 at 3:06 am

Hi Kamarch,

This isn’t possible with CSS, and therefore Microthemer. It would be best to locate the link’s HTML code in your theme files and change the href attribute. If this isn’t possible, link attributes can be changed with JavaScript. You would need to create or edit one of your theme’s JavaScript files. Adding something like this could work (where #my-link would be replaced by a valid CSS selector that actually targets your specific link – Microthemer might be helpful for generating the valid CSS selector):

jQuery(document).ready(function($){
   $('#my-link').attr('href', 'http://www.mydomain.com/somewhere/');
});

The above solution requires jQuery. If you want a pure JavaScript solution you could try this (but with this the selector must be an ID because we’re using getElementById):

document.getElementById(“#my-link”).setAttribute(‘href’, “http://facebook.com”);

When we roll out our updates to the custom code editor in Microthemer we will add support for JavaScript so that these quick fixes will be easier than editing existing or creating new JavaScript files on the server.

Cheers,
Sebastian

kamarch June 15, 2015 at 10:25 pm

Thanks for the swift reply Sebastian! I simply trying to edit Woocommerce “Return to Shop” button after removing a product from the cart go to a custom page instead of the one designated through Woocommerce settings since it is defaulting to a Product Archive page for some reason. I was curious however if Micothemer can help me in ensuring my images use lightbox? It seems as if the product page shortcode for woocommerce doesn’t enable product images to popup in a lightbox gallery as it should. (Let me know if I should make a new thread)

Sebastian June 16, 2015 at 2:34 am

Unfortunately Microthemer wouldn’t be able to help in the case of the lightbox either – because it can’t insert classes/ids into the HTML of the page. And because it doesn’t yet support JavaScript. If WooCommerce comes with a lightbox script, it’s probably configured to trigger on images that have a particular CSS class (e.g. class=”lightbox”) or some other HTML attribute (e.g. rel=”lightbox”).

If you post a question about this on the WooCommerce forum someone with more knowledge of there system should be able to advise you on this.

Cheers,
Sebastian

You must login or register to reply to this topic.