Use tags in shipping labels

  • Resolved samrot

    (@samrot)


    3 months, 3 weeks ago

    Hi Diego,

    How can I use HTML tags (<a><br><small>) in Shipping labels?

    I am able to add them and see them on the WooCommerce shipping settings but then they disappear on the fluid checkout.

    As an alternative I tried to add them through jQuery but elements get reloaded a few seconds after page was loaded (which is why I’m using the setTimeout function) and also when changing the shipping method selection so the elements added by jQuery disappear and can’t seem to find the correct trigger.

    This is the code that I’m using

    add_action('woocommerce_after_checkout_form', 'add_link_to_shipping');

    function add_link_to_shipping() {
    	if ( is_checkout() ) {
    ?>
    <script>
    jQuery(document).ready(function ($) {
    setTimeout(function() {
           $("label[for='shipping_method_0_local_pickup3'] .shipping-method__option-text").append(jQuery("<a  target='_blank'>Ver en Google Maps</a>"));
    }, 2000);
    });
      </script><?php
    }
    }

    Of course, using HTML tags would be the best solution for me.

    Looking fwd to your comments.

    Best!

Viewing 1 replies (of 1 total)
  • Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @samrot,

    That is the default behavior for the shipping methods labels on the frontend, also when Fluid Checkout is deactivated.

    With Fluid Checkout, you can use the hook fc_shipping_method_option_description to add a description text for the shipping methods which accepts simple HTML tags.

    You would need to filter which shipping methods you want to add the description for as shown on the code snippet below:

    /**
     * Add a description for the a specific shipping method.
     */
    function fluidcheckout_add_shipping_method_description( $method_description, $method ) {
    	// Bail if not the target shipping method
    	if ( 'flat_rate' !== $method->get_method_id() ) { return; }

    	// Output the description
    	$method_description = __( 'The shipping method description.', 'your-text-domain' ) . ' ' . '<strong>(50+)</strong> <br><a  target="_blank">Ver en <b>Google Maps</b></a>';
    	
    	return $method_description;
    }
    add_action( 'fc_shipping_method_option_description', 'fluidcheckout_add_shipping_method_description', 10, 2 );

    This is how the shipping method description would be displayed on the checkout page when using Fluid Checkout and this code snippet:

    I’m closing this ticket for now. If you need further assistance related to this issue, simply reply to this message to re-open it.

    Best,
    Diego.

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