Voters 4
4
Modifications to popup cart: include Free Shipping progress bar and another one (see details)
- Done
 |
IvanMTK |
As you can see in the screenshot attached (number 3 on the image), we would like to show the “Free Shipping” progress bar, the same one that appears on the off-canvas shopping cart, on this location.
We would also like the show the Add to Cart buttons for the “You May Be Interested In…” product options (number 4 on the image).
Thanks!
Ivan
Activity Newest / Oldest
Jack Richardson
Status changed to: Done
Jack Richardson
Hello everyone,
We implemented such option in our latest theme update v8.3.2/core v4.3.2
All new sweet features you may check in our changelog -> xstore.8theme.com/update-history/
Regards, Jack Richardson
Jack Richardson
Status changed to: In progress
Jack Richardson
Status changed to: Planned
Jack Richardson
Hello @IvanMTK,
It is already possible to add free shipping bar using next code snippets you should add to your child-theme/functions.php (your file will look similar to the next picture -> prnt.sc/W5JEgpJZPZ6R)
1/ add_action('etheme_product_added_to_cart_section_02', 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 '';
}
});
2/
// custom css
add_action('wp_head', function() { ?>
.popup-added-to-cart .product-section-02 {
flex-wrap: wrap;
}
.popup-added-to-cart .etheme_sales_booster_progress_bar_shortcode {
flex-basis: 100%;
}
.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 {
-ms-flex-wrap: wrap;
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
}
}
Jack Richardson
Hello @IvanMTK,
Thanks for the request !
As you know we implement first most-voted or high priority features so we need to wait untill your request will become popular among users.
Also from the first view as developer I can tell you that I think free shipping bar could be possible to add but about add to cart button I am not sure, because clicking the button will reopen the silimar popup and it could create js conflicts.
Anyway we should wait for more voices from our clients to understand if this request is popular or just one-user request.
Thanks for understanding !
Regards, Jack Richardson