How to Change image and price depending on buttons clicked WordPress

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.

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.

---

---

---

---

---

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

---