Skip to content

Instantly share code, notes, and snippets.

@mahdi-alavi
Last active November 15, 2022 08:13
Show Gist options
  • Save mahdi-alavi/a81ae57a18d4927dcfeb to your computer and use it in GitHub Desktop.
Save mahdi-alavi/a81ae57a18d4927dcfeb to your computer and use it in GitHub Desktop.
Woocommerce Converts Variations in to Radio Buttons
/*
* create in your theme path: your-theme/js/add-to-cart-variation.min.js
*/
jQuery(document).ready(function(d){d("form.variations_form").on("click",".reset_variations",function(f){return false}).on("change",".variations input:radio",function(f){$variation_form=d(this).closest("form.variations_form");$variation_form.find("input[name=variation_id]").val("").change();$variation_form.trigger("woocommerce_variation_radio_change").trigger("check_variations",["",false]);d(this).blur();if(d().uniform&&d.isFunction(d.uniform.update)){d.uniform.update()}}).on("focusin",".variations input:radio",function(f){$variation_form=d(this).closest("form.variations_form");$variation_form.trigger("woocommerce_variation_radio_focusin").trigger("check_variations",[d(this).attr("name"),true])}).on("check_variations",function(f,g,r){var l=true;var o=false;var p=false;var q={};var k=d(this);var n=k.find(".reset_variations");k.find(".variations input:radio:checked").each(function(){if(d(this).val().length==0){l=false}else{o=true}if(g&&d(this).attr("name")==g){l=false;q[d(this).attr("name")]=""}else{value=d(this).val().replace(/&/g,"&").replace(/"/g,'"').replace(/'/g,"'").replace(/</g,"<").replace(/>/g,">");q[d(this).attr("name")]=value}});var j=parseInt(k.attr("data-product_id"));var m=window["product_variations_"+j];if(!m){m=window.product_variations}var i=e(m,q);if(l){var h=i.pop();if(h){if(!g){k.find(".single_variation_wrap").slideDown("200")}k.find("input[name=variation_id]").val(h.variation_id).change();k.trigger("found_variation",[h])}else{if(!g){k.find(".single_variation_wrap").slideUp("200")}if(!r){k.trigger("reset_image")}}}else{k.trigger("update_variation_values",[i]);if(!r){k.trigger("reset_image")}if(!g){k.find(".single_variation_wrap").slideUp("200")}}if(o){if(n.css("visibility")=="hidden"){n.css("visibility","visible").hide().fadeIn()}}else{n.css("visibility","hidden")}}).on("reset_image",function(j){var i=d(this).closest(".product");var g=i.find("div.images img:eq(0)");var l=i.find("div.images a.zoom:eq(0)");var h=g.attr("data-o_src");var k=g.attr("data-o_title");var f=l.attr("data-o_href");if(h&&f&&k){g.attr("src",h).attr("alt",k).attr("title",k);l.attr("href",f)}}).on("update_variation_values",function(f,g){$variation_form=d(this).closest("form.variations_form");$variation_form.find(".variations input:radio").each(function(k,l){current_attr_radio=d(l);current_attr_radio.find("option:gt(0)").attr("checked","checked");var j=current_attr_radio.attr("name");for(num in g){var h=g[num].attributes;for(attr_name in h){var i=h[attr_name];if(attr_name==j){if(i){i=d("<div/>").html(i).text();i=i.replace(/'/g,"\\'");i=i.replace(/"/g,'\\"');current_attr_radio.find('option[value="'+i+'"]').removeAttr("checked")}else{current_attr_radio.find("option").removeAttr("checked")}}}}});$variation_form.trigger("woocommerce_update_variation_values")}).on("found_variation",function(f,i){var l=d(this);var m=d(this).closest(".product");var r=m.find("div.images img:eq(0)");var q=m.find("div.images a.zoom:eq(0)");var n=r.attr("data-o_src");var h=r.attr("data-o_title");var p=q.attr("data-o_href");var k=i.image_src;var g=i.image_link;var o=i.image_title;l.find(".variations_button").show();l.find(".single_variation").html(i.price_html+i.availability_html);if(!n){n=(!r.attr("src"))?"":r.attr("src");r.attr("data-o_src",n)}if(!p){p=(!q.attr("href"))?"":q.attr("href");q.attr("data-o_href",p)}if(!h){h=(!r.attr("title"))?"":r.attr("title");r.attr("data-o_title",h)}if(k&&k.length>1){r.attr("src",k).attr("alt",o).attr("title",o);q.attr("href",g)}else{r.attr("src",n).attr("alt",h).attr("title",h);q.attr("href",p)}var j=l.find(".single_variation_wrap");if(i.sku){m.find(".product_meta").find(".sku").text(i.sku)}else{m.find(".product_meta").find(".sku").text("")}j.find(".quantity").show();if(!i.is_in_stock&&!i.backorders_allowed){l.find(".variations_button").hide()}if(i.min_qty){j.find("input[name=quantity]").attr("data-min",i.min_qty).val(i.min_qty)}else{j.find("input[name=quantity]").removeAttr("data-min")}if(i.max_qty){j.find("input[name=quantity]").attr("data-max",i.max_qty)}else{j.find("input[name=quantity]").removeAttr("data-max")}if(i.is_sold_individually=="yes"){j.find("input[name=quantity]").val("1");j.find(".quantity").hide()}j.slideDown("200").trigger("show_variation",[i])});d("form.variations_form .variations input:radio").change();function e(k,h){var l=[];for(var g=0;g<k.length;g++){var f=k[g];var j=f.variation_id;if(c(f.attributes,h)){l.push(f)}}return l}var b=0;function c(j,i){var f=true;for(attr_name in j){var h="";var g="";if(b>1){h=String(j[attr_name]).toLowerCase();g=String(i[attr_name]).toLowerCase()}else{h=j[attr_name];g=i[attr_name];b++}if(h!==undefined&&g!==undefined&&h.length!=0&&g.length!=0&&h!=g){f=false}}return f}function a(f){return !isNaN(parseFloat(f))&&isFinite(f)}});
/*
* function.php
* Enqueue scripts
*/
function itl_cart_variation_scripts() {
wp_deregister_script( 'wc-add-to-cart-variation' );
wp_register_script( 'add-to-cart-variation', get_template_directory_uri() . '/js/add-to-cart-variation.min.js', 'jquery', '', true );
if ( is_product() ) { wp_enqueue_script( 'add-to-cart-variation' ); };
}
add_action( 'wp_enqueue_scripts', 'itl_cart_variation_scripts' );
<?php
/**
* Update Woocommerce Radio Buttons for woocommerce 2.4.8
* plugin url: https://wordpress.org/plugins/woocommerce-radio-buttons/
*
* overwrite variable.php or create in your theme path: your-theme/woocommerce/single-product/add-to-cart/variable.php
*
*
* Variable product add to cart
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.4.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $post, $product;
$attribute_keys = array_keys( $attributes );
do_action( 'woocommerce_before_add_to_cart_form' ); ?>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo esc_attr( json_encode( $available_variations ) ) ?>">
<?php do_action( 'woocommerce_before_variations_form' ); ?>
<?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
<?php else : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $attributes as $attribute_name => $options ) : ?>
<tr>
<td class="value">
<?php
if ( is_array( $options ) ) {
$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) : $product->get_variation_default_attribute( $attribute_name );
if ( taxonomy_exists( sanitize_title( $attribute_name ) ) ) {
$terms = get_terms( sanitize_title( $attribute_name ), array( 'menu_order' => 'ASC' ) );
foreach ( $terms as $term ) {
if ( ! in_array( $term->slug, $options ) ) continue;
echo '<input type="radio" value="' . strtolower( $term->slug ) . '" ' . checked( strtolower ( $selected ), strtolower ( $term->slug ), false ) . ' id="' . esc_attr( sanitize_title( $attribute_name ) ) . '" name="attribute_' . sanitize_title( $attribute_name ).'">' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '<br />';
}
} else {
foreach ( $options as $option ) {
echo '<input type="radio" value="' . esc_attr( sanitize_title( $option ) ) . '" ' . checked( sanitize_title( $selected ), sanitize_title( $option ), false ) . ' id="' . esc_attr( sanitize_title($attribute_name) ) . '" name="attribute_' . sanitize_title($attribute_name) . '">' . apply_filters( 'woocommerce_variation_option_name', $option ) . '<br />';
}
}
}
?>
</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<div class="single_variation_wrap" style="display:none;">
<?php
/**
* woocommerce_before_single_variation Hook
*/
do_action( 'woocommerce_before_single_variation' );
/**
* woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
* @since 2.4.0
* @hooked woocommerce_single_variation - 10 Empty div for variation data.
* @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
*/
do_action( 'woocommerce_single_variation' );
/**
* woocommerce_after_single_variation Hook
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
<?php endif; ?>
<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
<?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>
<script type="text/javascript">
var product_variations_<?php echo $post->ID; ?> = <?php echo json_encode( $available_variations ) ?>;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment