WP Woocommerce显示弹出窗口添加到购物车按钮

Question

我正在使用woocommerce和一个名为fancy product designer的插件。

该插件允许您自定义设计产品，并使用woocommerce订购产品。

一切正常，但是我需要添加一个功能，该功能在单击“添加到购物车”按钮后显示了一个引导模态。此模式将包含设计产品的预览，并具有一个按钮，该按钮会将其添加到购物篮中，然后重新加载页面。

我可以创建代码以显示预览，我只需要知道如何添加功能即可显示包含添加到购物车按钮的自定义模式

要求：

• 将“添加到购物车”按钮重命名为“预览”
• 单击“预览”按钮时，会打开一个引导程序模版
• 模式包含“添加到购物车”按钮，该按钮可将产品添加到购物车。

如果您还可以分享我应该在何处添加模态代码和js代码以打开模态的地方，那就太好了。

我正在使用一个名为“插入页眉和页脚”的插件，可以用来添加打开预览模式的js代码，但是如果您有更好的方法，请共享。

以下是其中一个产品页面的网址：https://peppyplates.brookstonesites.co.uk/product/girl-christening/

到目前为止，我还没有尝试过任何方法，因为我不知道如何在wp中编写代码，但是这里有一个示例，说明如果使用原始PHP，我会怎么做。

$('#preview_button').click(function() {
    $('#preview_modal').modal('show')
});

$('#add_to_cart_button').click(function() {
    // WP code to add the product to the cart
}

很高兴知道我也应该将HTML引导程序模式代码放在哪里。我不想直接编辑插件，因为如果更新，代码将被清除