Post Card Cart Element

30/03/2021

The Post Card Cart Element is a special Layout Element, that you will only see when editing a Post Card Library Element. It is one of the available Elements, with which to design and build Post Cards, and specifically WooCommerce Post Cards. Read on to find out more about this useful Element.

View Element Demo Page!

Overview

How To Use The Post Card Cart Element

The Post Card Cart Element allows you to add an Add to Cart section in your WooComerce based Post Cards. You could use a WooCommerce Post Card instead of the WooCommerce Product Grid Element for example.

To use the Element, simply add it to your WooCommefce based Post Card and configure it to your needs. There are many choices with this Element, both with functionality and design. Read on to see the full list of options available with this useful Element.

Avada Website Builder

677,801 Businesses Trust Avada

Get Avada
Avada Website Builder

677,801 Businesses Trust Avada

Get Avada
Avada Website Builder

677,801 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element. This Element is found in the Layout Elements tab only when adding or editing an Avada Library > Post Card Element.

General Tab

  • Cart LayoutSelect the layout for the quantity and add to cart button. Choose between Floated, or Stacked. Floated will display components side by side. Stacked will have one component per row.

  • Cart AlignmentSelect the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly. For Floated option only.

  • Cart AlignmentSelect the content alignment. Choose from Flex Start, Center, or Flex End. For Stacked Option only.

  • Show QuantityDisplay the quantity input.

  • Show Add To Cart Display the Add To Cart button.

  • Show Product LinkDisplay the Product Link.

  • Product Quick ViewEnable product quick view for products.

  • Buttons SpanControls if buttons spans the full width/remaining width of row.

  • Buttons LayoutSelect the layout for buttons. Floated will have them side by side. Stacked will have one per row.

  • Buttons AlignmentSelect the content alignment. Choose from Flex Start, Center, or Flex End. For Stacked option only.

  • Buttons AlignmentSelect the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly. For Floated option only.

  • Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.

  • CSS Class – Allows you to add a class for the Separator.

  • CSS ID –¬†Allows you to add an ID for the Separator.

View The Options Screen

Design Tab

  • MarginIn pixels or percentage, ex: 10px or 10%.

  • Quantity Style – Select whether you want to custom style the quantity field. Choose from Default, or Custom. This option will only display if Show Quantity is set to Yes on the General Tab. The following dozen or so ‘Quantity’ options will also only display if ‘Custom’ is then chosen in this option.
  • Quantity MarginIn pixels or percentage, ex: 10px or 10%.

  • Quantity Input Dimensions – Enter values including any valid CSS unit, ex: 10px.
  • Quantity Border Radius – Enter values including any valid CSS unit, ex: 10px.
  • Quantity Input Font Size – Controls the font size of the select field. Enter value including any valid CSS unit, ex: 20px.
  • Quantity Input Text Color – Controls the text color of the select fields.
  • Quantity Input Background Color – Controls the background color of the select fields.
  • Quantity Input Border Size – Controls the border size of the select fields.
  • Quantity Input Border Color – Controls the border color of the select fields.
  • Quantity Button Border Size – Controls the border size of the select fields.
  • Quantity Button Styling – Use filters to see specific type of content.
  • Regular Options
  • Quantity Button Text Color – Controls the text color of the select fields.
  • Quantity Button Background Color – Controls the background color of the select fields.
  • Quantity Button Border Color – Controls the border color of the select fields.
  • Hover/Active Options
  • Quantity Button Text Color – Controls the text color of the select fields.
  • Quantity Button Background Color – Controls the background color of the select fields.
  • Quantity Button Border Color – Controls the border color of the select fields.
  • Add To Cart Margin – In pixels or percentage, ex: 10px or 10%.
  • Add To Cart Link Style – Select whether you want to custom style the add to cart button. Choose from Text Link, or Button.
  • Add To Cart Link Font SizeControls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.

  • Add To Cart Link Styling – Use filters to see specific type of content.
  • Regular Options
  • Link Text Color – Controls the text hover color of the link. Leave empty for default value.
  • Hover/Active Options
  • LinkText Color – Controls the text color of the link. Leave empty for default value.
  • Button Size – Controls the button size. This, and the following three options will only display if ‘Button’ is selected in the previous option, the Add To Cart Link Style.
  • Button Border Size – Controls the border size. In pixels.
  • Icon – Click an icon to select, click again to deselect.
  • Icon Position – Choose the position of the icon on the button.
  • Button Styling – Use filters to see specific type of content.
  • Regular Options
  • Button Text Color – Controls the text color of the button.
  • Button Gradient Top Color – Controls the text color of the button.

  • Button Gradient Bottom Color – Controls the text color of the button.
  • Button Border Color – Controls the border color of the button.
  • Hover/Active Options
  • Button Text Hover Color – Controls the text color of the button.
  • Button Gradient Top Hover Color – Controls the text color of the button.

  • Button Gradient Bottom Hover Color – Controls the text color of the button.
  • Button Border Hover Color – Controls the border color of the button.
  • Product Link StyleSelect whether you want to custom style the product link.

  • Product Link MarginIn pixels or percentage, ex: 10px or 10%.

  • Product Link Font SizeControls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.

  • Product Link Styling – Use filters to see specific type of content.
  • Regular Options
  • Product Link Text ColorControls the text color of the link. Leave empty for default value.

  • Hover/Active Options
  • Product Link Text Hover ColorControls the text hover color of the link. Leave empty for default value.

View The Options Screen

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

There are no Global Options for the Post Card Cart Element.

Avada Website Builder

677,801 Businesses Trust Avada

Get Avada
Avada Website Builder

677,801 Businesses Trust Avada

Get Avada
Avada Website Builder

677,801 Businesses Trust Avada

Get Avada