Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #3961896
Free shipping bar - Possible to get text inside the bar?
Open

Comments

  • Christoffer Grande started the conversation

    Hello,


    Is it a option to have the shipping text inside the countdown bar?

  •  1,416
    Dustin replied

    Hi Christoffer,

    Please add the below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

    .wpcfb-progress-bar, .wpcfb-progress-amount {
        height: 20px;
    }
    
    .wpcfb-style-rounded .wpcfb-progress-bar, .wpcfb-style-rounded .wpcfb-progress-amount {
            border-radius: 10px;
    }
    
    .wpcfb-progress-bar:after {
        content: 'Your text here!';
        position: absolute;
        height: 20px;
        line-height: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    And the result:

    1375218322.png

    Best regards,
    Dustin

  • Christoffer Grande replied

    Hello mate.

    Thanks, but not actually what I was seeking, because I want to show «Remaining» text inside the bar. 

    Buy for {remaining} and get free shipping.

    How can that be solved?

  •  1,416
    Dustin replied

    Please update our plugin to the latest version 1.4.4, and add the custom code below. (How to add custom code? ↗):

    add_filter( 'wpcfb_progress_bar_attrs', function ( $attrs, $remaining ) {
    	$attrs['remaining'] = 'Buy for ' . wp_strip_all_tags( wc_price( $remaining ) ) . ' and get free shipping.';
    
    	return $attrs;
    }, 99, 2 );

    Then, replace the old CSS code with a new one:

    .wpcfb-progress-bar, .wpcfb-progress-amount {
        height: 20px;
    }
    
    .wpcfb-style-rounded .wpcfb-progress-bar, .wpcfb-style-rounded .wpcfb-progress-amount {
            border-radius: 10px;
    }
    
    .wpcfb-progress-bar:after {
        content: attr(data-remaining);
        position: absolute;
        height: 20px;
        line-height: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    Best regards,
    Dustin