[Support request] WooCommerce Side Cart Integration

[pairfum]

Dear Support,

We are currently evaluating the premium versions of these two ‘side cart’ plugins:
https://wordpress.org/plugins/side-cart-woocommerce/
https://wordpress.org/plugins/woo-fly-cart/

Both plugins offer two options to show a cart:
– as a separate, floating cart, or
– integrated into the navigation bar as a normal cart icon.

When clicking either of these two cart icons, the side cart opens. You can see this already working on our staging site:
https://staging.pairfum.com

On mobiles & tablets we use the GP off-canvas menu and the cart icon shows at the bottom of this menu.

However, it does not show in the navigation bar when the off-canvas menu is closed, only the floating cart shows.

Is it possible to show the cart icon integrated into the navigation bar on mobiles & tablets?

We would like to de-activate the ‘floating cart’, as we very much prefer a cart integrated into the navigation bar.

GeneratePress’ built-in WooCommerce cart shows beautifully within the navigation bar on mobiles & tablets. We would like to achieve the same with these 3rd party plugins.

Is this feasible?

Many thanks for your help.

Kind regards,

Pairfum London
https://www.pairfum.com

[Ying]

Hi there,

I’m not familiar with the plugins, not sure how it works, can’t give you professional advice on this.

How about activating GP built-in cart, then use CSS to hide it on the desktop?

Let me know what you think 🙂

[pairfum]

Hi Ying,

Sorry, but I had expected a little more:

I need to know how I can add the cart from one of the afore mentioned plugins to the mobile/tablet navigation bar.

As you point out, GP’s built-in cart shows in the navigation bar for mobiles/tablets, i.e. I suspect it is not too difficult to show the cart from another plugin instead.

Your help is very much appreciated.

Kind regards,

Pairfum London

[Carlos]

If you add the class xoo-wsc-cart-trigger to the span that surrounds the cart icon (span with class menu-bar-item) the plugin https://wordpress.org/plugins/side-cart-woocommerce/ will work fine, and it’ll open the side menu (I added it to developer tools and works fine) but I don’t know how to add that class to the span tag. I don’t see any filter that permits me to add it the class (I could add it with JavaScript, but it’s not the ideal situation). Could you guide me about the best method to add the additional class to the cart icon?

Kindly regards, Carlos Longarela.

[Leo]

Hi Pairfum,

How does this plugin integrate with a Twenty series WP theme?

Also, did you get it to work?
https://www.screencast.com/t/zMeFkdsPqQKJ

Hi Carlos,

This should help:
https://docs.generatepress.com/article/generate_svg_icon/

[pairfum]

Hi Leo,

Many thanks for your reply.

We would like to implement one of the two options:
1. when the user clicks the built-in GP WC cart icon, the side cart opens, or
2. we add the side cart to the menu using a short code but would then require that this cart icon shows in the mobile / tablet navigation bar and not the off-canvas menu.

We would then hide the square, floating cart icon.

Regarding Option 1

The developers for the plugin state in their documentation that the side cart can be triggered using the class name “xoo-wsc-cart-trigger”.

For example, the HTML could look like this: <div class="xoo-wsc-cart-trigger">Trigger Side Cart</div>

My question for you: How can we implement this? The user on our website would click the GP WC cart icon and this opens the side cart. Currently, clicking the GP WC cart icon redirects to the cart page.

Regarding Option 2

We can add the cart icon to the menu bar using the short code [xoo_wsc_cart] in combination with this plugin:
https://wordpress.org/plugins/shortcode-in-menus/

This would work for the desktop but for mobile & tablet, it would show the cart icon only in the off-canvas menu and not in the navigation bar.

How could we show the cart icon in the navigation menu using this method for mobile & table?

If you have another, easier or better suggestion how we should implement the side, then we would very much welcome this.

Many thanks for your help.

With kind regards,

Pairfum London

[pairfum]

Hi Leo,

We have just tried the following and it works perfectly.

In Google Chrome Inspector, we took the following line:
<a class=”cart-contents shopping-cart has-svg-icon” href=https://staging.pairfum.com/cart/ title="View your shopping cart">

We changed it to the following:
<a class="xoo-wsc-cart-trigger" title="View your shopping cart">

