Typography
This section has typography settings for the complete floating cart form. It has various settings options for typography. Since most of these settings are repeating for each floating cart form element, we’ll be covering the form element and all the typography options in general. Let’s understand the elements first and we’ll be covering the typography options later in this document.
Product Counter Typography: You can see a number at the top left (if not changed) corner of the floating cart. This number indicates the total number of products in the cart. The product counter typography is controlled by this Product Counter Typography option.
Header Title Typography: You can see the word “Cart” at the top left corner of the floating cart form. This is the header title customized by this typographic option.
Header Info Notice Typography: This typography section controls the header notice. For example, if you have enabled the “Coupon”, this setting will control the Coupon typography.
Header Error Notice Typography: All the error messages in the floating cart form can be customized (typography only) through this setting.
Header Message Typography: The typography for the header messages can be controlled through this typography option.
No Products Message Typography: If you enable the display empty cart option, the no product message in the floating cart form can be customized through this typography option.
Product Title / Price Typography: The typography of the product’s title and price in the floating cart form can be customized by this setting.
Product Attributes Label Typography: Woocommerce product has the option to add custom attributes to the product. The typography of the product label can be customized through this setting on floating cart form. If you change this option, make sure to check the next one as that option controls the product attributes value’s typography.
Product Attributes Values Typography: As we know the “Product Attributes Label Typography” controls the attribute’s label. This option can control the value of the product’s attribute values.
Product Remove Link Typography: The floating cart option has a product remove button on the right side of the product. The product removes the link’s typography can be controlled through this setting.
Product Quantity Input Typography: The product quantity input is available in the floating cart form (if not disabled). This typography setting can control the typography of the quantity input field.
Footer Checkout Button Typography: The floating cart form has a cart/checkout button at the bottom of the form. These typography settings control that footer button.
Elements of the Typography Settings.
Each typography setting has similar (more or less) options. Instead of covering it in each typography option, let’s understand them individually as they work exactly the same under each typography option.
Font Family: This option will let you select a font from a list for the specific element of the floating cart form. While choosing the font, make sure it looks good and readable on the small screen devices.
Variant: This option completely depends upon the previous option “Font Family”. In this option, you can find a list of numbers 100,200,300 and/or alphanumeric options like 300Italic, 600Italic, Regular. Some font families can provide more Variant options than others.
Font Size: To makes things simple, this option is created as a text field. You can add font size in px (12px, 14px), em (2em,4em) , pt (18px,20pt) or any other CSS supported font-size value. Make sure whatever value you provide here must be supported by all modern browsers.
Letter Spacing: This option creates space between each letter. This option is also a text field and any CSS supported value can be added here. It is recommended that the letter-spacing value should be in em (as it resizes automatically according to the font size).
Text Align: This option is available only for some of the elements in the floating cart form. This option may have no effect on some elements due to the current WordPress theme. There are four options available as icons.
Inherit: It will align the text according to the flow of the HTML inheriting from top HTML DOM.
Left: It will set the text to the left.
Right: It will set the text to the right.
Justify: This option will try to fit all the text to its container equally from both sides.
Text Transform: This option will let you change the default text style. It can make the text all capitalize, uppercase, lowercase etc.
Check out the following video to see all the typography settings in action.