Canvas Docs

Store Options That Help You Sell

Canvas adds a handful of store settings that WooCommerce leaves to extensions: sale badges that show the discount, a free shipping progress bar, a sticky Add to Cart bar and a checkout without distractions. Every one of them is off or unchanged until you switch it on, so your store looks the same until you decide otherwise.

All of these settings live in Canvas > Theme Options > Shop.

How To Change What The Sale Badge Says

Starting screenShop, then Catalogue.

  1. Choose Sale Badge: Text keeps a word such as Sale!, Percentage shows the discount, such as -25%, and Hide removes sale badges.
  2. With Text chosen, type your own word in Sale Badge Text, or leave it empty to keep the badge text each design uses.

For a product with options, the percentage is the largest discount among its variations. A block that sets its own badge text, in the block settings, keeps that text.

How To Set Products Per Row On Phones And Tablets

Starting screenShop, then Catalogue.

Choose Products per Row on Tablets for screens from 768 to 991 pixels wide and Products per Row on Phones for anything narrower. Automatic keeps each grid's own responsive layout, which is one column on small phones, two on larger phones and three on tablets.

The desktop count is WooCommerce's own Products per row setting, under Appearance > Customize > WooCommerce > Product Catalog. A shop block that sets its own columns keeps them.

How To Show The Free Shipping Progress Bar

The bar tells shoppers how much more to spend for free shipping, which is one of the most reliable ways to raise the average order. It reads the minimum from WooCommerce, so set that up first.

  1. In WooCommerce > Settings > Shipping, open the shipping zone your customers are in, add a Free shipping method and set Free shipping requires to A minimum order amount, with the amount.
  2. In Theme Options > Shop > Cart and Checkout, switch on Free Shipping Progress Bar.
  3. Choose where it shows under Show the Bar In: the mini cart, the cart page, the checkout page, or any mix.
  4. Optionally change the two messages. In the first one, type %s where the amount still to spend should go, for example Only %s to go for free delivery.

The bar updates when a shopper adds a product without reloading the page. It stays hidden while the cart is empty and in any zone without a minimum.

How To Add A Sticky Add To Cart Bar

Starting screenShop, then Product Page.

Switch on Sticky Add to Cart, then choose Show the Sticky Bar On: all devices, desktop only, or phones and tablets only. Once a shopper scrolls past the product's own Add to Cart button, a bar with the product image, name, price and button slides in at the bottom of the screen, and it steps aside when the footer comes into view. For a product with options, the bar's button scrolls back up to the options instead of adding to the cart, so the shopper always chooses a size or colour first.

How To Make Checkout Distraction-Free

Starting screenShop, then Cart and Checkout.

Switch on Distraction-Free Checkout. On the checkout page, the site header becomes your logo alone and the footer becomes a copyright line, so nothing pulls the shopper away while they pay. Header Note puts a short line such as Secure checkout beside the logo; clear it to show the logo alone. The order confirmation page and every other page keep the full header and footer.

Pitfalls

  • The free shipping bar never appears. The customer's shipping zone has no Free shipping method with a minimum order amount, or its Free shipping method needs a coupon only. Check the zone the store's own address falls in when you test as a guest.
  • Products per row on phones does nothing. The grid sets its own column classes in its block settings, which always win.
Was this page helpful?