The result is exactly what we are looking for.

What code snippet would we need to add to the GP child theme to achieve this?

Many thanks for your help with this.

Kind regards,

Pairfum London

[David]

Hi there,

the simplest option would be to use a Hook Element, and add your HTML to the generate_menu_bar_items hook.
This will be added to both the destkop and mobile menus.

If you want to do it with a PHP Snippet then you would do this:

add_action('generate_menu_bar_items',function(){
    ?>
    <a class="xoo-wsc-cart-trigger" title="View your shopping cart">
    <?php
},10);

[pairfum]

Hi David,

We have tried both of your suggestions but neither works:
https://i.imgur.com/LLnOWie.png
https://i.imgur.com/mTB36gH.png

Both are still active on our staging site:
https://staging.pairfum.com
When you click on the GP WC cart icon, it re-directs to the cart page instead of opening the Xootix side cart.

Would it be fair to say that what is needed is a function that changes this code:
<a class=”cart-contents shopping-cart has-svg-icon” href=https://staging.pairfum.com/cart/ title="View your shopping cart">
to the following code:
<a class="xoo-wsc-cart-trigger" title="View your shopping cart">

When we change this code in Google Chrome Inspector, it works exactly as we would like it to work.

With kind regards,

Pairfum London

[Carlos]

Thanks Leo and David, finally my solution was a mix (pairfum this solution will be valid for you).

I use the plugin https://wordpress.org/plugins/side-cart-woocommerce/ (premium version).

I go to Customizer -> Design -> WooCommerce and here I change cart icon and show price or item numbers and save changes. After that, I uncheck show cart in menu and save otherwise. If you need to change icon or price/items, check show the cart, make the changes, save and then uncheck a save.

Now the cart, it’s not showing in menu. Open your child theme functions.php, your customizations plugin or elements in GeneartePress and use this snippet:

add_action(
	'generate_menu_bar_items',
	function() {
		if ( ! class_exists( 'WooCommerce' ) ) {
			return;
		}

		if ( ! isset( WC()->cart ) ) {
			return;
		}

		$has_items = false;

		if ( ! WC()->cart->is_empty() ) {
			$has_items = 'has-items';
		}

		printf(
			'<span class="menu-bar-item wc-menu-item xoo-wsc-cart-trigger %2$s %3$s">
				%1$s
			</span>',
			generatepress_wc_cart_link(),
			is_cart() ? 'current-menu-item' : '',
			$has_items
		);
	}
);

And now you can hide floating cart icon in your sidebar plugin 😉

I hope that this helps.

Kindly regards, Carlos Longarela.

[Ying]

Hi pairfum,

we add the side cart to the menu using a short code but would then require that this cart icon shows in the mobile / tablet navigation bar and not the off-canvas menu.

If you have shortcode from the plugin, then you can try to create a hook element, add this shortcode to the hook element.

Select generate_menu_bar_item as the hook, chooseentire site as location.

If you go with this option, the GP built-in cart can be deactivated.

Let me know if it works 🙂

[pairfum]

Dear Carlos,

Many thanks for posting your solution. It is really good and works exactly, as both you and we would like it to work.

Well done and a big ‘thank you’ to you. I really appreciate your help.

We have implemented your solution and it is live on our staging site:
https://staging.pairfum.com

With kind regards,

Pairfum London

[pairfum]

Dear Ying,

Many thanks for your suggested solution. It works really well too.

We trialled your solution before implementing Carlos’ solution and found that it works really well.

We just needed to add some CSS styling to make it fit in with the look on our site.

It remains a viable solution and we may revert back to it, should we find any issues with Carlos’ solution.

Many thanks for your help.

With kind regards,

Pairfum London

[pairfum]

Sorry Carlos, I forgot one comment / question:

We still see the following code in Chrome Inspector:
<a class=”cart-contents shopping-cart has-svg-icon” href=https://staging.pairfum.com/cart/ title="View your shopping cart">

However, it doesn’t seem to cause a problem.

To speed up the loading of our site, we actually block Xootix Side Cart until Cookie acceptance (via Real Cookie Banner) and this code seems to ensure the site is still functional.

With kind regards,

Pairfum London

[Ying]

You are welcome 🙂

[Author]

Posts