Hello,
I’m currently trying to resolve an issue for my customers where variation/attributed products aren’t generating unique URLs for the selected variations.
For example, I offer a jacket in multiple sizes and colours (Small, Medium, Large | Orange, Yellow, Navy, Black), I want to send my customer a link to the Small, Yellow jacket that I have offered.
Below are how I’d like the URLs to be generated within certain stages of the customer’s actions:
URL when the customer clicks on the product image to be taken to the product page: https://google.com/product/winter-traffic-parka-4-refl-tape/
URL when the customer clicks on the Small, Yellow variation of the jacket:
https://google.com/product/winter-traffic-parka-4-refl-tape/?attribute_pa_jacket-colour=yellow&attribute_pa_size=small
(I’ve changed the site URL to google for privacy reasons, but you should understand what I’m asking)
I’ve found the following JS to assist with this issue, but it only seems to work when I’m logged in as an admin and is now showing an “add to cart button” even tho I have CSS and Catalogue Mode enabled.
JS:
/**
* Little JS snippet to automatically update the WooCommerce single product page URL with the needed parameters for the active variations' selection.
*
* Each time the user changes the variation selection, the URL is updated with the new parameters, so on hard refresh the selected variation is displayed.
*
* Also, fast way to get the direct URL to the selected variation.
*
* Paste it into your browser console and run it. Or use it in your theme/plugins.
*
* @see https://stackoverflow.com/a/73138077/13765033
*/
const els = document.querySelectorAll('.variations select')
// add el.name and el.value as query parameters to the URL
function updateURL(el) {
const url = new URL(window.location.href)
url.searchParams.set(el.name, el.value)
window.history.pushState({}, '', url.href)
}
// update the URL when the user changes the select
els.forEach(el => el.addEventListener('change', () => updateURL(el)))
Please assist.
.
