Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 28, 2016 at 3:58 pm #692770
    Dario

    Hi,

    I’ve selected in the Theme Options Header Shopping Cart Icon: Always Display attached to the main menu

    But, I’d like to remove the icon only when the cart is empty… of course it isn’t possible using CSS

    Could you help me to find out a solution?

    Many thanks in advance, team!

    September 28, 2016 at 4:03 pm #692772
    Yigit

    Hey Dario!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    .cart_dropdown.av-display-cart-on-load {
    display: block !important;
}
.cart_dropdown {
    display: none !important;
}

    Regards,
    Yigit

    September 28, 2016 at 4:41 pm #692811
    Dario

    Thanks for your reply, Yigit!

    The issue could be if your cart is NOT empty and the page is reloaded…
    So, you won’t be able to checkout…

    Could you provide me other solution, maybe using function?

    Many thanks!

    September 29, 2016 at 11:27 am #693049
    Jordan

    Hi Dario,

    Have you tried the code Yigit provided? The css only hides the cart when it is empty but there is a different class when the cart has something in it which displays the cart again.

    Let us know if we are still misunderstanding.

    Best regards,
    Jordan

    September 29, 2016 at 1:01 pm #693073
    Dario

    Hi Jordan,

    my goal is to show the cart ONLY when a product is added.

    – 1 or more products: cart is visible
    – no products: cart is NO visible

    That is why I thought that it was easily to program using function.php

    Many thanks in advance for your reply!

    • This reply was modified 8 years, 1 month ago by Dario.
    October 3, 2016 at 4:22 am #694396
    Ismael

    Hi,

    Please remove the css modification then add this in the functions.php file:

    function add_custom_script(){
?>
<script type="text/javascript">
(function($){
	function a() {
        var empty = $('.cart_list .empty').length;
	    if(empty > 0) $('.cart_dropdown').addClass('hide_cart');
	}

	setTimeout(function() {
		a();
	}, 500);

	function b() {
	    $('#top .avia_cart_buttons .button').bind('click', function() {
            var empty = $('.cart_list .empty').length;
		    if(!empty) return;

			$('.cart_dropdown').removeClass('hide_cart');
		    $('.cart_dropdown').addClass('show_cart');
	    });
	}

	b();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    And the following css code in the Quick CSS field:

    @media only screen and (min-width: 767px) {
    .responsive #top .cart_dropdown {
        opacity: 1;
    }

    .responsive #top .cart_dropdown.hide_cart {
        opacity: 0;
    }

    .responsive #top .cart_dropdown.show_cart {
        opacity: 1;
    }
}

    Best regards,
    Ismaelo

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.