How to Change the "Buy Now" Button to "Enquire" and Open a Lightbox in Wix Stores

Ask the community
, ,
1

I’m trying to modify the “Buy Now” button on my product pages in Wix Stores. Specifically, I want to change the button’s label to “Enquire” and override its default behavior to open a lightbox instead of adding the product to the cart. However, I’m encountering an error when using the method setBuyNowLabel, as it throws the error:
Error: $w(...).setBuyNowLabel is not a function.

I’ve reviewed the official Wix documentation and tutorial that mentions this function, but it doesn’t seem to be working in my case. Can anyone help clarify the issue or provide an alternative solution?
I am trying to

*Change the label of the Buy Now button to Enquire for a specific product.

  • Prevent the default “Add to Cart” action and instead open a lightbox when the Enquire button is clicked.
  • I’m using the Yacht Test product page as an example.

I’ve tried using the following code to change the Buy Now button label and add custom functionality:
`import wixWindowFrontend from “wix-window-frontend”;
import wixLocationFrontend from “wix-location-frontend”;

// Define the specific product ID for the Yacht Test product
const yachtTestId = “8b1d3279-c64a-457b-b6ea-672c6574e0da”;

$w.onReady(function () {
initProductPage();
});

wixLocationFrontend.onChange((location) => {
let newPath = location.path;
if (newPath?.[0] === “product-page”) {
initProductPage(); // Re-initialize when the URL changes
}
});

async function initProductPage() {
// Fetch the current product
const product = await $w(“#productPage1”).getProduct();

// Check if the current product ID matches the Yacht Test product ID
if (product._id === yachtTestId) {
// Change the label of the Buy Now button to “Enquire”
$w(“#productPage1”).setBuyNowLabel(“Enquire”);

// Set the custom click handler for the Buy Now button
$w("#productPage1").onBuyNow(onEnquireHandler);

}
}

// Custom click handler for the ‘Enquire’ button
async function onEnquireHandler(resume, cancel) {
// Gather the product information to show in the lightbox
const data = await getProductInfo();

// Open the ‘Yacht Enquire Box’ lightbox with the product details
wixWindowFrontend.openLightbox(“Yacht Enquire Box”, data).then((results) => {
cancel(); // Cancel the default “Buy Now” action
});
}

// Gather the product details for use in the lightbox
async function getProductInfo() {
const product = await $w(“#productPage1”).getProduct();
return {
product: product, // Return the product object
};
}`

I’ve also tried referring to the Wix Stores tutorial on modifying the Buy Now button: Wix eCommerce Tutorial: Request a Quote, but the function setBuyNowLabel throws an error in my case.

  • I’m using the Wix Editor, and the product page is dynamic.
  • The Buy Now button works fine for default behavior, but I need to override it to open a lightbox.
  • The setBuyNowLabel method is documented in Wix’s tutorials but doesn’t seem to work as expected for my case.

Any guidance on how to resolve this or a workaround would be greatly appreciated!

2

As noted at the top of the documentation you shared, this functionality is only available on Wix Studio editor, not the classic editor.

You can request features in the product roadmap Product Roadmap