Disable offcanvas cart completely

[binvoyons]

Hello,

I use the CheckoutWC plugin, which has its own side cart. Unfortunately, it conflicts with the sidecart/offcanvas cart from bootScore. Could you tell me how to completely disable the notion of sidecart/offcanvas cart from bootScore?

Thank you for your help.

[crftwrk]

Hello

1. Add following snippet to child's functions.php:

// Disable AJAX Cart
function register_ajax_cart() {
}
add_action('after_setup_theme', 'register_ajax_cart');

2. Create folders template-parts/header/ in child and copy actions-woocommerce.php from parent theme to this folder.
3. Open file and in line 37 you will find this:

<!-- Mini cart toggler -->
<?php
if ( is_cart() ) {
 // Do nothing
} elseif ( is_checkout() ) { ?>
  <!-- Add a back-to-cart button -->
  <a class="btn btn-outline-secondary ms-1 ms-md-2" href="<?= wc_get_cart_url() ?>">
    <i class="fa-solid fa-arrow-left d-none d-md-inline me-2"></i><i class="fa-solid fa-bag-shopping"></i><span class="visually-hidden-focusable">Return to Cart</span>
  </a>
  <?php 
} else { ?>
  <!-- Add mini-cart toggler -->
  <button class="btn btn-outline-secondary ms-1 ms-md-2 position-relative" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-cart" aria-controls="offcanvas-cart">
    <i class="fa-solid fa-bag-shopping"></i><span class="visually-hidden-focusable">Cart</span>
    <?php if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
      $count = WC()->cart->cart_contents_count;
      ?>
      <span class="cart-content">
        <?php if ($count > 0) { ?>
          <?= esc_html($count); ?>
          <?php
        }
        ?></span>
    <?php } ?>
  </button>
<?php } ?>

Replace it with following:

<!-- Mini cart toggler -->
<?php
if ( is_cart() ) {
 // Do nothing
} elseif ( is_checkout() ) { ?>
  <!-- Add a back-to-cart button -->
  <a class="btn btn-outline-secondary ms-1 ms-md-2" href="<?= wc_get_cart_url() ?>">
    <i class="fa-solid fa-arrow-left d-none d-md-inline me-2"></i><i class="fa-solid fa-bag-shopping"></i><span class="visually-hidden-focusable">Return to Cart</span>
  </a>
  <?php 
} else { ?>
  <!-- Add mini-cart toggler -->
  <a href="<?= wc_get_cart_url() ?>" class="btn btn-outline-secondary ms-1 ms-md-2 position-relative">
    <i class="fa-solid fa-bag-shopping"></i><span class="visually-hidden-focusable">Cart</span>
    <?php if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
      $count = WC()->cart->cart_contents_count;
      ?>
      <span class="cart-content">
        <?php if ($count > 0) { ?>
          <?= esc_html($count); ?>
          <?php
        }
        ?></span>
    <?php } ?>
  </a>
<?php } ?>

Now Ajax cart is disabled and mini-cart button in header links to the cart page.

Solved?

[binvoyons]

Hi Basti,

Thanks for your quick reply. Does

// Disable AJAX Cart
function register_ajax_cart() {
}
add_action('after_setup_theme', 'register_ajax_cart');

disable WooCommerce's AJAX cart completely? I would only need to disable bootScore's ajax cart. I need to keep the notion of the AJAX cart, just not the bootScore's built-in offcanvas one so that it doesn't conflict with the other plugin.

Thank you!

[binvoyons]

Hi,

Me again. When I make the suggested changes, the bootScore side cart no longer appears, but this doesn't solve my problem. BootScore continues to inject code into CheckoutWC's side cart. I need to completely remove/deregister the whole notion/existence of the bootScore side cart, not just the data targets that prompt bootScore's offcanvas cart.

Thank you very much for your help!

[crftwrk]

Ok, got it. Let's start from scratch:

1. Disable Ajax scripts in your child's functions.php:

// Disable AJAX Cart
function register_ajax_cart() {
}
add_action('after_setup_theme', 'register_ajax_cart');

2. Go to main-theme folder template-parts/header and copy actions-woocommerce.php and offcanvas-woocommerce.php to your child using the same folder structure template-parts/header/[file.php].
3. Open child's actions-woocommerce.php. There you will find the snippet for the mini-cart button in lines 37 to 62. Delete it.

bootscore/template-parts/header/actions-woocommerce.php

