I am using woocommerce and a plugin called fancy product designer.
The plugin allows you to custom design products and them order them using woocommerce.
Everything is working fine but I need to add a feature which displayed a bootstrap modal after clicking the add to cart button. This modal will contain a preview of the designed product and have a button which will add it to your basket and then reload the page.
I can create the code to display the preview I just need to know how to add the functionailty to display a custom modal which contains an add to cart button
Requirements:
- Rename the add to cart button to "preview"
- When "preview" button is clicked open a bootstrap modal
- The modal contains the add to cart button which adds the product to your cart.
It would be great if you could also share where I should add the modal code and the js code to open the modal.
I am using a plugin called "insert header and footer" which I can use to add the js code which opens the preview modal but if you have a better way please share.
Here is the URL to one of the product pages: https://peppyplates.brookstonesites.co.uk/product/girl-christening/
I haven't tried anything so far as I don't know how to code in wp that well but here is an example of what I would do if it was raw PHP.
$('#preview_button').click(function() {
$('#preview_modal').modal('show')
});
$('#add_to_cart_button').click(function() {
// WP code to add the product to the cart
}
It would be great to know where I should put my html bootstrap modal code as well. I don't want to edit the plugin directly since if it gets updated the code will be wiped