Ecommerce Shopify WordPress Discussion

How to hide the '.com' text on buttons from WooCommerce product pages

I am using affiliate products on woocommerce the affiliate URLs have a shortcode at the backend (Buy at %Domain%). which displays automatically on every product based on domain.com so I attempted to hide the '.com' text due to its buggy appearance, which was causing the page to load slowly. I employed CSS and a small script, which functioned perfectly until yesterday. However, at present, the text over the button is empty. I don't know where I went wrong here. .gspb_id-gsbp-f2fd5af a { visibility: hidden; } .gspb_id-gsbp-f2fd5af a.completed { visibility: visible; } <script> window.addEventListener("load", function () { const linkEls = document.querySelectorAll(".gspb_id-gsbp-f2fd5af a"); linkEls.forEach((el) => { if (el.innerHTML.includes(" at ")) { el.innerHTML= el.innerHTML.replaceAll("number_format_thousands_sep",",").replaceAll("number_format_decimal_point","."); let arr = el.innerHTML.split(" at "); arr[0] = arr[0].replace(/\..+/, "").replace(/,/g, ""); arr[1] = arr[1].replace(/\.com/, ""); el.innerHTML = arr.join(" at "); el.classList.add("completed"); } }); }); </script> this is the second version of code which I tried and failed as it didn't workout <style> .gspb_id-gsbp-f2fd5af a { visibility: visible; /* Set default visibility to visible */ } .gspb_id-gsbp-f2fd5af a.hide-text { visibility: hidden; /* Hide the text when the class is applied */ } </style> <script> window.addEventListener("load", function () { const linkEls = document.querySelectorAll(".gspb_id-gsbp-f2fd5af a"); linkEls.forEach((el) => { if (el.innerHTML.includes(" at ")) { el.innerHTML = el.innerHTML.replaceAll("number_format_thousands_sep", ",").replaceAll("number_format_decimal_point", "."); let arr = el.innerHTML.split(" at "); arr[0] = arr[0].replace(/\..+/, "").replace(/,/g, ""); arr[1] = arr[1].replace(/\.com/g, ""); el.innerHTML = arr.join(" at "); el.classList.add("hide-text"); // Apply the class to hide the text } }); }); </script>
Lol, I found it! Okay, in the version below, instead of a URL link, I have used text with the replace method. Voila, it works perfectly now. The thing is, the code below works even if you're using shortcodes on your site, and yes, I removed the price strings. If someone wants to use the code below, replace the CSS classes, and it can work for you. <style> a.product_type_external.wp-element-button { visibility: visible; } a.product_type_external.wp-element-button.completed { visibility: visible; } </style> <script> window.addEventListener("load", function () { const linkEls = document.querySelectorAll("a.product_type_external.wp-element-button"); linkEls.forEach((el) => { if (el.innerHTML.includes(".com")) { el.innerHTML = el.innerHTML.replace(/\.com/, ""); el.classList.add("completed"); } }); }); </script>

February 4, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.