Ondersteuning » Plugin vragen » aanpassen Woocommerce code?

  • Opgelost stillewateren

    (@stillewateren)


    Ik heb in mn browser (Chrome) via ‘hulpprogramma’s voor ontwikkelaars’ een zin ‘verplaatst’. Maar waar doe ik dat in de code? Ik heb me suf gezocht maar kan het niet vinden.

    Het gaat om de zin ‘Misschien vind je deze ook leuk…’; deze staat nu rechts naast de foto van het product, maar ik wil deze eronder (boven de upsells).

    zie hier

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Hi,

    Een website is geen ‘gewoon document’ dingen verplaatsen gaat dus soms iets anders…

    1. Ga terug naar de betreffende tekst en voeg dit toe / verander:

      ‘<h2>Misschien vind je deze ook leuk…</h2>’ wordt:

      <div id= "misschien>
      <h2>Misschien vind je deze ook leuk…</h2>
      </div>

      Hiermee wordt dit een herkenbaar element in je opmaak.

    2. — — —

    3. Open nu het bestand ‘style.css’ van je [child-]theme
    4. voeg toe: [voorbeeld!!]
      div#misschien {
          position:  absolute;
          display: block;
          text-align: left !important;
          top: 350px;
          z-index: 99999999999999999999999;
           margin:5px !important;
      }

      Door bovenstaande waarden aan te passen, verplaats je eea naar de gewenste plek op je pagina.
      NB! helaas gewoon een kwestie van proberen, aanpassen en weer proberen…

      Loop je vast? vraag gerust.

    Guido

    (@guido07111975)

    Hoi,

    Ik kom dit probleem vaker tegen in Woocommerce en los het altijd op met custom CSS:

    .upsells h2 {clear:both !important;}

    Dit kun je toevoegen in het stylesheet van je child thema of middels een custom style plugin.

    Guido

    Thread starter stillewateren

    (@stillewateren)

    @w.P. Ginfo: Ik begrijp dat een website geen ‘gewoon’ document is, mijn vraag is in welk document ik dit moet aanpassen. ‘ga terug naar de betreffende tekst’ werkt dus ook niet, aangezien dit uit een thema komt en niet zo simpel aan te passen is. Ik heb de website gebouwd met het thema Just Clean shop Pro en Woocommerce.

    @ Guido: zou ik deze tekst dan ook niet ergens tegen moeten komen, bijvoorbeeld in de CSS? En wat doet de code die je hierboven hebt geplaatst?

    Guido

    (@guido07111975)

    En wat doet de code die je hierboven hebt geplaatst?

    Dit zorgt ervoor dat zowel links als rechts van de heading niets komt te staan. Hij plaatst de h2 titel dan direct boven de andere producten op die pagina (dus waar hij hoort te staan).

    Guido

    Hi,

    == == == wat te doen

    1. Log in
    2. dashboard > weergave > editor

    3. je ziet nu

    • li:de dashboard-items
    • mid:een editor-veld met code
    • re: een sidebar emt bestandsnamen
    • re: in de sidebar… scroll naar het kopje ‘STYLES’
    • SELECTEER het bestand ‘style.css’

    • je ziet nu [bijvoorbeeld]

      /*
       * Theme Name: Just Clean Shop
       * Theme URI: http://justpx.com/product/just-clean-shop-free/
       * Version: 1.7.8
       * Author: JustPX
       * Author URI: http://justpx.com/
       * Description: Just Clean Shop – is a great solution for small and medium businesses or eCommerce. Theme comes with the support of WooCommerce Plugin, Jetpack (logo and favicon), Contact Form 7 Easy Google Fonts, bbPress, BuddyPress and Subscribe2. Template suitable for any kind of Shop. Translation ready. Localization Ready: Albanian (Shqip), Arabic (العربية), Azerbaijani (Azərbaycan dili), Basque (Euskara), Bengali (বাংলা), Bosnian (Bosanski), Bulgarian (Български), Catalan (Català), Chinese (China) (简体中文), Chinese (Taiwan) (繁體中文), Croatian (Hrvatski), Czech (Čeština‎), Danish (Dansk), Dutch (Nederlands), English, Estonian (Eesti), Finnish (Suomi), French, Galician (Galego), German (Deutsch), Greek (Ελληνικά), Hazaragi (هزاره گی), Hebrew (עִבְרִית), Hungarian (Magyar), Icelandic (Íslenska), Indonesian (Bahasa Indonesia), Italian (Italiano), Japanese (日本語), Korean (한국어), Latvian (Latviešu valoda), Lithuanian (Lietuvių kalba), Macedonian (Македонски јазик), Myanmar, Norwegian (Bokmål) (Norsk bokmål), Norwegian (Nynorsk) (Norsk nynorsk), Occitan (Occitan), Pashto (پښتو), Persian (فارسی), Polish (Polski), Portuguese (Brazil) (Português do Brasil), Portuguese (Portugal) (Português), Romanian (Romana), Russian (Русский), Scottish Gaelic (Gàidhlig), Serbian (Српски језик), Slovak (Slovenčina), Slovenian (Slovenščina), Spanish (Spain) (Español),Spanish (Mexico) (Español de México), Spanish (Peru) (Español de Perú), Swedish (Svenska), German (Switzerland) Deutsch (Schweiz), Tagalog (Tagalog), Thai (ไทย), Turkish (Türkçe), Uighur (Uyƣurqə), Ukrainian (Українська), Uzbek, Vietnamese (Tiếng Việt), Welsh (Cymraeg). Demo and Documentation http://justpx.com/product/just-clean-shop-free/
       * Just Clean Shop WordPress Theme, Copyright 2015 JustPX
       * Just Clean Shop is distributed under the terms of the GNU GPL
       * Tags: white, translation-ready, gray, light
       * Text Domain: just-clean-shop
       * License: GNU General Public License v3.0
       * License URI: http://www.gnu.org/copyleft/gpl.html
      */
      
      @charset "utf-8";
      
      *{
    • mid:klik in het editor-venster
    • == == == BELANGRIJK!! maak een reserve kopie van ‘style.css’

    • mid: klik in het editorvak
    • Klik <CTRL-A>, dan <CTRL-C>
    • open in windows een [code]-editor / wordpad
    • klik in [code]-editor / wordpad > plak <CTRL-V> de code van style.css en sla het reserve-bestand veilig op ergens op je PC
    • == == ===

    • !!!scroll helemaal naar onderen!!!
    • plak de code van @guido:
      /*toevoegingen*/
      .upsells h2 {clear:both !important;}
    • klik 'bestand bijwerken' >>sla alle wijzigingen op!!
    • ververs je browser <CTRL-F5> en bekijk het resultaat
    • == == == == == == == == == == == == == == == == == == == == ==
      == == == == == == == == == == == == == == == == == == == == ==
      == == == toelichting / antwoorden op vragen
      == == == == == == == == == == == == == == == == == == == == ==
      == == == == == == == == == == == == == == == == == == == == ==

      Ik heb in mn browser (Chrome) via 'hulpprogramma's voor ontwikkelaars' een zin 'verplaatst'.

      Uit bovenstaande begrijp ik [wellicht verkeerd?] dat je eea al eens eerder had aangepast... Mocht dat kloppen, plaats dan de '<div>' er omheen en maak / wijzig de CSS voor het element 'misschien'.

      Heb ik je verkeerd begrepen? Vraag gerust / licht toe en we kijken verder...

      -- -- --

      zou ik deze tekst dan ook niet ergens tegen moeten komen, bijvoorbeeld in de CSS?

      > NEE: deze code maakt dat de opdracht voor deze kop, NIET op basis van eerdere opmaak wordt uitgevoerd, maar begint 'met een schone lei' [=clear].
      Ik heb deze suggestie van @guido getest op jouw site, en hij werkt als een dolle ;-D

      .upsells h2 {clear:both !important;}

      CSS 'gaat alleen over'
      A: de opmaak van alle elementen van je site,
      B: niet over de inhoud, zoals een zin / tekst'Misschien vind je deze ook leuk…'

      Hierbij moet je denken aan bijvoorbeeld:

    • OPMAAK: kleur en tekststijl [vet/schuin...]van teksten, achtergrond etc
    • POSITIE: waar staan de verschillende elementen op de web-pagina:
    • header, footer, content, sidebar, upsells, zelfgedefinieerde divs etc...

    -- -- --
    De tekst zelf: 'Misschien vind je deze ook leuk…' wordt hier gebruikt als een kop of label voor een volgend element op je site. Dit element /kop of label kan je dus mbv CSS op zijn plaats manoeuvreren. De tekst / kop of label zelf staat 'ergens' wrsch in een php-bestand....

    Thread starter stillewateren

    (@stillewateren)

    Guido, jouw code voor in de CSS werkte, dankjewel!

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘aanpassen Woocommerce code?’ is gesloten voor nieuwe reacties.