Pro Sticky Add To Cart

The Sticky Add To Cart module adds a stylish bar with a product summary and an add to cart button to either the top or bottom of your WooCommerce product pages.

This module serves as a visual cue that reminds your customers that they’re about to make a purchase and facilitates the shopping process by providing another way to add a product to the cart.

In the screenshot below, you can see what Merchant Pro’s Sticky Add To Cart module looks like on a WooCommerce product page:

Frontend view of Merchant Pro's Sticky Add To Cart module at the bottom of a WooCommerce product page, annotated screenshot

The screencast video below shows how the add to cart bar appears on the screen while you’re scrolling the page:

Let’s see how you can set up Merchant Pro’s Sticky Add To Cart module on your WordPress site.

1. Open the Sticky Add To Cart Module

Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.

Find the Convert More section, then click the Sticky Add To Cart module to open its settings page:

Location of the Sticky Add To Cart module on the Merchant dashboard

2. Configure the Settings

On the module’s admin page, find the Settings section and configure the following options:

  • Position – Here, you can choose whether you want to show the sticky add to cart bar at the top or the bottom of the page.
  • Display after amount of scroll – This option lets you define the amount of scroll in pixels after which Merchant Pro will show the sticky add to cart bar on the screen.
  • Hide product image – Here, you can remove the thumbnail image from the bar.
  • Hide product title – Here, you can remove the title of the product from the bar.
  • Hide product price – Here, you can remove the price of the product from the bar.
  • Elements spacing – This option allows you to define the spacing between the elements in the sticky add to cart bar.
  • Hide when scroll to top – Here, you can hide the bar while the user is scrolling the page upwards.
  • Visibility – Here, you can choose whether you want to show the sticky add to cart bar on only desktop devices (e.g. laptops, monitors, other large screens), on only mobile and tablet devices, or on all device types.
  • Allow third-party plugin content – This option lets you show content added by third-party plugins (i.e. neither WooCommerce nor Merchant) in the sticky add to cart bar.
Location of the settings of the Sticky Add To Cart module, annotated screenshot

Once the settings are configured, click the Save button in the top-right corner of the page.

3. Customize the Design of the Add To Cart Bar

You can find the Style options of Merchant Pro’s Sticky Add To Cart module below the Settings section.

Here, you can change the colors of the border, title, content, and button of the add to cart bar:

Location of the Style options of Merchant Pro's Sticky Add To Cart module, annotated screenshot

Once the settings are configured, click the Save button in the top-right corner of the page again.

4. Enable the Sticky Add To Cart Module

Finally, activate the module by clicking the Enable button at the top of the page:

Location of the Enable button on the module's admin page, annotated screenshot