Help

A hotspot on a diagram is a reference to a product in your shop. Without a product it can show no name, no price and no add-to-cart button.

If your articles are already in WooCommerce, this step is done. If they come from your ERP, use WooCommerce’s own importer under Products → Import: it reads a CSV, creates what is missing and matches existing products by SKU.

Two things decide whether an article can be bought in your shop: it must be published, and it needs a price.

Under “Products with Drawings”, click “New diagram” and give it a name.

Choose the drawing: “Upload drawing”, or take it “From media library”. Uploaded here, a drawing keeps up to 8000 pixels — WordPress would otherwise shrink every upload to 2560, and the position numbers turn blurry when your customer zooms in.

Below 1600 pixels the editor warns you: zooming then only enlarges the grain. A vector drawing (SVG) is converted into an image of the width you choose.

Double-click the drawing where a position number is printed — a hotspot appears there. Drag it to move it; the arrow keys nudge it.

For each hotspot, assign the article: search by name or SKU. It can also be a single variant of a variable product. Then enter the quantity the machine needs.

Label and OEM number are optional. The OEM number is the manufacturer’s number your customer finds in their manual.

Under “Placement”, choose the product the diagram belongs to.

A product shows one diagram. If you attach a diagram to a product that already has one, Techparts asks before it replaces it — the other diagram is kept and stays in the list.

Press “Publish”. Only published diagrams appear in the shop — a draft stays invisible, on purpose, so you can work on it in peace.

Open the product page: next to the description there is a tab with the diagram. Clicking a dot has to show the article — with name, price and add-to-cart button.

If your theme shows no product tabs, or a page builder replaces the product page, place the diagram yourself — see “Where does the diagram appear?” below.

Under “Settings” you choose the initial view, where the parts list goes, whether pointing at a dot or clicking it opens the product card, the size and colours of the dots, and where the OEM number comes from.

When you are done, make a backup: “Backup” → “Download backup” writes all diagrams, hotspots and articles into one CSV file.

On the product page, as a tab next to the description. Nothing to set up: the tab appears for every product that has a published diagram.

Some themes do not render product tabs, block themes have templates of their own, and page builders such as Elementor Pro or Divi can replace the product page entirely. And sometimes you simply want a diagram on a landing page. For all of that, place it yourself.

In the block editor: add the block “Exploded-view diagram”. Pick a product and you get its diagram, the same as on the product page. Pick a single diagram instead if that is what you mean.

Everywhere else — classic editor, page builder, a widget — there is the shortcode. It has to go into a paragraph or a Shortcode block; a Code block shows it as text.

With nothing between the brackets it shows the diagram of the product the page is showing — what you want inside a page-builder product template. On any other page, say what you mean: a whole product by its slug or its SKU, or a single diagram by its own slug.

Use slugs and SKUs, not ids. Ids are renumbered when a backup is read into a different shop; slugs and SKUs survive that.

Everything sits under “Settings”: the initial view and whether your customers may switch views, where the parts list goes, whether pointing at a dot or clicking it opens the product card — separately for the view with and without the list —, zoom, and the size and colours of the dots.

The size of the dots can also be set per diagram, with “Hotspots” above the drawing in the editor. Useful when a drawing is labelled very tightly.

Exploded diagrams need no particular format, but they do need resolution — your customers zoom in. Take whatever the manufacturer provides; scaling a small file up gains nothing.

Product images are WooCommerce’s own and need no rule from us. In the parts list they appear as a small thumbnail.

You choose that under “Settings” → “Where the OEM number comes from”: the hotspot itself, the GTIN field of the product, its SKU, or a product field of your own whose key you enter.

If the chosen field is empty for a product, the number stored on the hotspot is shown instead — so nothing disappears just because one product lacks the field.

Open a diagram of the product and click “+” next to the sheet tabs above the drawing. A new sheet opens; give it its name right in the tab.

Click the open tab to rename it, drag a tab to change the order — the shop follows. “×” detaches a sheet from the product; the diagram itself stays in the list.

If you attach a diagram to a product that already has one, it becomes a further sheet behind the others.

Yes — for pack sizes and replacements, a seal singly and in a pack of ten. In the hotspot window, “+ Assign another article” lets you pick several at once. The first is the main article; “Move up” changes that. Each article has its own quantity.

In the shop, the parts list shows the main article with a button for the alternatives; the card on the drawing shows them all.

In the hotspot window, open “Video & link”. A video can be a YouTube or Vimeo address or a video file (MP4); it opens in a window above the drawing. A link starting with https:// opens in a new tab, one starting with / stays in the shop.

A hotspot with a video or a link but no article does not show “on request”. The shapes “Video point”, “Info point”, “Link point” and “Location” show a sign instead of the number.

For the whole shop under “Settings”, “Appearance (PRO)”, group “Hotspots” — there, too, the product card, fonts, highlight, position panel, fullscreen and sheet tabs.

For one diagram under “Appearance of this diagram” below the drawing, for one hotspot in its window. The more specific setting wins; empty means “like the level above”.

Both routes lead to the same diagrams, and you can use them side by side.

The parts catalogue is the route through a hierarchy. For vehicles, manufacturer → model → year → assembly is common; for machines, manufacturer → series → assembly. How deep the tree is and what the levels are called is up to you.

It pays off as soon as the same part appears in several models and your customer searches by their machine rather than by an item number. Ranges sold on their own are better off as single products.

Under “Parts catalogue”, “New top-level category” creates the first level — a manufacturer, for example. Each row then offers “Add subcategory” for the next level.

Give the categories a “Category image”: those are the tiles your customers click through.

