Button: PDF ICON instead of text “Download cart to PDF”

Hello

Can you try the following CSS

a.button.cart-pdf-button {
    appearance: none;
    background: url( 'https://test.pahedomotica.nl/wp-content/uploads/pdf-logo-50px.png' );
    background-size: cover;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-indent: -500px;
    overflow: hidden;
    vertical-align: middle;
    font-size: 0px;
}

You are good, that works.
Is it possible to add a “alt” and “tittle” tekst? on hover it’s now grey and no icon.
See: https://test.pahedomotica.nl/winkelmand/

Thanks Paul

Yeah you would have to add something like this to your functions.php:

function child_wc_cart_pdf_button() {
    if( ! is_cart() || WC()->cart->is_empty() ) {
        return;
    }
    
    ?>

    <a href="<?php echo esc_url( wp_nonce_url( add_query_arg( array( 'cart-pdf' => '1' ), wc_get_cart_url() ), 'cart-pdf' ) );?>" class="cart-pdf-button" target="_blank" title="<?php esc_attr_e( 'Your title here', 'wc-cart-pdf' ); ?>">
        <img src="//test.pahedomotica.nl/wp-content/uploads/pdf-logo-50px.png" alt="<?php esc_attr_e( 'Alt tag here', 'wc-cart-pdf' ); ?>" width="50" height="50" />
    </a>

    <?php
}
add_action( 'woocommerce_proceed_to_checkout', 'child_wc_cart_pdf_button', 21 );
remove_action( 'woocommerce_proceed_to_checkout', 'wc_cart_pdf_button', 21 );

You probably won’t need the additional CSS I provided earlier

• This reply was modified 4 years, 6 months ago by David Jensen.
• This reply was modified 4 years, 6 months ago by David Jensen.

This one doesn’t change it, also the icon is gone when I disable the earlyer added css code.

Oops I modified the code above, please copy the new code above and try again.

?? sorry, still no change.

Hmm it’s working on my end. Are you placing the code in your child themes functions.php?

My mistake!
I had this to move the button to the top:
remove_action( ‘woocommerce_proceed_to_checkout’, ‘wc_cart_pdf_button’, 21 );
add_action( ‘woocommerce_before_cart’, ‘wc_cart_pdf_button’ );

Alright cool, you can remove the green background by removing the ‘button’ class from the a element.

Is it possible to move it also to the top ??

Yes just replace this line:

add_action( 'woocommerce_proceed_to_checkout', 'child_wc_cart_pdf_button', 21 );

With this:

add_action( 'woocommerce_before_cart', 'child_wc_cart_pdf_button' );

Thanks it works ??

Ok great

Can you point me in the right direction for this (where to do) ??
you can remove the green background by removing the ‘button’ class from the a element.

In the code I gave you previously to paste in your functions.php:

<a href="<?php echo esc_url( wp_nonce_url( add_query_arg( array( 'cart-pdf' => '1' ), wc_get_cart_url() ), 'cart-pdf' ) );?>" class="cart-pdf-button button" target="_blank" title="<?php esc_attr_e( 'Your title here', 'wc-cart-pdf' ); ?>">
        <img src="//test.pahedomotica.nl/wp-content/uploads/pdf-logo-50px.png" alt="<?php esc_attr_e( 'Alt tag here', 'wc-cart-pdf' ); ?>" width="50" height="50" />
    </a>

Change class="cart-pdf-button button"

To class="cart-pdf-button"

• This reply was modified 4 years, 6 months ago by David Jensen.
• This reply was modified 4 years, 6 months ago by David Jensen.
• This reply was modified 4 years, 6 months ago by David Jensen.