Release Notes: LSX Design 1.3.1

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 Figma Community as a free download.

Changelog

We’re excited to announce the LSX Design System and Theme 1.3.1 updates! 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 Collection: 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)
    • Drop-down Sub-Group:
      • Variant Option Default = string variable containing the default text of the Single Product variant drop-down, as well as the which variant displays in the gallery
      • Variant Option 1 = string variable containing the text of the Single Product variant first option
      • Variant Option 2 = string variable containing the text of the Single Product variant second option
      • Variant Option 3 = string variable containing the text of the Single Product variant third option
    • Button Sub-Group:
      • Button Status = controller variable dictating the state of the Add To Cart button
      • Cart Sub-Group:
      • Single Product Items = number variable tracking the quantity of the individual product in the Single Product quantity display
      • Quantity 1 – 4 = number variable tracking the number of the individual product in the cart 
      • Item Price 1 – 4 = number variable tracking the price of the individual product
      • Total Price 1 – 4 = number variable tracking the total value of all instances of the individual product in the cart
      • Visibility = boolean variable dictating the visibility of the product in the cart
      • Product 5 – 8 Group: = Variables controlling Products 5 – 8, using Modes (mode 1 is product 5, mode 2 product 6, etc)
    • Drop-down Sub-Group:
      • Variant Option Default = string variable containing the default text of the Single Product variant drop-down, as well as the which variant displays in the gallery
      • Variant Option 1 = string variable containing the text of the Single Product variant first option
      • Variant Option 2 = string variable containing the text of the Single Product variant second option
      • Variant Option 3 = string variable containing the text of the Single Product variant third option
      • Button Sub-Group:
      • Button Status = controller variable dictating the state of the Add To Cart button
    • Cart Sub-Group:
      • Single Product Items = number variable tracking the quantity of the individual product in the Single Product quantity display
      • Quantity 5 – 8 = number variable tracking the number of the individual product in the cart 
      • Item Price 5 – 8 = number variable tracking the price of the individual product
      • Total Price 5 – 8 = number variable tracking the total value of all instances of the individual product in the cart
      • Visibility = boolean variable dictating the visibility of the product in the cart

### 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