简体   繁体   中英

Add a link to WooCommerce cart notices without changing the default style sheet

I'm trying to hyperlink text on a WooCommerce custom cart notice. But when I add the following bit of code it uses the default style sheet to display the link as a button on the far right. I just want to hyperlink the words "Pallet Shipping" on this specific notice without changing the style sheet for all other notices. Is there a way I can add a class to this specific notice?

This is what I want to add:

<a title="Learn More About Pallet Shipping" href="https://multitrance.com/shipping-delivery/?utm_source=website&utm_medium=checkout-page-notice&utm_campaign=pallet-shipping#Pallet_Shipping" target="_blank" rel="noopener noreferrer"><span style="color: white; text-decoration: underline">Pallet Shipping</span></a>

This is the snippet that generates the notice:

add_action( 'woocommerce_before_calculate_totals', 'cart_items_shipping_class_message', 20, 1 );
function cart_items_shipping_class_message( $cart ){

    if ( ! is_cart() || ( is_admin() && ! defined( 'DOING_AJAX' ) ) )
        return;

    if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 )
        return;

    $shipping_class_id = '150'; // Your shipping class Id

    // Loop through cart items
    foreach( $cart->get_cart() as $cart_item ){
        // Check cart items for specific shipping class, displaying a notice
        if( $cart_item['data']->get_shipping_class_id() == $shipping_class_id ){
            wc_clear_notices();
            wc_add_notice( sprintf('Cartons of Beer can only be shipped via Pallet Shipping. To reveal much cheaper UPS Shipping Rates, remove Beer Cartons from the Cart.', 'woocommerce'),
                'notice' );
            break;
        }
    }
}

Doing this, creates a button:

add_action( 'woocommerce_before_calculate_totals', 'cart_items_shipping_class_message', 20, 1 );
function cart_items_shipping_class_message( $cart ){

    if ( ! is_cart() || ( is_admin() && ! defined( 'DOING_AJAX' ) ) )
        return;

    if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 )
        return;

    $shipping_class_id = '150'; // Your shipping class Id

    // Loop through cart items
    foreach( $cart->get_cart() as $cart_item ){
        // Check cart items for specific shipping class, displaying a notice
        if( $cart_item['data']->get_shipping_class_id() == $shipping_class_id ){
            wc_clear_notices();
            wc_add_notice( sprintf('Cartons of Beer can only be shipped via <a title="Learn More About Pallet Shipping" href="https://multitrance.com/shipping-delivery/?utm_source=website&utm_medium=checkout-page-notice&utm_campaign=pallet-shipping#Pallet_Shipping" target="_blank" rel="noopener noreferrer"><span style="color: white; text-decoration: underline">Pallet Shipping</span></a>. To reveal much cheaper UPS Shipping Rates, remove Beer Cartons from the Cart.', 'woocommerce'),
                'notice' );
            break;
        }
    }
}

This is the result:

在此处输入图片说明

This is what I want to achieve:

在此处输入图片说明

I resolved it by adding a class to the link and styling it to my linking using Custom CSS.

Here's the HTML code:

<a class=pallet-shipping-checkout-notice title="Learn More About Pallet Shipping" href="https://multitrance.com/shipping-delivery/?utm_source=website&utm_medium=checkout-page-notice&utm_campaign=pallet-shipping#Pallet_Shipping" target="_blank" rel="noopener noreferrer">Pallet Shipping</a>

Here's the CSS (you need to style the default style sheet):

a.pallet-shipping-checkout-notice {
        float: none;
        text-decoration: underline;
        padding: 0;
        text-transform: none;
        font-size: inherit;
        font-weight: inherit;
        background-color: #3c9cd2 !important;
        letter-spacing: inherit;
}
a:hover.pallet-shipping-checkout-notice {
        color: #f7de00;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM