Sales Booster - Progress bar shortcode - Feature Request

A

Jack Richardson

Status changed to: Done

Jack Richardson

Hello @maxmatyas,
Recently we released the update that allows to make such shortcode for your case :)
The result of it will be next -> prnt.sc/zLv1_ML_Etrb
Backend -> prnt.sc/qE9z_ySkZKDN

To implement such shortcode you need to follow the instructions below:
1/ Add next code to your Theme Options -> Theme Custom CSS -> Global CSS (prnt.sc/RO0rJi-cr_7j) or in your child-theme/style.css

.etheme_sales_booster_progress_bar_shortcode .et-cart-progress {
flex-basis: 100%;
padding: 0 5px;
flex-wrap: wrap;
}

.etheme_sales_booster_progress_bar_shortcode .product-section-02 {
flex-wrap: wrap;
}
.etheme_sales_booster_progress_bar_shortcode .et-cart-progress {
flex-wrap: wrap;
cursor: default;
background: 0 0;
color: var(--et_dark-2-white);
padding: 20px;
border: 1px solid #e1e1e1
}
.etheme_sales_booster_progress_bar_shortcode .et-cart-progress:not([data-percent-sold="100"]) .et-cart-progress-success,.etheme_sales_booster_progress_bar_shortcode .et-cart-progress[data-percent-sold="100"] .et-cart-in-progress {
display: none
}

.etheme_sales_booster_progress_bar_shortcode .et-cart-progress .et_cart-progress-bar {
position: relative;
width: 100%;
height: 12px;
text-align: start;
background-color: var(--et_border-color);
background-image: linear-gradient(135deg,rgba(255,255,255,.7) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.7) 75%,transparent 75%,transparent);
background-size: 30px 30px;
animation: progress-bar-move 2s linear infinite reverse;
display: block;
transition: all .3s ease-in-out;
border-radius: 3px;
margin-top: 10px
}
.etheme_sales_booster_progress_bar_shortcode .et-cart-progress .et_cart-progress-bar::-webkit-progress-bar {
background: 0 0
}
.etheme_sales_booster_progress_bar_shortcode .et-cart-progress .et_cart-progress-bar::-webkit-progress-value {
display: block;
height: 100%;
background-color: var(--et_green-color);
position: relative;
overflow: hidden;
border-radius: 3px;
transition: all .3s ease-in-out
}
.etheme_sales_booster_progress_bar_shortcode .et-cart-progress>span {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start
}
.etheme_sales_booster_progress_bar_shortcode .et-cart-progress .et_b-icon {
width: auto
}
.etheme_sales_booster_progress_bar_shortcode .et-cart-progress svg {
vertical-align: middle;
font-size: 1.2em
}
.etheme_sales_booster_progress_bar_shortcode .et-cart-progress .et-cart-progress-amount {
font-size: 114%;
font-weight: 600
}

@-webkit-keyframes progress-bar-move {
0% {
background-position: 0 0
}

100% {
background-position: 30px 30px
}
}

@keyframes progress-bar-move {
0% {
background-position: 0 0
}

100% {
background-position: 30px 30px
}
}

2/ Add next PHP code to your child-theme/functions.php
add_shortcode('etheme_sales_booster_progress_bar', function() {
if ( class_exists('WooCommerce') && class_exists('Etheme_WooCommerce_Cart_Checkout')) {
$cart_checkout = Etheme_WooCommerce_Cart_Checkout::get_instance();
echo '';
$cart_checkout->sales_booster_progress_bar();
echo '';
}
});

3/ Add next shortode to your page using Page builder (prnt.sc/xGtbhXQJl1b9) or classic editor (prnt.sc/QoGAB0wYPLuZ)

4/ If you need to change values/texts of progress bar

4.1/ Please, go to XStore Control Panel -> Sales Booster -> Cart/Checkout -> Enable Progress Bar on Cart page (enable the option) -> prnt.sc/nsixivXJvzEc
4.2/ Change options due to your needs -> prnt.sc/3A-B_Hh2ETrn and save settings
P.S. If you don't want to show that bar on cart you may simple switch it off after changes of its options (but it will still be used for the shortcode you added :)).
4.3/ Custom changes were applied -> prnt.sc/2bs46dRSXFLT

I really hope the info above is good written to understand and make such things work for you guys voted for such feature. We decided that it will be better to have in child-theme of you (two real voters) than add the code globally without any useful cases for all other customers.

Regards, Jack Richardson

Reply

Jack Richardson

Hello @maxmatyas
Thanks for writing us !
I think it could be a good idea but let's make your request more readable for most people :)
I think it could be titled like 'Add shortcode to output Sales Booster Progress Bar anywhere on pages'.
What do you think about such title of request (for other users who could leave their voice - to make more understandable from first lines of title)
Are you agree with it ? If so, are you able to edit your request or may I do it for you ?
Keep in mind that anyway it is needed to get some more voices from others to move request on next steps :)
Regards, Jack Richardson

Reply

Voters 2