Home » Blog » LSX » Release Notes » Release Notes: LSX Design 1.3.1

Release Notes: LSX Design 1.3.1

—

by

Ash Shaw
in ,

Discover the latest LSX Design System and Theme 1.3.1 updates with refined styling and new prototypes for WooCommerce. Explore these updates and enhance your projects with the latest features! Check out our detailed changelog for more info.

LSX Design Theme on WordPress.org

This update focuses on improving the styling and usability of WooCommerce elements within the LSX Design Theme. The enhancements include:

  • Pagination Styling: Updates and fixes to improve the look and functionality.
  • Cart & Checkout Forms: Minor CSS fixes for a smoother user experience.
  • Overall Usability: Tweaks and enhancements to ensure a more intuitive design.

The latest LSX Design Theme, is available on WordPress.org as a free download.

Figma Design System

The Figma design system has been updated with numerous components and prototypes, making it easier to visualise and implement a WooCommerce store using the LSX Design Theme. Key updates include:

  • Prototype Components:
    • Button States: Default, hover, pressed, and disabled.
    • Navigation Drop-Down: Closed and open states.
    • Single Product Drop-Down: Various states for enhanced usability.
    • Form Elements: Radio buttons, checkboxes, and text inputs with multiple states.
  • Prototype Patterns:
    • Mini-Cart and Cart Pages: Detailed prototypes demonstrating cart functionality.
    • Product Cards: Examples for normal, on-sale, and simple product cards.
    • Page Prototypes: Homepage, shop page carousel, category pages, and order confirmation.
  • Variables and Controls:
    • Global Variables: Manage the state and display of header, cart, checkout, and order confirmation components.
    • Cart & Checkout Variables: Track items, prices, and states for an optimized checkout experience.
    • Shipping and Payment Options: Controller variables for various shipping and payment methods to streamline the checkout process.

Our Figma design system update is available on the here as a free download.

Read more about our Design System here!

Changelog

We’re excited to announce the LSX Design System and LSX Design 1.3.1 updates! We have made many improvements from LSX Theme 1.3. We invite you to explore these updates and leverage the new features to enhance your WordPress and WooCommerce projects. For a detailed look at the changes, please refer to the full changelogs below.

LSX Design Theme 1.3.1

Updated:

  • woocommerce.css – styling improvements for Cart & Checkout
  • style.css – Pagination styling updates and improvements, hovers, active states

LSX Design System 1.3.1

Added

Prototype components:

  • Button prototype component with default, hover, pressed and disabled states.
  • Navigation drop-down prototype with a closed and open state.
  • Single Product drop-down prototype with a closed and open state.
  • Radio button prototype with default, hover, selected and selected-hover states
  • Checkbox prototype with default, hover, selected and selected-hover states
  • Text Inputs for Search, Text, Message and Name with default and active states

Quantity input with toggles and a linked quantity indicator

  • Header
    • Logo – links to homepage when pressed
    • Navigation – links to shop page, as well as a collection drop down nav item which lists collections
    • My Account – just a hover state
    • Mini Cart – opens the mini cart overlay from the right
    • Product Search – expands when search button is pressed

Prototypes patterns:

  • Mini-cart prototype
  • Cart prototype page
  • Product card example prototypes
    • 4x Normal Single products
    • 4x On Sale Single products prototypes
    • 11x simple product cards per Single product
  • Order confirmation prototype
  • Homepage prototype
  • Shop page carousel with 3 pages
  • Category pages for men’s wear, women’s wear, sale, men’s shoes, women’s shoes, sunglasses.

Prototype variables:

  • Variable Collection: Prototypes – Global = Global variables used to control state and display of components in the header, cart, checkout, and order confirmation.

Cart & Checkout Group:

  • Cart Total Items = number variable tracker for the number of items added to the cart
  • Cart Total Price = number variable tracker for the total value of all the items in the cart
  • Items in Cart = Boolean variable dictating if the contents of the cart displays when there are items in it.
  • Empty Cart Message = Boolean variable dictating if the empty cart message displays in the mini cart and cart
  • Checkout Total = number variable tracker for the total value of all the items in the cart, as well as any additions like delivery.
  • Checkout Button State = variable controlling the state of the checkout button during the checkout process
  • Checkout Shipping Fee = number variable dictating the shipping fee
  • Complete Purchase Button = variable controlling the state of the Complete Purchase button
  • Payment Method = string variable dictating the payment method for the checkout process

Shipping Options Group:

  • Free Shipping = controller variable dictating the state of the Free Shipping option radio button in Checkout
  • Local Pickup = controller variable dictating the state of the Local Pickup option radio button in Checkout
  • Flat Rate = controller variable dictating the state of the Flat Rate option radio button in Checkout
  • Shipping Options Checked = boolean variable indicating if a shipping option has been selected, this activates the Checkout Button if a payment option is selected.

Payment Options Group:

  • Direct Transfer = controller variable dictating the state of the Direct Transfer option radio button in Checkout
  • Card Payment = controller variable dictating the state of the Card Payment option radio button in Checkout
  • Cash On Delivery = controller variable dictating the state of the Cash On Delivery option radio button in Checkout
  • Direct Transfer Dropdown = controller variable dictating the state of the Direct Transfer option drop down in Checkout
  • Card Payment Dropdown = controller variable dictating the state of the Card Payment option drop down in Checkout
  • Cash On Delivery Dropdown = controller variable dictating the state of the Cash On Delivery option drop down in Checkout
  • Payment  Options Checked = boolean variable indicating if a payment option has been selected, this activates the Checkout button if a Shipping Option is selected

Variable Collections

  • Prototypes – Single Product = Variables used to control the state and display of components in the Single Product prototypes.
  • Product 1 – 4 Group: Variables controlling Products 1 – 4, using Modes (mode 1 is product 1, mode 2 product 2, etc)

Sub Groups

Drop-down Sub-Group:

  • Variant Option Default: Stores default text for the Single Product variant drop-down and determines the variant displayed in the gallery.
  • Variant Option 1, 2, 3: Stores text for the first, second, and third options in the drop-down.

Button Sub-Group:

  • Button Status: Controls the state of the “Add To Cart” button.

Cart Sub-Group:

  • Single Product Items: Tracks the quantity of an individual product in the product display.
  • Quantity (1–4, 5–8): Tracks the number of each product in the cart.
  • Item Price (1–4, 5–8): Tracks the price of each product in the cart.
  • Total Price (1–4, 5–8): Tracks the total value of each product type in the cart.
  • Visibility: Boolean variable controlling whether a product is visible in the cart.

Product 5–8 Group:

  • Uses modes (e.g., mode 1 for product 5, mode 2 for product 6, etc.) to control related variables.

Tweaked

  • Product Cards patterns for prototyping
  • Single product block prototype for better usability and for prototyping
  • Checkout page template to align with Woo 9.0, built checkout page prototype

Enhancement

  • Shopping prototype flow with page connections
  • Add/remove to cart prototype flow with variables
  • Checkout prototype flow with variables
  • Linked all pages in a prototype flow

Share:

Recent Posts