Display product variations as radiobuttons/checkboxes

Is it possible to display product variations with radiobuttons or check boxes instead of as a dropdown?

As featured on fiverr.com

  • Vinod Dalvi

    Hi @Abigail,

    Thanks for posting on the forums.

    Unfortunately currently it's not possible out of the box without custom coding. I will move this over to the features & feedback section. This way it can be considered for future development, and we can also see what other community members think about the feature request.

    In the meanwhile to achieve it you can just add the following code in the functions.php file of your child theme

    function custom_mp_buy_button_tag( $button, $post_id, $context ){
    	global $id, $mp;
    		$post_id = ( NULL === $post_id ) ? $id : $post_id;
    
    		$meta = get_post_custom($post_id);
    		//unserialize
    		foreach ($meta as $key => $val) {
    				$meta[$key] = maybe_unserialize($val[0]);
    				if (!is_array($meta[$key]) && $key != "mp_is_sale" && $key != "mp_track_inventory" && $key != "mp_product_link" && $key != "mp_file")
    						$meta[$key] = array($meta[$key]);
    		}
    
    		//check stock
    		$no_inventory = array();
    		$all_out = false;
    		if ($meta['mp_track_inventory']) {
    				$cart = $mp->get_cart_contents();
    				if (isset($cart[$post_id]) && is_array($cart[$post_id])) {
    						foreach ($cart[$post_id] as $variation => $data) {
    								if ($meta['mp_inventory'][$variation] <= $data['quantity'])
    										$no_inventory[] = $variation;
    						}
    						foreach ($meta['mp_inventory'] as $key => $stock) {
    								if (!in_array($key, $no_inventory) && $stock <= 0)
    										$no_inventory[] = $key;
    						}
    				}
    
    				//find out of stock items that aren't in the cart
    				foreach ($meta['mp_inventory'] as $key => $stock) {
    						if (!in_array($key, $no_inventory) && $stock <= 0)
    								$no_inventory[] = $key;
    				}
    
    				if (count($no_inventory) >= count($meta["mp_price"]))
    						$all_out = true;
    		}
    
    		//display an external link or form button
    		if (isset($meta['mp_product_link']) && $product_link = $meta['mp_product_link']) {
    
    				$button = '<a class="mp_link_buynow" href="' . esc_url($product_link) . '">' . __('Buy Now »', 'mp') . '</a>';
    		} else if ($mp->get_setting('disable_cart')) {
    
    				$button = '';
    		} else {
    				$variation_select = '';
    				$button = '<form class="mp_buy_form" method="post" action="' . mp_cart_link(false, true) . '">';
    
    				if ($all_out) {
    						$button .= '<span class="mp_no_stock">' . __('Out of Stock', 'mp') . '</span>';
    				} else {
    
    						$button .= '<input type="hidden" name="product_id" value="' . $post_id . '" />';
    
    						//create select list if more than one variation
    						if (is_array($meta["mp_price"]) && count($meta["mp_price"]) > 1 && empty($meta["mp_file"])) {
    //								$variation_select = '<select class="mp_product_variations" name="variation">';
    								foreach ($meta["mp_price"] as $key => $value) {
    										$disabled = (in_array($key, $no_inventory)) ? ' checked="checked"' : '';
    										$variation_select .= '<input type="radio" class="mp_product_variations" name="variation" value="' . $key . '"' . $disabled . '> '. esc_html($meta["mp_var_name"][$key]) . ' - ';
    //										$variation_select .= '<option value="' . $key . '"' . $disabled . '>' . esc_html($meta["mp_var_name"][$key]) . ' - ';
    										if ($meta["mp_is_sale"] && $meta["mp_sale_price"][$key]) {
    												$variation_select .= $mp->format_currency('', $meta["mp_sale_price"][$key]);
    										} else {
    												$variation_select .= $mp->format_currency('', $value);
    										}
    										//$variation_select .= "</option>\n";
    										$variation_select .= "<br />\n";
    								}
    //								$variation_select .= "</select> \n";
    						} else {
    								$button .= '<input type="hidden" name="variation" value="0" />';
    						}
    
    						if ($context == 'list') {
    								if ($variation_select) {
    										$button .= '<a class="mp_link_buynow" href="' . get_permalink($post_id) . '">' . __('Choose Option »', 'mp') . '</a>';
    								} else if ($mp->get_setting('list_button_type') == 'addcart') {
    										$button .= '<input type="hidden" name="action" value="mp-update-cart" />';
    										$button .= '<input class="mp_button_addcart" type="submit" name="addcart" value="' . __('Add To Cart »', 'mp') . '" />';
    								} else if ($mp->get_setting('list_button_type') == 'buynow') {
    										$button .= '<input class="mp_button_buynow" type="submit" name="buynow" value="' . __('Buy Now »', 'mp') . '" />';
    								}
    						} else {
    
    								$button .= $variation_select;
    
    								//add quantity field if not downloadable
    								if ($mp->get_setting('show_quantity') && empty($meta["mp_file"])) {
    										$button .= '<span class="mp_quantity"><label>' . __('Quantity:', 'mp') . ' <input class="mp_quantity_field" type="text" size="1" name="quantity" value="1" /></label></span> ';
    								}
    
    								if ($mp->get_setting('product_button_type') == 'addcart') {
    										$button .= '<input type="hidden" name="action" value="mp-update-cart" />';
    										$button .= '<input class="mp_button_addcart" type="submit" name="addcart" value="' . __('Add To Cart »', 'mp') . '" />';
    								} else if ($mp->get_setting('product_button_type') == 'buynow') {
    										$button .= '<input class="mp_button_buynow" type="submit" name="buynow" value="' . __('Buy Now »', 'mp') . '" />';
    								}
    						}
    				}
    
    				$button .= '</form>';
    		}
    
    		return $button;
    }
    add_filter('mp_buy_button_tag', 'custom_mp_buy_button_tag', 10, 3 );

    Cheers,
    Vinod Dalvi

  • Abigail

    Something looks strange.

    Do you know why the products look so different on the products page versus when they are inserted with a shortcode? I'm using an empty custom Marketpress theme to take advantage of the site theme's styling.

    The problem persists with both Canvas and Twenty Fourteen.

    I'd like the products to look like they do when inserted with a shortcode.

    Inserted via shortcode

    Products page

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.