WebMasterService N3rds@Work

10. UpFront PSeCommerce und WooCommerce Integration

Wikis > UpFront Wiki > 10. UpFront PSeCommerce und WooCommerce Integration

Mit dem neuesten UpFront-Update haben wir eine häufig angeforderte neue Funktion, Unterstützung für WooCommerce und die virtuellen Seiten unsers eigenen PSeCommerce hinzugefügt. Jetzt kannst Du schöne Store-Seiten in Deinem bevorzugten UpFront-Starter-Theme erstellen.

10.1 Erste Schritte mit PSeCommerce, WooCommerce und UpFront

Der Einstieg in WooCommerce und UpFront ist sehr einfach.

  1. Stelle sicher, dass Du über die neuesten Versionen von UpFront, Dein bevorzugtes UpFront-Startertheme und das kostenlose WooCommerce-Plugin auf wp.org verfügst. Wenn Du ein WooCommerce Upfront-Design von Grund auf neu erstellen möchtest, musst Du auch das UpFront Kreator-Plugin installieren.
  2. Aktiviere sowohl das WooCommerce Plugin als auch Dein Starter-Theme.
  3. Erstelle Deine WooCommerce-Store-Seiten über Dein wp-admin-Dashboard.
  4. Zeige eine Vorschau Deiner Shop-Seiten an, die in Deinem UpFront-Theme glänzend aussehen.

Der Einstieg in PSeCommerce und UpFront ist ebenso einfach.

  1. Stelle sicher, dass Du über die neueste Version von Upfront, Dein bevorzugtes UpFront-Starter-Theme und/oder das UpFront Kreator-Plugin verfügst, wenn Du ein UpFront-Theme von Grund auf neu erstellen möchtest, sowie über die neueste Version von PSeCommerce.
  2. Aktiviere PSeCommerce und schließe den Setup-Assistenten ab, falls Du dies noch nicht getan hast. Füge Deinen Shop-Inhalt hinzu.
  3. Aktiviere das UpFront-Startertheme Deiner Wahl oder aktiviere den UpFront-Kreator mit einem neuen, leeren Theme.
  4. Zeige eine Vorschau Deiner PSeCommerce-Seiten an, die genauso glänzend aussehen wie die Woo-Seiten aus dem obigen Abschnitt.

 

10.2 Erstellen von UpFront Store-Seiten mit PSeCommerce oder WooCommerce

Die Arbeit mit Deinen WooCommerce- und PSeCommerce-Inhalten funktioniert wie immer. Du fügst Deine Produkte, Produktkategorien und Shopseiten aus Deinem WordPress-Administrationsbereich hinzu.

UpFront unterstützt alle Widgets von PSeCommerce und WooCommerce, sodass diese über den UpFront-Editor zu Deinen Seiten hinzugefügt werden können und Du weiterhin Styling-Entscheidungen auf Deinen Store-Seiten treffen kannst.

 

10.3 PSeCommerce- und WooCommerce Store-Seiten im UpFront-Editor

Da Dein Geschäftsinhalt nicht von UpFront verarbeitet wird, werden Platzhalter für Produkttext, Preis, Tags, Kategorien, Beschreibungen und Bilder angezeigt, wenn Du ein Geschäft oder eine Produktseite im UpFront-Editor anzeigst.

Du kannst weiterhin die Regionen und Hintergründe auf Deinen PSeCommerce- und WooCommerce-Seiten bearbeiten und auch UpFront-Elemente ziehen.

WooCommerce

upfront_woo_content_in_editor_shop_page
upfront_woo_content_in_editor_single_product

MarketPress

upfront_mp_editor_example

10.4 Vorschau von WooCommerce-Seiten in UpFront-Starter-Themes

Mache Dir anhand der folgenden Beispiele ein Bild davon, wie WooCommerce und UpFront zusammenarbeiten.

Shop Seite

upfront_parrot_woo_shop

Verwenden des Parrot-Starter-Theme.

Einfaches Produkt

upfront_lukesara_woo_simple_product

Verwendet Luke & Sara

Verkaufsprodukt

upfront_gillie_woo_sale_product

Verwendet Gillie

Produkt mit Variationen

upfront_spirit_woo_product_with_variations

Verwendet Spirit

Meine Kontoseite

upfront_fixer_woo_myaccount

Verwendet Fixer

Verwandte Produkte

upfront_issue_woo_related_products

Verwendet Issue

Warenkorb

upfront_panino_woo_cart

Verwendet Panino

Kasse

upfront_scribe_woo_checkout

Verwendet Scribe.

 

10.5 Vorschau von PSeCommerce-Seiten in UpFront-Starter-Themen

Produktseite

upfront_mp_product_page_issue

Verwendet Issue

Einfaches Produkt

upfront_mp_simple_product_lukesara

Verwendet Luke & Sara

Produkt mit Variationen

upfront_mp_multivari_scribe

Verwendet Scribe

Verkaufsprodukt

upfront_mp_sale_product_spirit

Verwendet Spirit

Bestellstatus

upfront_mp_order_status_gillie

Verwendet Gillie

Warenkorb

upfront_mp_cart_fixer

Verwendet Fixer

Kasse

upfront_mp_checkout_panino

Verwendet Panino

Wiki-Kategorie: Stichworte: