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!OverviewHow To Use The Post Card Cart ElementElement OptionsGlobal Options,How To Use The Post Card Cart ElementThe 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.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: 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.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Cart Layout – Select 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 Alignment – Select the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly. For Floated option only.
Cart Alignment – Select the content alignment. Choose from Flex Start, Center, or Flex End. For Stacked Option only.
Show Quantity – Display the quantity input.
Show Add To Cart – Display the Add To Cart button.
Show Product Link – Display the Product Link.
Product Quick View – Enable product quick view for products.
Buttons Span – Controls if buttons spans the full width/remaining width of row.
Buttons Layout – Select the layout for buttons. Floated will have them side by side. Stacked will have one per row.
Buttons Alignment – Select the content alignment. Choose from Flex Start, Center, or Flex End. For Stacked option only.
Buttons Alignment – Select the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly. For Floated option only.
Element Visibility – Choose 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 ScreenDesign Tab
Margin – In 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 Margin – In 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 OptionsQuantity 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 OptionsQuantity 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 Size – Controls 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 OptionsLink Text Color – Controls the text hover color of the link. Leave empty for default value.Hover/Active OptionsLinkText 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 OptionsButton 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 OptionsButton 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 Style – Select whether you want to custom style the product link.
Product Link Margin – In pixels or percentage, ex: 10px or 10%.
Product Link Font Size – Controls 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 Color – Controls the text color of the link. Leave empty for default value.
Hover/Active Options
Product Link Text Hover Color – Controls the text hover color of the link. Leave empty for default value.
View The Options ScreenExtras 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 ScreenGlobal OptionsThere are no Global Options for the Post Card Cart Element.