Lines 37 to 62 in 6896a76

	<!-- Mini cart toggler -->
	<?php
	if ( is_cart() ) {
	// Do nothing
	} elseif ( is_checkout() ) { ?>
	<!-- Add a back-to-cart button -->
	<a class="btn btn-outline-secondary ms-1 ms-md-2" href="<?= wc_get_cart_url() ?>">
	<i class="fa-solid fa-arrow-left d-none d-md-inline me-2"></i><i class="fa-solid fa-bag-shopping"></i><span class="visually-hidden-focusable">Return to Cart</span>
	</a>
	<?php
	} else { ?>
	<!-- Add mini-cart toggler -->
	<button class="btn btn-outline-secondary ms-1 ms-md-2 position-relative" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-cart" aria-controls="offcanvas-cart">
	<i class="fa-solid fa-bag-shopping"></i><span class="visually-hidden-focusable">Cart</span>
	<?php if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
	$count = WC()->cart->cart_contents_count;
	?>
	<span class="cart-content">
	<?php if ($count > 0) { ?>
	<?= esc_html($count); ?>
	<?php
	}
	?></span>
	<?php } ?>
	</button>
	<?php } ?>

4. Open child's offcanvas-woocommerce.php. There you will find the snippet for the offcanvas-cart in lines 37 to 53. Delete it.

bootscore/template-parts/header/offcanvas-woocommerce.php

Lines 37 to 53 in 6896a76

	<!-- Offcanvas cart -->
	<?php
	if ( is_checkout() || is_cart() ) {
	// Do nothing
	} else { ?>
	<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-cart">
	<div class="offcanvas-header">
	<span class="h5 offcanvas-title"><?= apply_filters('bootscore/offcanvas/cart/title', __('Cart', 'bootscore')); ?></span>
	<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body p-0">
	<div class="cart-list">
	<div class="widget_shopping_cart_content"><?php woocommerce_mini_cart(); ?></div>
	</div>
	</div>
	</div>
	<?php } ?>

Now, the entire theme's cart functionality is disabled and uses WooCommerce's default function. Your plugin should now work as expected. BTW, sharing a link to your project is always very helpful to debug and understand what you want to do ;-)

[binvoyons]

Hi,

Thanks. However, some elements from bootScore's mini cart / offcanvas cart are still injected into CheckoutWC, as you can see on the attached screenshot.

Website is infdepoche.com.

Thank you.

[binvoyons]

And the bootScore's "spinner" also injects into CheckoutWC's cart, which seems to cause a conflict (perpetual loading spinner + blank side cart after a page refresh), as you can see here:

Enregistrement.d.ecran.le.2024-03-22.a.15.29.24.mov

[crftwrk]

Hi,

seems that the plugin loads the default cart buttons. We've only added a filter to add Bootstrap classes to cart buttons, nothing more.

bootscore/woocommerce/inc/wc-mini-cart.php

Lines 40 to 55 in 6896a76

	/**
	* Mini cart widget buttons
	*/
	remove_action('woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_button_view_cart', 10);
	remove_action('woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20);
	function my_woocommerce_widget_shopping_cart_button_view_cart() {
	echo '<a href="' . esc_url(wc_get_cart_url()) . '" class="btn btn-outline-primary d-block mb-2">' . esc_html__('View cart', 'woocommerce') . '</a>';
	}
	function my_woocommerce_widget_shopping_cart_proceed_to_checkout() {
	echo '<a href="' . esc_url(wc_get_checkout_url()) . '" class="btn btn-primary d-block">' . esc_html__('Checkout', 'woocommerce') . '</a>';
	}
	add_action('woocommerce_widget_shopping_cart_buttons', 'my_woocommerce_widget_shopping_cart_button_view_cart', 10);
	add_action('woocommerce_widget_shopping_cart_buttons', 'my_woocommerce_widget_shopping_cart_proceed_to_checkout', 20);

Please try to delete this and let me know if that helps. In your case, you can simply hide them by one line of CSS.

.wc-proceed-to-checkout .btn {
  display: none !important;
}

About the loader. Plugin uses the default blockUI blockOverlay loader which is used always when WooCommerce loads something via AJAX. We just styled the default loading icon to a Bootstrap spinner which is done here:

bootscore/scss/bootscore_woocommerce/_wc_loader.scss

Lines 5 to 36 in aaff279

	// reset WooCommerce default loader
	.woocommerce .blockUI.blockOverlay:before,
	.woocommerce .loader:before,
	#offcanvas-cart .blockUI.blockOverlay:before,
	#offcanvas-cart .loader:before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -0.5em;
	margin-top: -0.5em;
	content: "";
	background: none;
	line-height: 1;
	text-align: center;
	font-size: 2em;
	}
	// spinner-border
	.woocommerce .blockUI.blockOverlay:before,
	.woocommerce .loader:before,
	#offcanvas-cart .blockUI.blockOverlay:before,
	#offcanvas-cart .loader:before {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: text-bottom;
	border: 0.13em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: spinner-border 0.75s linear infinite;
	animation: spinner-border 0.75s linear infinite;
	}

But here as well, just styling, no code which does something to the plugin. You can change the spinner for example to a spinner-grow simply in your child:

