BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Guide

Woo Store Pages Pro

How to set up and style the Woo Store Pages widget in Elementor.

Woo Store Pages shows the WooCommerce cart, the checkout (with the order received page), the my account pages or an empty cart message as one widget. Style the boxes, tables, form fields, buttons and messages from Elementor. It is made for the Cart, Checkout, Thank you and My account templates of the WooCommerce Builder, and works on any page.

Part of: Bright Addons Pro. Before you start: WooCommerce.

Set it up

  1. Go to Bright Addons Pro > Theme Builder, click New template and pick Cart, Checkout or My account.

  2. In Elementor, add the Woo Store Pages widget.

  3. Under Store Page, pick what to Show: Cart, Checkout (and order received), My account or Empty cart message.

  4. Turn Two Columns on Wide Screens on or off.

  5. Style the boxes, form fields, buttons and messages in the Style tab.

  6. Publish the template and open the cart or checkout page of your store.

Content options

Store Page

Option What it does
Show Cart, Checkout (and order received), My account, or Empty cart message.
Title Heading of the empty cart message.
Text Text under the heading of the empty cart message.
Button Text Text of the button that links to the shop.
Two Columns on Wide Screens Cart totals or the order summary sit next to the form on screens wider than tablets.
Alignment Left, center or right for the empty cart message.
Bright Addons Pro

Unlock this and 80+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Text and Headings

    typography and color of the text, headings and links.

  • Boxes and Tables

    box background, line color, radius, padding, shadow and space between columns.

  • Form Fields

    typography, text color, background, border color, focus color and radius.

  • Buttons

    typography, text and background colors for normal and hover, border, radius and padding.

  • Messages

    background, text color and line color of the WooCommerce messages.

Tips

  • In the Elementor editor the widget shows a note instead of the real cart or checkout, because the editor has no shopping cart. Open the page on the site to see it.

  • WooCommerce prints the cart, checkout and account pages itself, so payment methods and shipping options work as usual.

  • Use an Empty cart template for an empty cart, so the Cart template only shows when the cart has products.

Questions and answers

Do I need a Cart template to use it?

No. The widget works on any page, but the Cart, Checkout, Thank you and My account templates of the WooCommerce Builder are where it is most useful.

Does it change how checkout works?

No. It shows the WooCommerce checkout, so payment, shipping and coupons work as WooCommerce sets them up.

How do I show the thank you page?

Make a Thank you template and add the widget with Checkout (and order received) chosen. WooCommerce shows the order details there after an order is placed.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides