Ondersteuning » Algemeen WordPress » HTML/CSS Website overzetten, beste manier (webshop)

HTML/CSS Website overzetten, beste manier (webshop)

  • Dagaloni

    (@dagaloni)


    9 jaren, 11 maanden geleden

    Hallo,

    Momenteel heb ik een webshop die deels op wordpress (+ Woocommerce) draait (Crossvitamins). Ik zou de website willen overzetten zodat de website geheel op wordpress draait. Ik koos voor deels HTML, deels wordpress omdat ik veel meer ervaring heb met HTML dan met wordpress. In HTML kon ik dus (veel) sneller en beter de pagina maken die ik wilde dan in wordpress. Maar ik loop nu tegen het probleem aan dat het veel moeilijker is te onderhouden en dat ik twee productpagina’s heb per product: 1) de HTML productpagina waar alle informatie mooi weergegeven is + een bestel knop die verwijst naar de 2e productpagina; en 2) de Woocommerce productpagina waar je het product daadwerkelijk kunt bestellen.

    Die twee productpagina’s wil ik nu dus combineren. Het liefst wil ik het uiterlijk van de HTML productpagina met de bestelfunctionaliteit van Woocommerce in blok 1 en 6 (zie afbeelding). Probleem is: hoe ga ik dat doen?
    Ik heb dit artikel gelezen en dat heeft me aardig op weg geholpen. Maar ik heb nog steeds een paar vragen.

    Momenteel is dit mijn productpagina in HTML. Ik heb bedacht dat ik blok 1, 2 en 6 in een template zou verwerken en blog 3-5 in het text-veld binnen wordpress zou maken. Blok 1, 2 en 6 hoeven relatief heel weinig aangepast te worden. Ik denk dat ik blok 3-5 vaker wil/ga aanpassen. Dus voor elk product een apart template maken waar in blok 1, 2 en 6 verwerk.

    De homepagina en de pagina ‘waarom uniek’ wil ik op dezelfde manier maken. Alleen de contact pagina zou volledig ‘binnen’ wordpress gebouwd kunnen worden.

    Ik heb geen idee of dit een goed plan of juist niet. Daarom wil ik jullie vragen: is dit een goed plan of totaal niet?

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • W.P. Ginfo

    (@wp-ginfo)

    9 jaren, 11 maanden geleden

    Suggesties:

    • kijk eerst eens naar bestaande templates en / of plugins voor woocommerce die een vergelijkbare ‘lo0ok en feel’ opleveren. Dat levert wrsch minder werk op dan iets bestaands overzetten / aanpassen
    • Ga voor één, hooguit twee verschillende opmaken voor je productpagina’s
    • Gebruik de div's uit de HTML-site en plaats ze in de php-pagina’s
    • Plaats de bijbehorende css in een apart css-file
    • test en pas aan [afmetingen van pagina’s etc. komt vast nog niet helemaal overeen;) ]
    • pas als de ‘look and feel’ naar de zin is, maak nieuwe producten aan en knip en plak de beschrijvingen etc. uit de oude site in de nieuwe
    • test met klein aantal voordat je de grote bulk gaat aanpassen 😉
    • besluit je tot de overstap, ga dan volledig over!!
      [‘een beetje zwanger bestaat niet…’]

    Veel plezier met de verbouwing!! Het wordt vast heel mooi.

    Thread starter Dagaloni

    (@dagaloni)

    9 jaren, 11 maanden geleden

    Ontzettend bedankt voor de suggestie! Ik ben aan de slag gegaan en na flink wat uitproberen en uitzoeken hoe het werkt begint het er redelijk uit te zien! Echt gaaf 🙂

    W.P. Ginfo

    (@wp-ginfo)

    9 jaren, 11 maanden geleden

    Graag gedaan.
    Laat maar horen als je een zetje nodig hebt / vastloopt oid.

    Thread starter Dagaloni

    (@dagaloni)

    9 jaren, 11 maanden geleden

    Ik loop nu een klein beetje vast. De productpagina moet eruit komen te zien zoals in de afbeelding (zie eerste post). Blok 2-6 is voor elk product anders. Blok 3-6 is makkelijk te lossen door HTML te schrijven in de WordPress omgeving (in het text-veld).

    Hoe ik Blok 2 ga maken vind ik lastig. In blok twee wil ik namelijk de bestel functionaliteit van Woocommerce in verwerken (prijs + aantal selector + bestelknop). Dat kan, maar pas ik een template aan en ziet het er op elke product pagina hetzelfde uit. Nu wil ik voor elke productpagina een andere foto. Hoe doe ik dat?

    Zelf zat ik te denken om een if-statement te gebruiken in combinatie met de productnaam. Is er een betere manier?

    W.P. Ginfo

    (@wp-ginfo)

    9 jaren, 11 maanden geleden

    Je kunt hiervoor ook een plugin gebruiken dat je in staat stelt voor elke [product-]pagina een afbeelding in te stellen.
    bijvoorbeeld:

    • WP Display Header
    • WooCommerce Products Quick View
    • eCommerce Product Catalog by impleCode
    • etc.

      • De plaats, grootte en andere elementen op deze pagina’s / templates, kan je aanpassen naar wens.

    Type maar een de zoekterm ‘product image’ in, in de ‘nieuwe plugin’ pagina. Er zijn mogelijkheden te over.

    == == ==

    Alternatief:

    <!-- toevoeging variabele afbeelding -->
<img src='<?php echo get_post_meta($post->ID, 'productbanner', true); ?>' />
<!-- EINDE toevoeging variabele afbeelding -->

    Plaats code in het betreffende php-bestand op de gewenste plaats.
    In de dashboard-edit-pagina verschijnt een extra veld-optie
    voeg veld toe: productbanner
    waarde: pad naar afbeelding [Zorg dat het pad KLOPT!]

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘HTML/CSS Website overzetten, beste manier (webshop)’ is gesloten voor nieuwe reacties.

Onderwerptags

Weergaven