Website A/B Testing with JavaScript, HTML & CSS

document.querySelectorAll('.onsale').forEach(el => {
el.textContent = "NEW";
});

document.querySelector(".woocommerce-product-details__short-description p").textContent ="Our new super soft active beanie in our cozy cotton fabric, with 4-way stretch and moisture-wicking properties. Features a folded brim, logo patch detail and all-over ribbed texture for maximum comfort and warmth.";

// Adds a row for Fabric and Care with paragraph to include details in table

const tableBody = document.querySelector(".woocommerce-product-attributes tbody");

if (tableBody) {

tableBody.innerHTML += `

<tr class="woocommerce-product-attributes-item">

<th class="woocommerce-product-attributes-item__label">Fabric</th>

<td class="woocommerce-product-attributes-item__value">

<p>100% cotton</p>

</td>

</tr>

<tr class="woocommerce-product-attributes-item">

<th class="woocommerce-product-attributes-item__label">Care</th>

<td class="woocommerce-product-attributes-item__value">

<p>

Do not dry clean. Hand wash cold. Low iron if needed. Use only non-chlorine bleach. Reshape and lay flat to dry.

</p>

</td>

</tr>

`;

}

// Remove the description tab

document.querySelector("#tab-title-description")?.remove(); //Note: The ? Only call .remove() if the thing on the left actually exists.

// Adds a tab for shipping and returns plus detains

(function () {

const tabsList = document.querySelector(".wc-tabs");

const additionalTab = document.querySelector(".additional_information_tab");

// Exit cleanly if WooCommerce tabs aren't present

if (!tabsList || !additionalTab) {

return;

}

// Prevent duplicate injection

if (document.querySelector("#tab-title-shipping_returns")) {

return;

}

// Clone existing tab

const newTab = additionalTab.cloneNode(true);

newTab.classList.remove("active");

‍ ‍newTab.id = "tab-title-shipping_returns";

newTab.querySelector("a").textContent = "Shipping & Returns";

newTab.querySelector("a").setAttribute("href", "#tab-shipping_returns");

// Insert after Reviews

const reviewsTab = document.querySelector("#tab-title-reviews");

if (reviewsTab) {

reviewsTab.after(newTab);

} else {

tabsList.appendChild(newTab);

}

// Clone content panel

const additionalPanel = document.querySelector("#tab-additional_information");

if (!additionalPanel) return;

const newPanel = additionalPanel.cloneNode(true);

‍ ‍newPanel.id = "tab-shipping_returns";

‍ ‍newPanel.style.display = "none";

newPanel.classList.remove("active");

newPanel.innerHTML = `

<h2>Shipping & Returns</h2>

<p>For delivery to Alaska or Hawaii, please allow 10-15 business days for delivery. For delivery to US Territories and APO/FPO addresses, allow three weeks for delivery. Gift Cards are shipped separately from merchandise.</p>

<p>For full refund to original payment method or merchandise credit, returns must be made within 30 days of the estimated delivery date of the last shipment or the actual delivery date of the last shipment, whichever occurs later.</p>

`;

additionalPanel.parentNode.appendChild(newPanel);

})();

//Moves the sunglasses (product 121) list item before the belt (product 119)

(function () {

var elementToMove = document.querySelector("li.product.post-121");

var referenceElement = document.querySelector("li.product.post-119");

if (!elementToMove || !referenceElement) return;

referenceElement.parentNode.insertBefore(elementToMove, referenceElement);

})();

// Change purple button to green with making it darker on hover.

(function () {

var button = document.querySelector(".single_add_to_cart_button");

if (!button) return;

‍ ‍button.style.backgroundColor = "#1f5f00";

‍ ‍button.style.borderColor = "#1f5f00";

‍ ‍button.style.color = "#ffffff";

button.addEventListener("mouseenter", function () {

‍ ‍button.style.backgroundColor = "#174a00";

});

button.addEventListener("mouseleave", function () {

‍ ‍button.style.backgroundColor = "#1f5f00";

});

})();

// Change picture of baseball cap to logo collection image

document.querySelector('.size-woocommerce_thumbnail').srcset =

"http://www.gapremium.com/eshop/wp-content/uploads/2022/03/logo-1-300x300.jpg";