Support » Plugin: WooCommerce » Create a more functional checkout page

  • Resolved leon2068

    (@leon2068)


    Hi there~

    I would like to add a shipping method block including 2 options on my checkout page.
    Option 1: My own courier account. (customer’s courier account)
    Option 2: Choose an express company with shipping fee I provided.
    (ref: picture)

    How to do that?
    Thank you!

Viewing 12 replies - 1 through 12 (of 12 total)
  • These are different shipping methods. Go to:
    Dashboard > WooCommerce > Shipping tab

    I don’t know how many countries you ship to, you may need more than one zone. Visit each zone, and add your two shipping methods. Use the flat rate method – you can rename it.

    Adding the fancy logos would need a bit of code. When you’ve setup the two methods, and these will be just text initially, please post the link to your site.

    Thread Starter leon2068

    (@leon2068)

    Hi Lorro-

    Thanks for your reply.
    I just made a test, but the shipping cost showcased neither on the cart page nor checkout page.
    cart page screenshot
    checkout page screenshot

    What can I do here?

    Thank you!

    At:
    Dashboard > WooCommerce > Settings > General tab
    make sure you have set either “sell to all countries” or, if selling to specific countries, that “United States (US)” is selected.

    At:
    Dashboard > WooCommerce > Settings > Shipping tab
    make sure that, in your US shipping zone, US is showing in the zone regions field.

    At:
    Dashboard > WooCommerce > Settings > Shipping tab, Shipping Options sub-page
    “Enable the shipping calculator on the basket page” is checked.

    For testing at least, at:
    Dashboard > WooCommerce > Settings > General tab
    set default custom location = shop base address

    Hows that do?

    Thread Starter leon2068

    (@leon2068)

    Hi Lorro-

    Thanks for your reply.
    I double checked the settings you advise above and made sure I have done all of those but sadly that I got the same result, the shipping cost didn’t showcase.

    Setting 1 2 3 4

    How can we do here?
    Thank you!

    Ensure cart and checkout pages are not cached.

    See if there is a software conflict. Try temporarily deactivating all plugins except WooCommerce and switch to the Storefront theme. Can you see shipping now? Rectivate one-by-one and check to see what masking shipping.

    Thread Starter leon2068

    (@leon2068)

    Hi Lorro-

    Thanks for your reply.

    I only left woocommerce activated but it still doesn’t work. I was wondering if this is because I have added some codes in my functions.php? But I have also deleted all the extra codes and left the original version in there. (Theme: Astra)

    How do you think?

    Thank you

    Thread Starter leon2068

    (@leon2068)

    All my above replies were base on my testing localhost, weird but I just tried on my real website, the shipping cost block appeared.

    OK. So the next thing is to get the shipping company logos in there. We can’t put them between the radio button and the label because Woo don’t give us an action at that point. But there is an action after the label that we can tap into:

    add_action( 'woocommerce_after_shipping_rate', 'shipping_logos', 10 );
    function shipping_logos( $method ) {
      $label = $method->get_label();
      switch( $label ) {
        case 'DHL':
          print '<img src="http://www.my-domain.co.uk/wp-content/uploads/DHL-logo.png" class="shipping_logo">';
          break;
        case 'EMS':
          print '<img src="http://www.my-domain.co.uk/wp-content/uploads/EMS-logo.png" class="shipping_logo">';
          break;
        default:
      }
    }

    The labels in the case statements must correspond to the labels you used when setting up the corresponding shipping methods. The logo srcs come from the logos you must have uploaded to your media library.

    The code goes in functions.php for your child theme.

    Works with Astra and any themes which use the default WooCommerce hooks.

    Thread Starter leon2068

    (@leon2068)

    Hi Lorro-

    I did it! You are amazing!!

    In this case, I was wondering if I can do an advanced improvement. Please see this image, is it possible to insert two form elements after the third radio element(own account) and placeholder texts as below:

    • please enter express company
    • Please enter courier account number

    Then on backend I can see what customers type here.

    Thank you so much!

    Its possible but it would need more development code than could be expected for a forum answer. There needs to be validation of the user’s data, add the data to the order, some extension of the order screen so the data can be seen. Both admin and user (through my-account) would want to be able to edit the data if the user’s plans change. You may want to add the extra data to various emails. So a non-trivial job.

    What you could do is add “Own courier” as a free method and ask the user through a screen note to put that data in order notes. If they omit to do that you would need to contact them. But if they put “to be determined” for their courier name, you would still need to contact them.

    Thread Starter leon2068

    (@leon2068)

    Hi Lorro-

    Well noted above, yes I have already designed the order notes areas for customers to fill in the courier account details if they choose the “own account” option.

    Anyway, that is an advanced improvement in my plan, if it doesn’t come true, I am totally fine.

    Again, THANK YOU a MILLION from the bottom of my heart!

    Plugin Support abwaita

    (@abwaita)

    Glad to hear that you got a solution!

    I’ll go ahead and mark this thread as resolved now. If you have any further questions, I recommend creating a new thread.

    Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.