July Special Offer! Get UP TO 40% OFF - Limited Time Only!

Documentation

Woo – Cart Widget Overview

The PowerPack Woo - Cart widget for Elementor allows you to customize the default WooCommerce cart page without adding CSS code. The widget has multiple styling options that help you create a cart page that perfectly matches your existing web design and look.

Let's take a closer look at the content and style tab of the Elementor Woo - Cart widget by PowerPack.

Content Tab of the Woo - Cart Widget#

The Content Tab of the Woo - Cart widget consists of 5 sub-section.

  1. General
  2. Order Summary
  3. Coupon
  4. Totals
  5. Additional Options

Let's take a look at the sub-section one by one.

General#

The General subsection includes two options:

woocommerce cart widget for elementor - general page

  • Show Cross Sells - Enabling this option will display the related products below the cart to buy along with the products added to the cart.
  • Image Size - Once you enable the Show Cross Sells feature, you get an option to choose the size of the displayed cross-sells image.

Order Summary#

The Order Summary subsection includes an option that allows you to update your cart button text.

order summary

Update Cart Button

  • Text - From this, you can change the default text of the Update Cart button.

Coupon#

The Coupon subsection includes the following options:

woo coupon field

  • Show Coupon Field - Enable this option to display a coupon field on the cart page.

Apply Coupon Button

  • Text - This option allows you to add the custom text for the Apply Coupon button.

Totals#

In the Totals sub-section, you get the following customization options:

totals field

  • Section Title - This option allows you to change the default Cart Totals button text.
  • Alignment - This will enable you to set the alignment of the text.

Update Shipping Button

  • Text - This allows you to add custom text for the Update Shipping button.

Checkout Button

  • Text - This option lets you change and add custom text for the Checkout button.
  • Alignment - This allows you to set the alignment of the text.

Additional Options#

additional options of woo cart widget

  • Update Cart Automatically - Toggle on this option will automatically update changes to the cart.

Style Tab of the Woo - Cart Widget#

There are 8 sections in the style tab of the Woo - Cart Widget:

  1. Headings
  2. Sections
  3. Cart Table
  4. Update Cart Button
  5. Coupon
  6. Cart Totals
  7. Checkout Button
  8. Return to Shop Button
  9. Cross Sells

Let's look at each of these sections in more detail.

Headings#

  • You can change the font, size, and color of the Cart Totals heading in this section.
  • Further, you can set the space between the cart totals heading and the table.

Headings section of the Woo - Cart widget

Sections#

  • This section allows you to customize the different sections of your cart page simultaneously. Check the styling options in the below image.

sections customization option

Cart Table#

Several styling options are available in the Cart Table section of the Woo - Cart widget. Here you get the flexibility to style every element of the cart table.

Section

section customization options

  • Here you get multiple styling options to customize the main section of your Cart Table. You can choose the Background Type, set Background Color, add a Border, and further set border Color, Width, and Padding.

Table

table customization options

This section allows you to customize the table of your Cart page. You get the following options:

  • Typography - Change your text Font, Size, Color, and more.
  • Background Type - Choose table background type, Classic or Gradient.
  • Border Type - Choose table Border Type from multiple options such as Solid, Double, Dotted, etc.
  • Width - This allows you to set the border Width.
  • Color - You can choose the border Color from this option.
  • Border Collapse - Gives you the option to select Border Collapse type.
  • Border Radius - Set Border Radius from this option.
  • Box Shadow - Lets you add a Box Shadow to the table.

Table Head

Table head of the Cart table section

  • Next, you get styling options to customize the table head. You can alter typography and change text and background color.

Cart Items

Customize the cart items in the cart table of the Woo - Cart widget

  • Add a separator between cart items to make your cart more interactive. You can choose the Separator Type, Colour and Size.
  • Further, you can add Text, Links, and Background Color.

Image

Set the width of the image in the Cart table

  • From this section, you can set the Width of the product images added to the cart.

Quantity Input

Set the quantity input in the Cart table of Woo - Cart widget

  • You can style the Quantity Input element from this option. You get options for the set width and padding.

Product Remove Icon

Customize the product remove icon of the Woo - Cart widget

  • You can set the size, background color, and border color for the Remove Icon element.

Update Cart Button#

Update Cart Button in the PowerPack Woo - Cart widget

  • Set the typography, Width, text color, background color, box shadow, and margin for the Update Cart button.
  • It is possible to choose a border type from the list of options given in the below screenshot in the normal mode.

Coupon#

You can customize the Coupon field of your Cart page from this section.

Section

coupon section customization option

  • Background Type - Choose Background Type for your Coupon field.
  • Border Type - Select Border Type.
  • Padding - Add padding around the Coupon section.

Input

From here, you get options to customize the Input of the coupon code section.

Customize the input of the Coupon Code section

  • You can set the typography, width/height, padding, text color, background color, and box shadow for the "Coupon Code."
  • In the normal mode, you can choose a border type from the options given in the screenshot below and set the border radius for the coupon code.

Coupon Button

Customize the Coupon Button section

  • Set the typography, Width, text color, border color, background color, and box shadow for the "Apply Coupon" button.
  • Further, you can set the spacing between the coupon code field and the button. In the normal mode, you can select the border-radius and padding for the button and choose a border type from the list of options such as Solid, Double, Dotted, Dashed, and Groove.

Cart Totals#

There are four options available in this section. Let's go through each option in detail.

Section

cart totals customization options

  • The background of the Cart Totals' Section can be set as "Classic" or "Gradient," and the box shadow can be added to the box.
  • Also, you can set the Width, color, and border radius for the box. You can further choose a border type from the list of options, such as Solid, Double, Dotted, Dashed, and Groove.

Table

table customization options

  • From the option available in this section, you can choose the Background Type for the table, change the table Color, add Border Type, and many more,

Table Text

  • The typography and color can be set for the text of the cart totals table.

Customize the text in the Cart Totals table

Table Headings

  • You can set the typography and color for the cart totals heading.

Customize the heading of the Cart Totals table

Checkout Button#

Customize the "Proceed to Checkout" button of the Woo - Cart widget

  • You can set the typography, auto/full/custom width, background color, border color, text color, and box shadow in this section for the "Proceed to checkout" button.
  • You can set the border radius and padding for the checkout button and choose the border type from the list of options shown below.

Return to Shop Button#

This button will be displayed after you complete the checkout.

Customize the "Return to Shop" button of the Woo - Cart widget

  • You can customize the appearance of the Return to Shop button by setting typography, Width, background color, border color, text color, as well as box-shadow,
  • You can also set the border-radius and padding for the button if you want.

Cross Sells#

In this section, you can customize the image of the suggested item under the items added to the cart. Let's take a look at the options available in this section.

Title

Customize the title of the Cross Sells
Customize the title of the Cross-Sells

  • You can set the typography and the normal and hover color for the title of the cross-sell product.

Price

Customize the price of the Cross Sells
Customize the price of the Cross-Sells

  • In this section, you can set the color and typography for the price of the cross-sell product.

Button

Customize the button of the Cross Sells
Customize the button of the Cross-Sells

  • You can set the typography, color, and background color for the "Add to cart" button below the cross-sell product.

Sale Badge

Customize the "Sale badge" of the Cross Sells

The color, background color, and typography can be set for the "S"le" badge on the cross-sell product.

This was the detailed overview of the Woo - Cart widget available in PowerPack Addons for Elementor.

Hope this helps!

Not the solution you are looking for?

Please check other articles or open a support ticket.

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.