Showing minicart icon in header on the right pages

  • Resolved benorange

    (@benorange)


    2 years, 7 months ago

    Hi,

    I am looking for help with mini cart placement for my demo page, thanks in advance. I have an ecommerce nav menu and a main site nave menu. The mini shopping cart icon is showing on all of the site pages while I want it to only show on the ecommerce pages.

    I tried this in functions.php:

    // Hide WooCommerce Cart Icon When Empty
add_action( 'wp_footer', function() {
    if ( WC()->cart->is_empty() ) {
        echo '<style type="text/css">a.cart-contents.shopping-bag.has-svg-icon{ display: none; }</style>';
    }
});

    Together with redirect to cart option selected in woocommerce settings (basically to refresh the page and display the cart in header once it has a product in cart).

    This works almost perfectly and hides the cart icon on the main site pages (as it is empty before visiting shop), however it doesn’t redirect to cart from the product page add-to-cart button (redirect only works with the add to cart option on product thumbnail). This means that user can add an item to cart and the mini-cart icon doesn’t reappear until they hit refresh. This makes the flow break down.

    How do you recommend displaying the mini cart icon only on shop pages?

    Bw,
    Ben

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

  • Hello,

    Kindly note our support for custom code is out of scope, however, I’m going to leave this thread open (since it is a development topic) for a bit to see if anyone is able to chime in to help you out.

    I can also recommend the WooCommerce Developer Resources Portal for resources on developing for WooCommerce.

    You can also visit:
    WooCommerce Facebook group

    The #developers channel of the WooCommerce Community Slack.

    Thank you.

    Thread Starter benorange

    (@benorange)

    Hi @ihereira,

    Thank you. I was just describing what I had tried and why I found it unsuitable. Looking for recommended method only. Hoping there’s a setting I missed or something like that.

    Bw,
    Ben

    Hello,

    it doesn’t redirect to cart from the product page add-to-cart button (redirect only works with the add to cart option on product thumbnail).

    Can you go to WooCommerce > Settings > Products > General, and check “Redirect to the cart page after successful addition” to see if that helps?


    Link to image: https://snipboard.io/9I7HDc.jpg

    Thread Starter benorange

    (@benorange)

    Hi @maykato,

    Thanks. This is the redirection option I mentioned in post:
    “Together with redirect to cart option selected in woocommerce settings (basically to refresh the page and display the cart in header once it has a product in cart).”

    Using this option, I find that this add to cart button does redirect: https://snipboard.io/905bhq.jpg

    But from product page add to cart doesn’t redirect: https://snipboard.io/Jaw4on.jpg

    Both options are possible user routes.

    Bw,
    Ben

    Hi @benorange

    Thanks for clarifying.

    You can try using the Add to Cart Redirect plugin to redirect customers directly to any page after adding a product to the cart. You can go through its documentation here: https://woocommerce.com/document/add-to-cart-redirect/

    For any pre-sales questions related to this plugin, please you can create a ticket here. You’d need to log into your WooCommerce account before you can access that page, or create an account if you do not have one. Just so you know, in the WooCommerce.com marketplace we offer a 30-day refund policy so you can test the extension and make sure it works for you.

    Alternatively, you can also achieve the desired effect programmatically through the snippets shared in this article: https://jeroensormani.com/redirect-users-after-add-to-cart/

    I hope this helps!

    Thread Starter benorange

    (@benorange)

    Hi @margaretwporg,

    Thanks, this is interesting.

    Before I close this post. Please can I confirm that there is no recommended solution to my original question?

    “How do you recommend displaying the mini cart icon only on shop pages?”

    The reason I ask is that the hide-minicart-when-empty method + redirect-on-add method are still not ideal for a few reasons, such as:

    moving away from ecommerce section of website with a loaded cart will mean the mini cart icon is visible in non shopping sections..
    also updating the number of product items is not immediately reflected by the number adjacent to mini cart icon in header..
    also it would be nice for shoppers to be able to choose more items before going to cart..

    Bw,
    Ben

    Thread Starter benorange

    (@benorange)

    I am testing a new solution to original problem.

    Custom css to hide the original header mini cart icon:

    a.cart-contents.shopping-bag.has-svg-icon{
	display: none !important;
}

    And using the free plugin WP Menu Cart

    This has the settings needed to assign to only a specific nav menu and therefore show on correct pages.

    +’ve = appears exactly when required and updates dynamically without refresshing/redirecting

    -‘ve = I’ve lost the nice mini-cart dropdown on hover

    Will close ticket after more testing. Feel free to comment if you think it’s not a good plan.

    Bw,
    Ben

    Thread Starter benorange

    (@benorange)

    Snip for interest

    Thread Starter benorange

    (@benorange)

    Yep, this seems to work fine. Thanks for the help.

    Bw,
    Ben

    Mirko P.

    (@rainfallnixfig)

    Glad to hear you got this sorted! Thanks for letting us know!
    ?
    If you have any further questions, I recommend creating a new thread.

    Cheers.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Showing minicart icon in header on the right pages’ is closed to new replies.

Tags