Ask your WordPress questions! Pay money and get answers fast! (more info)

How to Change image and price depending on buttons clicked WordPress

  • REFUNDED

I have template Karma. I want to show printing options and prices for that photo depending on the type of paper it will be printed. I would like to have a base photo say "photo1" on a placeholder to shows it as the page loads. Then some buttons that say "Glossy paper", "Semigloss Paper", "Fine art paper" etc. Price is different for each option. Is it possible to create some sort of javascript or similar to add on each button so when the user clicks on it the base image changes to another image that represents the option chosen and the price is updated accordingly? We do not want to use woocommerce and we use Visual Composer (bundle with the template) to build the pages.

Finally I plan to have a paypal button that allows the user to pay the price shown for the option selected.

Thank you

Answers (3)

2017-07-01

Jayaram Y answers:

You must create a variable product in WooCommerce and configure them according to your needs.
If you are not sure how to create variable product - https://docs.woocommerce.com/document/variable-product/

For image switching when options selected, there is a paid plugin with clear documentation. - https://docs.woocommerce.com/document/woocommerce-color-and-image-swatches/

There is also a free plugin available - https://wordpress.org/plugins/smart-variations-images/

You can setup paypal via WooCommerce settings.

2017-07-01

User179022 answers:

Hello, thanks for your answer. We do not want to use woocommerce for this project. Our plan is to once we have a way to achieve this to simply copy the code and change the name of the images as needed. Thank you.


Jayaram Y comments:

Hi,

You could do something like this if its in html
https://jsfiddle.net/jayaram558/132gz0vx/1/


Jayaram Y comments:

Just adjusted the code from above.

https://jsfiddle.net/jayaram558/op0hjtrw/1/


User179022 comments:

hello, it is a good start. I tried on a page but did not work. The image show but it does not changes when selecting the options. We would like to use buttons instead of a drop menu. I do have the CSS & JavaScript Toolbox plugin added to my template. I copied the javascript portion of you example and added it to my testing page but nothing happens... the page loads JavaScript as I successfully added an alert box... is there anything that I may need to add to the JavaScript example you provided?


Jayaram Y comments:

Can you share the link if you can. In the example i shared, you need to call javascript resources. Please check left panel section.

Or try replacing $ with jQuery.


Jayaram Y comments:

Hi. Please check this link - https://www.sendspace.com/file/ikmv4z

2017-07-01

Cesar Contreras answers:

Hello, I think this can work, you would adapt it to your needs
Add this code to the place of the page you want your buttons to be displayed:
<?php do_action( 'wpdocs_add_options' ); //info: https://developer.wordpress.org/reference/functions/do_action/ ?>


Add This in your functions.php file
// Executes the action hook named 'add_options'
add_action('wpdocs_add_options', 'theme_wpdocs_add_options');
function theme_wpdocs_add_options() {
echo '<div id="k-btn-opt"></div>';
?>
<script>
$(function() {
var opt = [
{
txt : 'option 1',
img : 'http://lorempixel.com/200/200/sports/1' ,
price : "$12.00",
},
{
txt : 'option 2',
img : 'http://lorempixel.com/200/200/sports/2' ,
price : "$18.00",
},
{
txt : 'option 3',
img : 'http://lorempixel.com/200/200/sports/3' ,
price : "$0.89",
},
{
txt : 'option 4',
img : 'http://lorempixel.com/200/200/sports/4' ,
price : "$20.00",
},
{
txt : 'option 5',
img : 'http://lorempixel.com/200/200/sports/5' ,
price : "$9.45",
}
];

$.each( opt, function( key, value ) {
$("#k-btn-opt")
.append('<button data-img="' + value.img + '" data-price="' + value.price + '" id="btn-opt-' + key + '">' + value.txt + '');
});

//Get the tributes by clicking the button [img, price]
$("#k-btn-opt button").click(function(event) {
//Example for price attribute
//info: https://api.jquery.com/data/
alert( $(this).data('price') );
});

});
</script>
<?php


NOTE: This code needs jquery loaded before running, if I add it in the footer, try changing it to the header


User179022 comments:

Hello Cesar, thanks for your answer. The php portion to place on the page gets erased from the text block as soon as the text block is saved.