.woocommerce .blockUI.blockOverlay:before,
.woocommerce .loader:before,
#offcanvas-cart .blockUI.blockOverlay:before,
#offcanvas-cart .loader:before {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: -.125em;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: .75s linear infinite spinner-grow;
  animation: .75s linear infinite spinner-grow;
}

[binvoyons]

Thank you for these explanations. I thought the problem was coming from bootScore, but you seem to be saying that the problem lies with the plugin. I prefer to avoid hiding things via CSS as much as possible. I'll discuss it with the plugin's author.

[crftwrk]

I prefer to avoid hiding things via CSS as much as possible

Totally agree. Please delete following lines for testing in main-theme and let me know if buttons are removed. If so, we can find a way to deactivate them:

bootscore/woocommerce/inc/wc-mini-cart.php

Lines 40 to 55 in 6896a76

	/**
	* Mini cart widget buttons
	*/
	remove_action('woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_button_view_cart', 10);
	remove_action('woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20);
	function my_woocommerce_widget_shopping_cart_button_view_cart() {
	echo '<a href="' . esc_url(wc_get_cart_url()) . '" class="btn btn-outline-primary d-block mb-2">' . esc_html__('View cart', 'woocommerce') . '</a>';
	}
	function my_woocommerce_widget_shopping_cart_proceed_to_checkout() {
	echo '<a href="' . esc_url(wc_get_checkout_url()) . '" class="btn btn-primary d-block">' . esc_html__('Checkout', 'woocommerce') . '</a>';
	}
	add_action('woocommerce_widget_shopping_cart_buttons', 'my_woocommerce_widget_shopping_cart_button_view_cart', 10);
	add_action('woocommerce_widget_shopping_cart_buttons', 'my_woocommerce_widget_shopping_cart_proceed_to_checkout', 20);

[binvoyons]

Hi Basti,

In fact, there are two main problems. There's the problem with the buttons, but there's also the problem with bootScore's AJAX loader, which appears in CheckoutWC's side cart, even when bootscore's AJAX is disabled with the code you gave me above. In fact, I don't want to eliminate all bootscore AJAX, I just don't want bootScore elements to take over CheckoutWC elements.

bootScore's AJAX white screen with a spinner appears in CheckoutWC's side cart on every WooCommerce page. This can be reproduced when changing quantity or removing an item in the side cart. This happens even after I disable bootScore's side cart and bootScore's AJAX.

When CheckoutWC's side cart is enabled, it also seems to cause conflicts that cause the bootScore spinner to load infinitely when a product is added to the cart.

Here’s CheckoutWC’s side cart AJAX loading effect that is showing correctly on the home page, on non-WooCommerce pages, and on blog posts:
https://github.com/bootscore/bootscore/assets/65147876/72ce27ea-25fe-45d8-ac8a-fa3754916821

Here’s bootScore’s white screen with a blue spinner that takes over CheckoutWC’s side cart AJAX loading effect on all WooCommerce pages:
https://github.com/bootscore/bootscore/assets/65147876/90b0ab1c-e4f4-4256-b622-76821ffd4620

It seems that either bootScore forces these elements and/or CheckoutWC loads these elements and/or there is no mechanism to prevent the loading of elements other than CheckoutWC's own.

After discussing with the authors of CheckoutWC, they tell me the following information:

CheckoutWC's AJAX loading indicator is a feature built into CheckoutWC and there is no option to switch it on or off. But it is only for CheckoutWC-related items.

Moreover, regarding the buttons, temporarily switching the theme to Twenty Twenty-Four, the duplicated buttons disappear from the Side Cart.

It looks like bootScore is somehow adding those buttons to the view.

Regarding the AJAX loading animation from bootScore, I suggest you check with their team for a way to exclude their animation from CheckoutWC's Side Cart.

It seems the animation is overpowering any AJAX-loading element when it is a WooCommerce-related page.

Please let me know your thoughts on this.

Thank you!

[crftwrk]

Hi,

as I said, the loader comes from WooCommerce not from Bootscore. We just added a little bit CSS. No PHP or JS here.

You can check this quickly by installing the https://github.com/understrap/understrap theme, add something to the cart and remove products in cart page. Loader appears as well. If you want to hide blockOverlay completely, use CSS:

.woocommerce .blockUI.blockOverlay {
  display: none !important;
}

Quickly googled it, and solution is always the same as mine ;-)

About the buttons, I'm racking my brain about this but leads always to the filters which adds the Bootstrap classes to the buttons which are located in https://github.com/bootscore/bootscore/blob/main/woocommerce/inc/wc-mini-cart.php.

Maybe it can be happen that this is something in https://github.com/bootscore/bootscore/blob/main/woocommerce/cart/mini-cart.php, but we do not have your plugin and can't check it.

So, it might be very useful if you check this two files deeply to locate where those buttons come from. When located then we can figure out how to fix this. As mentioned, these buttons are only edited in this two files. So, if theme is responsible that this buttons appears in your plugin, it must located in one of this files.