Skip to main content

Install AOV Progress Bar on WooCommerce

Ryan Liao
  • Updated

Install AOV Progress Bar App

WooCommerce merchants can use AOV Progress Bar by installing OnVoard's plugin.

 

Setup AOV Progress Bar

Go to overview page and add a new AOV progress bar. 

 

Multi-Tiers Discounting

screenshot-2020.09.14-08_39_51.png

Go to Styles > Content > Discounts to add multi-tiers discounting. This allows you to go beyond offering free shipping to your customers and motivate them to add even more items to unlock more discounts. For example, you can configure discounting in the following manner:

  • Free Shipping if Cart Amount is greater than $50
  • Additional $10 Off if Cart Amount is greater than $100

One point to note that discounts are evaluated based on cart amount. We currently do not support discounting based on other attributes like number of cart items.

 

Preview Setup

Go to Styles > Preview to configure widget preview.

screenshot-2020.09.14-08_48_51.png

  • Change Cart Amount to see how progress bar changes based on different cart amount.
  • Change Background Color if you need to preview progress bar with non-visible text color like white.

Save to create AOV Progress Bar once everything is ready.

 

Placement Options

Product Page (Auto) - Will automatically place widget at product page after add to cart button. Keep in mind that this method may not work for every themes. If auto placement doesn't work, use Selector or Custom Placement instead.

Product Page (Selector) - Use placement tool to visually insert widgets into your site without any technical work. See guide for selector placement.

Cart (Auto) - Will automatically place widget at top of cart. Keep in mind that this method may not work for every themes. If auto placement doesn't work, use Custom Placement instead.

Custom Placement - Manually install widget. Use this as fallback if all other placement methods doesn't work.

 

Custom Placement

There are 2 ways you can manually install aov progress bar. 

 

Shortcodes

Use the following shortcode for reviews widget. Replace ID with aov progress bar ID. 

[onvoard_aov_progress_bar id="12345"]

Paste it to section where you want display widget.

 

Render Function

If you are familiar with php, you can call render function directly to display widget. In this example, we are using visual hook to render widget display. Replace ID with aov progress bar ID. 

add_action('woocommerce_product_meta_start', 'render_onvoard_aov_progress_bar');

function render_onvoard_aov_progress_bar() {
  if (class_exists('OnVoardRender')) {
    OnVoardRender::onvoard_aov_progress_bar(array(
      "id" => "12345"
    ));
  }
}

See how you can use code snippets to add render function.

 

Configure Discounting Rules from WooCommerce Admin

AOV Progress Bar will not alter any backend discounting rules that you have setup with WooCommerce. For that, you need to configure store's discounting logic via WooCommerce Admin. You may need to install discounting plugin to setup storewide discounts.

 

 

 

 

 

 

 

 

 

Related articles