Skip to content

Implementing Custom trigger Buttons

Implementing custom trigger or toggle button in your website is easy.

TIP

TL;DR: simply add class name gocart__show-woofc to any HTML element that you want to use as a trigger button.

If you running WooCommerce store you might be using a theme that's designed for WooCommerce. Most of the theme those are deisgned for WooCommerce has a build-in mini cart dropdown in header section. If you are using a theme which has mini cart, you might want to disable it once you start using Go Cart in your WooComnmerce store. Here you need to understand few things:

  • The mini cart drop down that you have in your website is a part of WordPress theme that you are using. That particular functionality is provided by the theme author.

Mini Cart

Another example from the different theme.

Mini Cart

Here's an important point to keep in mind. The mini cart in your theme can't trigger to open Go Cart because it is not programmed to work that way.

  • The Go Cart trigger or toggle button is part of the Go Cart plugin.

  • Once you activate Go Cart in your website Go Cart also cannot disable the default behaviour of the mini cart dropdown in your theme.

We strongly hope you understood the point. In next section we will discuss how to disable the mini cart in your theme.

Disable mini cart

The theme that you are using might have an option to disable the mini cart. Most of the theme will have option to completely disable the mini cart that comes with the theme. The option to disable the mini cart in your website depends on the theme that you are using. If you are not sure how to disable the mini cart in your theme then, please contact the theme author for the assistance.

By disabling the mini cart in your theme you will still be able to use the Go Cart trigger button to open the Go Cart side panel. All the cart related functionality will be handled by the Go Cart plugin.

💁‍♂️ What if you would like to have mini cart icon in header & open Go Cart when user clicks on the mini cart icon? Well, you can do that too. In next section we will discuss how to implement custom trigger button.

Implementing custom trigger buttons

To implement a custom trigger button in your theme or website you need to know few basic HTML and have a basic idea of programming. Go Cart client facing JavaScript code listens the click event on any element that has the class name gocart__show-woofc. Hence, all you need to do is to add the class name gocart__show-woofc to the element that you want to use as a trigger button.

For instance let's take an example with the markup.

html
<header class="theme-header">
    <div class="minicart">
        <a href="#" class="minicart-trigger">Cart</a>
    </div>
</header>
<header class="theme-header">
    <div class="minicart">
        <a href="#" class="minicart-trigger">Cart</a>
    </div>
</header>

In the above markup we have a div element with the class name minicart. Inside the div we have an a element with the class name minicart-trigger. This is the element that we want to use as a trigger button.

Now all we need to do is to add the class name gocart__show-woofc to the a element.

html
<header class="theme-header">
    <div class="minicart">
        <a href="#" class="gocart__show-woofc">Cart</a>
    </div>
</header>
<header class="theme-header">
    <div class="minicart">
        <a href="#" class="gocart__show-woofc">Cart</a>
    </div>
</header>

That's all forks 🤘! Now when you click on the a element with the class name gocart__show-woofc the Go Cart will open.

If you are not not sure how to edit the source code of your theme then, you can ask any developer to implement the custom trigger button for you.

Cost of Hiring a Developer

If you are in a situation where you wish to also have mini cart icon in header to open Go Cart side panel when user clicks on it then, you can hire a developer to implement the custom trigger button for you. Do make sure to share this guide with the developer so that he/she can understand what needs to be done.

The cost of hiring a developer depends on the developer that you hire. The cost of hiring a developer can be anywhere between $5 to $100. The time it takes for a developer to implement the custom trigger button shouldn't be more than approx ~10 minutes.

Go Cart.