Change Button Hyperlinks

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 5 years, 3 months ago.

Author Posts

kamarch

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

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

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

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.