Last active
September 24, 2025 07:30
-
-
Save KittenCodes/f0258795d28fdbd8b0006d5679d3e965 to your computer and use it in GitHub Desktop.
Oxygen Classic - Fix for WooCommerce Product Images & Tabs not loading in WooCommerce v10 and Oxygen Classic v4.9.1.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The JavaScript in this Gist can be added to the JavaScript tab of a Code Block | |
| to prevent this issue from happening until it's fixed in Oxygen's Core. | |
| Please report any issues to [email protected]. | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Add this to the JavaScript tab of a Code Block on the Single Product template | |
| */ | |
| jQuery(document).ready(function ($) { | |
| var $gallery = $(".woocommerce-product-gallery"); | |
| $gallery.each(function () { | |
| var $wrapper = $(this); | |
| var $mainContainer = $wrapper.find(".woocommerce-product-gallery__image").first(); | |
| var $main = $mainContainer.find("img"); | |
| var $mainLink = $mainContainer.find("a"); | |
| var $thumbs = $wrapper.find(".woocommerce-product-gallery__image").not(":first"); | |
| // Show the gallery | |
| $wrapper.css("opacity", 1); | |
| // Track which index is currently active | |
| var currentIndex = 0; | |
| // Thumbnail click -> swap main image (no lightbox) | |
| $thumbs.on("click", function (e) { | |
| e.preventDefault(); | |
| var $img = $(this).find("img"); | |
| $main | |
| .attr("src", $img.attr("src")) | |
| .attr("srcset", $img.attr("srcset")) | |
| .attr("sizes", $img.attr("sizes")) | |
| .attr("alt", $img.attr("alt")) | |
| .data("large_image", $img.data("large_image")) | |
| .data("large_image_width", $img.data("large_image_width")) | |
| .data("large_image_height", $img.data("large_image_height")); | |
| // also update the main link's href | |
| $mainLink.attr("href", $img.data("large_image") || $img.attr("src")); | |
| // update the currentIndex to match this thumbnail | |
| currentIndex = $thumbs.index(this) + 1; // +1 because main = 0 | |
| }); | |
| // Main image click -> open Photoswipe lightbox | |
| $mainLink.on("click", function (e) { | |
| e.preventDefault(); | |
| var $links = $wrapper.find(".woocommerce-product-gallery__image a"), | |
| items = []; | |
| $links.each(function () { | |
| var $link = $(this).find("img"); | |
| items.push({ | |
| src: $link.data("large_image") || $(this).attr("href"), | |
| w: $link.data("large_image_width") || $link[0].naturalWidth, | |
| h: $link.data("large_image_height") || $link[0].naturalHeight, | |
| title: $link.attr("alt") || "" | |
| }); | |
| }); | |
| var pswpElement = document.querySelectorAll(".pswp")[0]; | |
| var options = { | |
| index: currentIndex, // start at currently active main image | |
| bgOpacity: 0.8, | |
| showHideOpacity: true | |
| }; | |
| var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); | |
| gallery.init(); | |
| }); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Add this to the JavaScript tab of a Code Block on the Single Product template | |
| */ | |
| jQuery(document).ready(function ($) { | |
| var $tabWrappers = $(".woocommerce-tabs.wc-tabs-wrapper"); | |
| $tabWrappers.each(function () { | |
| var $wrapper = $(this); | |
| var $tabs = $wrapper.find("ul.wc-tabs li a"); | |
| var $panels = $wrapper.find(".wc-tab"); | |
| // Hide all panels except the first | |
| $panels.hide().attr("aria-hidden", "true"); | |
| $panels.first().show().attr("aria-hidden", "false"); | |
| $tabs.attr("aria-selected", "false").attr("tabindex", "-1"); | |
| $tabs.first().attr("aria-selected", "true").attr("tabindex", "0").parent().addClass("active"); | |
| // Handle tab click | |
| $tabs.on("click", function (e) { | |
| e.preventDefault(); | |
| var $this = $(this); | |
| var target = $this.attr("href"); | |
| // Update tabs | |
| $tabs.parent().removeClass("active"); | |
| $tabs.attr("aria-selected", "false").attr("tabindex", "-1"); | |
| $this.parent().addClass("active"); | |
| $this.attr("aria-selected", "true").attr("tabindex", "0"); | |
| // Update panels | |
| $panels.hide().attr("aria-hidden", "true"); | |
| $(target).show().attr("aria-hidden", "false"); | |
| }); | |
| // Optional: keyboard arrow navigation | |
| $tabs.on("keydown", function (e) { | |
| var $current = $(this); | |
| var $all = $tabs; | |
| var index = $all.index($current); | |
| var nextIndex; | |
| if (e.key === "ArrowRight" || e.key === "ArrowDown") { | |
| nextIndex = (index + 1) % $all.length; | |
| } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") { | |
| nextIndex = (index - 1 + $all.length) % $all.length; | |
| } else { | |
| return; | |
| } | |
| e.preventDefault(); | |
| $all.eq(nextIndex).focus().click(); | |
| }); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment