question about shipping options

My client wanted to ask the following:

"I think that people can't really tell that there are more shipping options. I am still getting UPS choices when I usually hardly ever get a UPS shipment. Is there a way to make it more obvious that there are more shipping options?"

Basically on checkout, is it possible to highlight the different shipping options in a more obvious way than just the dropdown? Thanks.

  • PC

    Hello there,

    Thanks for posting on the forums. I hope things are fine at your end of the world !

    Basically on checkout, is it possible to highlight the different shipping options in a more obvious way than just the dropdown? Thanks

    Unfortunately its not possible to show that as a list out of the box however it should be a great feature if added to the plugin where we can show the shipping options as a dropdown or a radio list.

    Infact adding the shipping company icons would also be great :slight_smile:

    Let me discuss this with the Second Level Support to see if they can give us some quick code to add this to the shop.

    One of them should be around soon.

    Cheers, PC

  • aristath

    One more question on this issue. When Marketpress displays the shipping options in the dropdown, the price per option is getting cut off because the box is too small, especially for the USPS options that have longer names. Can I make the dropdown box bigger so all the text can be read? Thanks

    Sure!
    Try adding this CSS:

    #mp_cart_shipping input,
    $mp_cart_shipping select {
      width: 100%;
    }

    Also, is it possible to have USPS come up as the default shipping option rather than UPS? Thanks.

    Not by default... You'll have to write some custom js in your theme to get that working. You can see how to do that here: http://stackoverflow.com/a/496126

    Let me know if that works for you!

    Cheers,
    Ari.

  • Saurabh

    Hi @nfisher,

    Hope you are doing great!

    There are two ways of doing this. One is to edit the core files, specifically, marketpress.php, at about line 5493:

    <h3><?php _e('Shipping Method & Tracking Number:', 'mp'); ?></h3>
                 <p>
                        <select name="mp_shipping_method">
                            <option value="other"><?php _e('Choose Method:', 'mp'); ?></option>
                            <option value="UPS"<?php selected(@$order->mp_shipping_info['method'], 'UPS'); ?>>UPS</option>
                            <option value="FedEx"<?php selected(@$order->mp_shipping_info['method'], 'FedEx'); ?>>FedEx</option>
                            <option value="USPS"<?php selected(@$order->mp_shipping_info['method'], 'USPS'); ?>>USPS</option>
                            <option value="DHL"<?php selected(@$order->mp_shipping_info['method'], 'DHL'); ?>>DHL</option>
                            <option value="other"<?php selected(@$order->mp_shipping_info['method'], 'other'); ?>><?php _e('Other', 'mp'); ?></option>
                            <?php do_action('mp_shipping_tracking_select', @$order->mp_shipping_info['method']); ?>
                        </select>
                        <input type="text" name="mp_tracking_number" value="<?php esc_attr_e(isset($order->mp_shipping_info['tracking_num']) ? $order->mp_shipping_info['tracking_num'] : ''); ?>" size="25" />
                        <input type="submit" class="button-secondary" name="add-tracking" value="<?php _e('Save &raquo;', 'mp'); ?>" /><?php if ($order->post_status == 'order_received' ||$order->post_status == 'order_paid') { ?> <input type="submit" class="button-secondary" name="add-tracking-shipped" value="<?php _e('Save & Mark as Shipped &raquo;', 'mp'); ?>" /><?php } ?>
                        </p>

    Of the block of code above, this is the code that outputs the select input:

    <select name="mp_shipping_method">
    	<option value="other"><?php _e('Choose Method:', 'mp'); ?></option>
    	<option value="UPS"<?php selected(@$order->mp_shipping_info['method'], 'UPS'); ?>>UPS</option>
    	<option value="FedEx"<?php selected(@$order->mp_shipping_info['method'], 'FedEx'); ?>>FedEx</option>
    	<option value="USPS"<?php selected(@$order->mp_shipping_info['method'], 'USPS'); ?>>USPS</option>
    	<option value="DHL"<?php selected(@$order->mp_shipping_info['method'], 'DHL'); ?>>DHL</option>
    	<option value="other"<?php selected(@$order->mp_shipping_info['method'], 'other'); ?>><?php _e('Other', 'mp'); ?></option>
    	<?php do_action('mp_shipping_tracking_select', @$order->mp_shipping_info['method']); ?>
    </select>

    So, as long as the name attribute of the form input remains mp_shipping_method and the value is one of the acceptable ones, you could replace it with any input.

    The other option is to use js, as @aristath has mentioned earlier.

    If you could confirm the alternative input (radio, etc) to use and the way you want to go about it, we can provide code that'll let you achieve that.

    Best

    Saurabh

  • Saurabh

    Hi there!

    Place this code either in your functions.php or a new plugin:

    add_action( 'wp_footer', 'mp_select_box_to_radio_js');
    
    function mp_select_box_to_radio_js(){
    
    	?>
    	<script type="text/javascript">
    		$select =jQuery( "select[name='mp_shipping_method']" );
    
    		// make USPS, the first one
    		$prefer = $select.find("option[value='USPS']").first();
    		$select.find("option[value='USPS']").remove();
    		$select.prepend($prefer);
    
    		// remove extra option
    		$select.find("option[value='other']").first().remove();
    
    		$select.find('option').each(function(j, option){
    			var $option = jQuery(option);
    			// Create a radio:
    			var $radio = jQuery('<input type="radio" />');
    			// Set name and value:
    			$radio.attr('name', $select.attr('name')).attr('value', $option.val());
    			// Set checked if the option was selected
    			if ($option.attr('selected')) $radio.attr('checked', 'checked');
    			// create a label
    			$label = $('<label />').text($option.text());
    			$label.prepend($radio);
    			// Insert radio before select box:
    			$select.before($label);
    		});
    		$select.remove();
    	</script>
    	<?php
    }

    Do let me know how that works out.

    Best

    Saurabh

  • nfisher

    Hi Saurabh. I pasted it in the file like this and it crashed the site:

    <?php
    /*
     WARNING: This file is part of the core Ultimatum framework. DO NOT edit
     this file under any circumstances.
     */
    
    /**
     *
     * This file is a core Ultimatum file and should not be edited.
     *
     * @package  Ultimatum
     * @author   Wonder Foundry http://www.wonderfoundry.com
     * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
     * @link     http://ultimatumtheme.com
     * @version 2.50
     */
    
    $theme = array(
    	'theme_name' => 'Ultimatum',
    	'theme_slug' => 'ultimatum',
    	);
    require_once (dirname( __FILE__ ) .'/wonderfoundry/wonderworks.php');
    
    ?>
    
    add_action( 'wp_footer', 'mp_select_box_to_radio_js');
    
    function mp_select_box_to_radio_js(){
    
    	?>
    	<script type="text/javascript">
    		$select =jQuery( "select[name='mp_shipping_method']" );
    
    		// make USPS, the first one
    		$prefer = $select.find("option[value='USPS']").first();
    		$select.find("option[value='USPS']").remove();
    		$select.prepend($prefer);
    
    		// remove extra option
    		$select.find("option[value='other']").first().remove();
    
    		$select.find('option').each(function(j, option){
    			var $option = jQuery(option);
    			// Create a radio:
    			var $radio = jQuery('<input type="radio" />');
    			// Set name and value:
    			$radio.attr('name', $select.attr('name')).attr('value', $option.val());
    			// Set checked if the option was selected
    			if ($option.attr('selected')) $radio.attr('checked', 'checked');
    			// create a label
    			$label = $('<label />').text($option.text());
    			$label.prepend($radio);
    			// Insert radio before select box:
    			$select.before($label);
    		});
    		$select.remove();
    	</script>
    	<?php
    }
  • Saurabh

    Hi,

    You'd need to paste the code inside the closing php tag (?>):

    <?php
    /*
     WARNING: This file is part of the core Ultimatum framework. DO NOT edit
     this file under any circumstances.
     */
    
    /**
     *
     * This file is a core Ultimatum file and should not be edited.
     *
     * @package  Ultimatum
     * @author   Wonder Foundry http://www.wonderfoundry.com
     * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
     * @link     http://ultimatumtheme.com
     * @version 2.50
     */
    
    $theme = array(
    	'theme_name' => 'Ultimatum',
    	'theme_slug' => 'ultimatum',
    	);
    require_once (dirname( __FILE__ ) .'/wonderfoundry/wonderworks.php');
    
    add_action( 'wp_footer', 'mp_select_box_to_radio_js');
    
    function mp_select_box_to_radio_js(){
    
    	?>
    	<script type="text/javascript">
    		$select =jQuery( "select[name='mp_shipping_method']" );
    
    		// make USPS, the first one
    		$prefer = $select.find("option[value='USPS']").first();
    		$select.find("option[value='USPS']").remove();
    		$select.prepend($prefer);
    
    		// remove extra option
    		$select.find("option[value='other']").first().remove();
    
    		$select.find('option').each(function(j, option){
    			var $option = jQuery(option);
    			// Create a radio:
    			var $radio = jQuery('<input type="radio" />');
    			// Set name and value:
    			$radio.attr('name', $select.attr('name')).attr('value', $option.val());
    			// Set checked if the option was selected
    			if ($option.attr('selected')) $radio.attr('checked', 'checked');
    			// create a label
    			$label = $('<label />').text($option.text());
    			$label.prepend($radio);
    			// Insert radio before select box:
    			$select.before($label);
    		});
    		$select.remove();
    	</script>
    	<?php
    }
    ?>

    That should fix the error.

    Best

    Saurabh

  • Saurabh

    Hi @nfisher,

    Hope you are well today!

    Please replace the earlier code with the following:

    add_action( 'wp_footer', 'mp_select_box_to_radio_js');
    
    function mp_select_box_to_radio_js(){
    
    	?>
    	<script type="text/javascript">
    		$select =jQuery( "#mp-shipping-select" );
    		// make USPS, the first one
    		$prefer = $select.find("option[value='usps']");
    		$prefer.remove();
    		$select.prepend($prefer);
    
    		$select.find('option').each(function(j, option){
    			var $option = jQuery(option);
    			// Create a radio:
    			var $radio = jQuery('<input type="radio" />');
    			// Set name and value:
    			$radio.attr('name', $select.attr('name')).attr('value', $option.val());
    			// Set checked if the option was selected
    			if ($option.attr('selected')) $radio.attr('checked', 'checked');
    			// create a label
    			$label = jQuery('<label />').text(' '+ $option.text());
    			$label.prepend($radio);
    			// Insert radio before select box:
    			$select.before($label);
    
    		});
    		$select.before(jQuery('<br>'));
    		$select.remove();
    
    		function mp_refresh_option_shipping() {
    			jQuery("#mp_shipping_submit").hide();
    			jQuery("#mp-shipping-select-holder").html('<img src="'+MP_Ajax.imgUrl+'" alt="Loading..." />');
    
    			var serializedForm = jQuery('form#mp_shipping_form').serialize();
    
    			jQuery('#mp_no_shipping_options').val(1); // Set the error flag
    
    			jQuery.ajax({
    				type: 'POST',
    				url: MP_Ajax.ajaxUrl,
    				data: serializedForm,
    
    				success: function(data) {
    						if(typeof data == 'object'){
    							jQuery("#mp-shipping-select-holder").html(data.error);
    						} else {
    							jQuery('#mp_no_shipping_options').val(0); // Clear the error flag
    							jQuery("#mp-shipping-select-holder").html(data);
    						}
    				    	jQuery("#mp_shipping_submit").show();
    					}
    
    			});
    		}
    
    		jQuery('#mp-shipping-select-td').find('input[name="shipping_option"]').change(function() {mp_refresh_option_shipping();});
    	</script>
    	<?php
    }

    I have tested this and it should get you the desired results.

    Best

    Saurabh

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.