WP Manifestindependent plugin directory
manifest / ecommerce / design-cart-woo-timelines

Design Cart Woo Timelines

WooCommerce product timeline: a vertical axis, dated branches, and thumbnails. Built for unique, seasonal, handmade work. Shortcode, multiple instances. By Paweł Nosko / Design Cart.

by Paweł Nosko · github.com/designcart/design-cart-woo-timelines · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/designcart/design-cart-woo-timelines/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/designcart/design-cart-woo-timelines ↗

Design Cart Woo Timelines

A WooCommerce product timeline: a vertical axis, horizontal branches, a date at the outer end of each branch, and small product thumbnails underneath. Built for shops that sell unique, seasonal, or handmade work — paintings, restored furniture, sculpture, books, instruments — where the year or season is part of the product, not a filter you hide in a sidebar.

The first store this plugin was built for is Zimowa Galeria. Paintings are made in winter, year after year. A timeline shows the growth of the work and the artist’s hand. A customer who likes a piece from one year will often like its neighbours from the same season.

What you see on the front

On desktop the vertical line sits in the centre. Branches alternate left and right. The date sits at the far end of the horizontal line (the line always starts at the axis). Thumbnails sit below the line — small enough that about four fit in a row. The product name is under the photo. A click goes to the product page. The pin sits on the axis, not beside it.

On mobile the axis moves to the left. Every branch runs left to right. Dates sit at the right-hand end.

Date format is also the grouping rule:

  • Year (Y) — one branch per year. All 2025 pieces share one label.
  • Month (F Y, m.Y) — group by year and month.
  • Day (d.m.Y, j F Y, Y-m-d) — group by year, month, and day.

Order can be newest first or oldest first. Product source: a hand-picked list, a WooCommerce category, or items on sale. An empty date uses the product publish date. A custom date or a text label (“Winter 2024”) overrides the formatted date for that group.

Thumbnail ratios: 1:1, 3:2, 2:3, 4:3, 3:4, 16:9, 4:5, 5:4, or circle. Optional image border (colour and thickness). Hover zooms the photo inside a fixed frame so neighbours do not jump. Typography is per element: heading, date, product name (link + hover colour). Background, line, pin, thicknesses, and container width are per instance.

Requirements

  • WordPress 6.0+
  • PHP 7.4+
  • WooCommerce 8.0+

License: GPL-2.0-or-later.

Install

  1. Download the plugin from the project page or this repository.
  2. Upload the design-cart-woo-timelines folder to wp-content/plugins/.
  3. Activate it under Plugins. WooCommerce must already be active.
  4. Open Woo Timelines in the WordPress menu, add an instance, copy the shortcode.

Shortcode

[design_cart_woo_timelines id="1"]

Aliases: [design_cart_woo_timeline id="1"], [dcwt_timeline id="1"].

id is the instance number from the Woo Timelines list. You can place more than one timeline on a site; each instance has its own products and CSS variables.

Admin

The first screen is a list of instances. Each tile shows the name, product count, and shortcode. You can add, edit, duplicate, or delete an instance. Deleting an instance does not delete WooCommerce products.

General

Option What it does
Timeline name Label in the admin list. Also the front heading if that toggle is on.
Show timeline heading Renders the name as an h2 above the axis.
Source: Selected Only products from the Products tab, in list order, with your dates.
Source: Category Published products from one product category, limited.
Source: On sale Current sale products. Falls back to the saved list if the sale is empty.
Product category Used only when the source is Category.
Product limit Maximum items on the axis. Default 24.
Date format Branch label and grouping (year / year+month / year+month+day).
Order Newest first or oldest first.

Products

Option What it does
Search Live WooCommerce search. Click to add.
Load from source Fills the list from the General source. Keeps date and label for the same ID.
Date YYYY-MM-DD. Empty = product publish date.
Date label Custom group title, e.g. “Winter 2024”. Same label = same branch.
Drag handle / remove Order (Selected source) and remove from this instance only.

Appearance

Option What it does
Image format 1:1, 3:2, 2:3, 4:3, 3:4, 16:9, 4:5, 5:4, circle.
Background Background of the instance wrapper (#dcwt-{id}).
Line / node colour Vertical axis, horizontal rails, pin.
Container width Axis width in px or %, centred. Default 1100 px.
Line thicknesses / node size / thumb width Vertical 1–20 px, horizontal 1–20 px, pin 6–40 px, thumb 40–200 px.
Image border Optional. Colour and thickness (1–20 px). Follows circle crops.
Typography Heading, date, product name — font, size, unit, weight, uppercase, colour, alignment. Product name also has hover colour.

The admin UI is DC Interface (Design Cart): tabs, accordion, colour picker, dimension control. Same look as the other Design Cart modules.

Notes

  • Hidden / non-visible catalogue products are skipped.
  • Missing images use the WooCommerce placeholder.
  • HPOS compatibility is declared.
  • Uninstall removes dcwt_timelines and dcwt_timeline_next_id.

Documentation (PL): How to present products on a timeline in WooCommerce

Author: Paweł Nosko / Design Cart.