Figma - Add WooCommerce Brands template parts and templates

[ashleyshaw]

[Component Name] - Design Update for LSX Design System

Overview

Objective: Update the [Component Name] template to align with the latest WooCommerce features and integrate the WooCommerce Brands plugin for the Media24 shop.

Relevant References

• WooCommerce Brands Documentation
• WooCommerce Brands Product Page
• Design Inspiration:
  • Single Brand Landing Page
  • Single Brand Archive
  • Single Product Page Reference: Refer to the attached image for a visual guide.

Requirements

Design Specifications

• 1. Brand Landing Page Template:

  • Include: A-Z index of all brands using [product_brand_list] shortcode.
  • Brand Thumbnails: Display all brands using [product_brand_thumbnails] shortcode.
  • Responsive Design: Ensure the template is fully responsive for all devices.

• 2. Single Brand Page Template:

  • Brand Header: Integrate the brand's logo, name, and description.
  • Product Collection Block: Display brand products in a customizable grid.
  • Additional Information: Include a section for brand details and promotions.

• 3. Single Product Page (Branded):

  • Product Brand Icon: Utilize [product_brand] shortcode for displaying brand logos on the product page.
  • Co-branded Design: Align product details with the brand's visual identity.
  • CTAs: Style "Add to Cart" and "Buy Now" buttons to match the brand colours.

• 4. Header Template:

  • Icons: Update cart and account icons to align with WooCommerce theme changes.
  • Brand Elements: Integrate subtle brand visuals without compromising site functionality.

• 5. Mini Cart Template Part:

  • Design Update: Redesign the mini cart template to reflect the updated LSX design system.
  • Brand Visuals: Ensure that brand logos or icons appear in the mini cart for branded products.
  • Improved Usability: Enhance the mini cart layout for better accessibility and user experience.

• 6. Cart Block + Template:

  • Visual Consistency: Update the cart block to ensure it aligns with the overall design system, including brand colours and typography.
  • Brand Integration: Display brand logos next to product names in the cart to reinforce the brand's identity.
  • Distraction-Free Layout: Simplify the cart template to focus on the checkout process, making it user-friendly and clutter-free.

• 7. Checkout Page (Distraction-Free):

  • Minimal Design: Focus on a clean and user-friendly layout.
  • Brand Integration: Include brand-specific logos and subtle colours.

Technical Considerations

• Shortcodes Usage:
  • Use [product_brand_list], [product_brand_thumbnails], and [brand_products] for displaying brand data.
  • Embed shortcodes into template files using do_shortcode function for dynamic content.

Acceptance Criteria

• All components should be designed according to the specifications.
• The design system should be fully integrated with the updated LSX templates.
• Mini cart and cart templates are updated to reflect the latest design.
• Compatibility with the 2024 and 2025 WordPress themes must be ensured.
• Thorough testing for responsiveness and cross-device compatibility.
• Ensure the brand's identity is consistently reflected across all templates.

Deliverables

• Updated Figma designs for each component.
• GitHub issues for each design element with detailed descriptions and screenshots.
• A clear testing plan to ensure design consistency.

Additional Notes

• Coordinate with the development team to implement the design updates.
• Regularly update the GitHub issue status to track progress and address any challenges.

Attachments

• Single Product Page Reference
  -image)

Related Issues

• New Woo Branded Product Templates Development

Designs

Single Brand Landing page

Single Branded Product (Banner)

Single Branded Product (Icon)

Single Branded Product (Logo)

Brand Archive (Banner)

Brand Archive (Logo)

Brands Landing

Labels

• Design
• Figma
• WooCommerce
• Enhancement
• Cart
• Mini Cart