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
Related
On mobile, the apply coupon button is not showing correctly in woocommerce checkout last page.
This is the desktop version
and this is the mobile
The name of the button is apply_coupon. Any idea on how to use CSS to force it to be shown in a new line?
I've had to throw up this WooCommerce store today, but I've had trouble centering the "Add to Cart" button. I've tried several code snippets, but honestly I'm just having trouble with identifying which CSS class to call for this button. Can anyone steer me in the right direction?
Here's a test product page to look at - https://magzsports.com/product/redford-logo-yellow-shirt/
Using WordPress with Flatsome theme from Evanto. WooCommerce is backend store.
¿is the "add to cart button" custom? There is a lot of code that I don't know what is doing there (a stripe button disabled? a form?)
After cleaning the code, I just added a class to each element to see if something was causing conflict (cart now is called carrito, goback button now is just "goback", input button is "inputo") and just added this code:
.carrito {
text-align: center;
}
This is how it looks for me.
Hi I am new to wordpress thats why I am facing some issues in it.
One of them is when I add Call to Action Button Element using WPBakery Page Builder and preview my change then the content in preview is removed from the page but when I remove the Call to Action Button Element from page the preview loads all content again
Page without Call to Action Button Element
When I preview the above page I get all my content in Preview as below
Preview without Call to Action Button Element
But the problem occurs when I add Call to Action Button
Page after adding Call to Action Button
When I preview after adding element I get following preview
Preview after adding Call to Action Button
Here is the video link of this
https://drive.google.com/file/d/1WUjtVePoL2BYTE5q4UublMRt1LaK48CK/view?usp=sharing
You can use Soliloquy Slider Plugin for this. Install and active the plugin then go Go to your WordPress dashboard then Soliloquy » Add New. Give a title of your slider and add some image for the slider to show.
You can drag and drop image from your local file directory or can browse image. After adding the images just click on the publish button.
After publishing the slider in your right side screen some code and information will appear. You will need this information later to add this slider in any pages or posts.
Install and Activate Soliloquy’s Custom CSS Addon
Add CSS to Create a Call-to-Action Button
Add HTML for Call-to-Action Button
You can follow this tutorial for in depth explanation
I've built a layer slider with the LayerSlider WP plugin and I can't figure out how to add it on a page. I understand that I might have to use the shortcode which I have but when I put it in the page breaks.
I'm new to wordpress and on the page that I'm editing, all I have is deTheme Builder.
I've tried inserting a row and a text editor snippet and inserting the shortcode which:
[layerslider id="2"] but no luck so far.
Inserting the slider using the Drag & Drop Builder
You can place your sliders into pages and posts using the Drag & Drop Builder.
1. Click on the button or drag into the editor in order to insert it.
2. Click on the "edit" icon of the Layered Slider element and chose a slider from the one you've already created.
3. Save Element
4. Publish
for more option refer these link https://support.vamtam.com/support/solutions/articles/200736-guide-to-layered-slider-wp
This a problem on Firefox, works fine on Chrome. If you add a product to the cart, then click back to the product page, (rather than clicking 'continue shopping') the add to cart button now has the attribute 'disabled' added to it.
Anyone know why this is or how to remove it?
found the answer here -
firefox - autocomplete off
I added the attribute
autocomplete="off"
to the form tag.
To do this in woocommerce:
Create a woocommerce directory(folder) in your wordpress child theme.
In this woocommerce folder, create a single-product folder, in here, yet another folder, add-to-cart.
Then copy the files, simple.php and variable.php, from the original woocommerce directory, which is in wp-content/plugins/woocommerce/templates/single-product/add-to-cart
(notice you don't copy the templates directory in your child theme. I have no idea why.)
Open simple.php and variable.php and add the 'autocomplete="off" attribute.