In the form of the lowest category — the assembly — choose “Add a diagram”, pick the drawing and place the hotspots exactly as on a product.

A diagram that already exists — on a product or elsewhere in the catalogue — can be attached with “Assign diagrams” instead.

Under Settings → Parts catalogue → “Shown on” you choose where it lives: “Its own address (/catalog/)” or a page of yours. For page builders there is a shortcode next to it.

Then add that page or address to your menu. The Dashboard ticks this step as soon as one of your menus points at the catalogue.

Open the catalogue and click through to a diagram. Clicking a dot has to show the article — with name, price and add-to-cart button.

There is no publishing step: what you change is in the shop right away. While you are still working on a branch, set it to “Draft”.

Open the file under “PDF parser”, frame the diagram on the page and then its parts list. The parser reads the position numbers, matches the item numbers to your products and creates the assembly.

The parts list may span several pages — frame each part separately, they are merged. At the end choose where in the catalogue the assemblies go, level by level, and take them over.

Yes. Still frame the diagram and the parts list in the PDF — the frame says which section your image shows. Then load the prepared image alongside.

The hotspots then come from the text of the PDF and are read rather than recognised. All that matters is that image and frame show the same section; “Download this section” hands you exactly the sheet to work on.

XML is the way when your supplier ships a catalogue as a ZIP with diagrams — under “XML import” it creates items, tree and assemblies in one run.

“Download example ZIP” on that page gives you a small catalogue to try a full run before your real one.

With WooCommerce’s own importer under Products → Import. It maps the columns of your file once, creates missing products and matches existing ones by SKU. Techparts finds the products afterwards by their SKU.

Under “Backup”, “Parts catalogue — export (download)” saves a branch or the whole catalogue — with images as a ZIP that no longer needs the source shop.

“Parts catalogue — import” reads it into this or another shop, under a category you choose. Existing categories are used, never overwritten, and a second run creates nothing twice.

Yes — attach it with “Assign diagrams” in the category form. Then every place shows the same diagram, and a change to its hotspots applies everywhere at once. That is the advantage, and the thing to know.

Copy when the two will drift apart. Link when they should stay identical forever.

Copying is the usual case: the frame of model A resembles that of model B, but a few part numbers differ. “Copy diagram” on the row, then paste it on the target model or with “Paste at top level”. The copy has its own hotspots — changing them leaves the original untouched.

Tick the rows and choose the action: active, draft, move, copy or delete. Moving takes the branch below along; nothing is lost.

Copying copies the ticked categories themselves, not what hangs below them — each with an independent copy of its diagrams. A draft stays a draft.

Yes. On the results page of your shop’s search, a block “In the parts catalogue” shows the matching parts and categories, each with its path. It can be switched off under Settings → Parts catalogue (“Also show catalogue matches on the search results page of the site”).

If the search in your header lists products like blog posts — Elementor’s search form does that — use the shortcode

Short on space in the header?

No. “Replace articles” finds an article in every diagram — by product or by OEM number — and replaces it or adds the new one alongside. You can exclude single diagrams before you start.

Techparts PRO adds to every diagram: several sheets per product, several articles per hotspot, a video and a link on a hotspot, 32 hotspot shapes with colour and size per diagram and per hotspot, and 25 more appearance settings.

On top of that come the parts catalogue — including search across the whole catalogue —, diagrams on product category pages, and replacing articles on hotspots.

Techparts MAX adds the XML import, the PDF parser and backup & migration of the catalogue.

Nothing is deleted. Your diagrams on products keep working.

Paused are: the parts catalogue (its page in the shop shows “Page not found”, so best take it out of your menu), the catalogue search, the diagrams on product category pages, replacing items, the imports, and backup & migration.

In the shop the diagrams show round hotspots in the colour of the settings, only the main article of a hotspot, no video and link buttons, and the standard appearance. Further sheets stay visible. Everything you entered is kept.

As soon as a valid key is entered under “Licence”, everything is as it was.

Almost always the state: it is still a draft. Open it and press “Publish”. The second candidate is a product that was never saved — the list then says “Product not published”.

The third: your theme does not show product tabs. Then place the diagram with the block or the shortcode, see “Where does the diagram appear?”.

The product behind it is not published, has no price, or the hotspot has no article at all. The Dashboard counts “Hotspots without an article” and leads you straight to the diagrams concerned.

That happens when the drawing was swapped for one with a different crop. Hotspots are stored as percentages of the image; different margins shift every point, and differently across width and height.

The fix: use the same aspect ratio and the same crop as before.

Manufacturer diagrams are often scanned: every seemingly grey area is made of single dots, and they become visible when enlarged. It only gets sharper with a larger original or newly drawn artwork.

If the editor says WordPress scaled the drawing down, upload it again through the editor — there it keeps up to 8000 pixels.

Look at Tools → Site Health first. If the PHP memory is below 256 MB, that is the usual cause, and the error in the log will name whichever plugin asked for memory last — rarely the one at fault.

Your cache. Techparts adds its version to the stylesheet address so browsers fetch a new one, but a caching plugin that merges and minifies CSS drops that address — and then it keeps serving the old file. Clear the page cache and the CSS cache, then reload with Ctrl+F5.

The diagrams live in their own database tables, which a WordPress export does not carry. Use “Backup”: it writes one CSV with the diagrams, their hotspots and the articles behind them, matched by SKU. Read that file into the other shop — after its media library and its products are in place.

The CSV carries image addresses, not image files. The import matches them against the media library of the target shop and downloads nothing — copy the media library over first. Whatever cannot be matched is listed in the import report.