How to change product title, breadcrumb and URL on variation selection

howto
1

Q: Where do we change the product title, breadcrumb and URL when the user selects a different variation?

A:
You should go to Product > open Variations > open Variation blade and use SEO widget inside to set product title, description and URL.

After this step, the variation will be accessible by URL and you should see variation meta-information.

image
image1768×1010 153 KB

image
image1360×509 92.2 KB

Current Demo Themes don’t change URL or meta-information on the fly. It should be implemented by a custom javascript.

This can now be done in Chrome, Safari, Firefox 4+, Edge and Internet Explorer 11+.

Example:

function updateSeoDetails(pageTitle, urlPath){
     document.title = pageTitle;
     window.history.pushState({"pageTitle":pageTitle},"", urlPath);
 }

And call the code when you change selected variation.