Wordpress woocommerce

Status
Niet open voor verdere reacties.
(script> in welk bestand onderaan
Hierboven is een discussie op gang gekomen over wel/niet programmeren en welk programma daarvoor geschikt is. De vragen die je hierboven stelt kan je alleen oplossen met minimale html (en css) kennis én een eenvoudige code editor (een makkelijk code editor is Notepad++ (klik) . Dit programma lijkt op Kladblok maar dan wat uitgebreider. Een handige functie in een code editor is "zoeken in bestanden" waarmee je kan zoeken naar </body> in de child theme. Boven dit woord voeg je het script in. Dan in je browser op Ctrl
+ F5 drukken en kijken of de teksten zijn omgewisseld.
 
Hierboven is een discussie op gang gekomen over wel/niet programmeren en welk programma daarvoor geschikt is. De vragen die je hierboven stelt kan je alleen oplossen met minimale html (en css) kennis én een eenvoudige code editor (een makkelijk code editor is Notepad++ (klik) . Dit programma lijkt op Kladblok maar dan wat uitgebreider. Een handige functie in een code editor is "zoeken in bestanden" waarmee je kan zoeken naar </body> in de child theme. Boven dit woord voeg je het script in. Dan in je browser op Ctrl
+ F5 drukken en kijken of de teksten zijn omgewisseld.

Ik heb Notepad++ nu, alleen een child thema is een map.
Hier heb ik functions.php en style.css met aangepaste css code. Hier heb ik geen </body> in.
 
Of zoek iets wat in de buurt ligt?

functions.php is ook geen template, om eerlijk te zeggen. Dus daar vind je geen body-element in.
Ook niet in CSS, omdat dit enkel de stijl documenteert.
 
Laatst bewerkt:
Kijk even op de sreenshot (klik) hoe je Javascript kan toevoegen.
Maak er (volgens het voorbeeld) een auto-start function expressie van, code is dan zo

Code:
(function () {
    // loop door alle product objecten
    var ProductSet = document.querySelectorAll(".products .product");
    for (var i = 0; i < ProductSet.lenght; i++) {
        // selecteer de objecten title en button
        var ProdTtl = ProductSet[i].querySelector('.woocommerce-loop-product__title');
        var ProdBtn = ProductSet[i].querySelector('.button');
        // de content van beide objecten omwisselen
        var TitleText = ProdTtl.innerHTML;
        ProdTtl.innerHTML = ProdBtn.innerHTML;
        ProdBtn.innerHTML = TitleText;
    }
})();
 
bij die code krijg ik deze errors uit de plugin

line 3 character 5
Missing 'use strict' statement.

var ProductSet = document.querySelectorAll(".products .product");

line 3 character 22
'document' was used before it was defined.

var ProductSet = document.querySelectorAll(".products .product");

line 4 character 10
Move 'var' declarations to the top of the function.

for (var i = 0; i < ProductSet.lenght; i++) {

line 4 character 10
Stopping. (30% scanned).

undefined
document
'anonymous' 1
unused
ProductSet
'anonymous' 1
 
Als je het eerste toevoegt?
 
Als je het eerste toevoegt?

als ik dit toevoeg, de code van bron

Code:
(function () {
    // loop door alle product objecten
    var ProductSet = document.querySelectorAll(".products .product");
    for (var i = 0; i < ProductSet.lenght; i++) {
        // selecteer de objecten title en button
        var ProdTtl = ProductSet[i].querySelector('.woocommerce-loop-product__title');
        var ProdBtn = ProductSet[i].querySelector('.button');
        // de content van beide objecten omwisselen
        var TitleText = ProdTtl.innerHTML;
        ProdTtl.innerHTML = ProdBtn.innerHTML;
        ProdBtn.innerHTML = TitleText;
    }
})();
 
Laatst bewerkt:
Tjeempie, het is erg stricte code. Ik heb hieronder de meeste meldingen verwerkt.
Code:
(function () {
    'use strict';
    var Doc, ProdSet, ProdCount, i, ProdTtl, ProdBtn, TitleText;
    // selecteer alle product objecten
    Doc = document;
    ProdSet = Doc.querySelectorAll(".products .product");
    ProdCount = Object.keys(ProdSet).length;
    // loop door alle product objecten
    for (i = 0; i < ProdCount; i++) {
        // selecteer de objecten title en button
        ProdTtl = ProdSet[i].querySelector('.woocommerce-loop-product__title');
        ProdBtn = ProdSet[i].querySelector('.button');
        // de content van beide objecten omwisselen
        TitleText = ProdTtl.innerHTML;
        ProdTtl.innerHTML = ProdBtn.innerHTML;
        ProdBtn.innerHTML = TitleText;
    }
})();

Update: code volledig aangepast, met name bij het tellen van het aantal product objecten.
Graag deze code gebruiken.
 
Laatst bewerkt:
Dan blijven deze foutmeldingen

line 4 character 11
'document' was used before it was defined.

Doc = document;

line 7 character 41
Unexpected '++'.

for (i = 0; i < ProductSet.lenght; i++) {

line 16 character 3
Move the invocation into the parens that contain the function.

})();

undefined
document
'anonymous' 1
 
Maar dan ben ik benieuwd waarom @Bron met JavaScript die boel wilt omdraaien?
 
@php4u De TS heeft geen kennis van programmeren en/of templates. Daarom probeer ik een simpele oplossing te geven die je met copy/paste erin kan plakken.
Wellicht zijn er oplossingen die makkelijker zijn voor de TS maar die heb ik (nog) niet gezien.

@AjaciedNick Zie berichtje #29. Wil je het bovenste en onderste stukje aanpassen:
Code:
(function () {
    'use strict';
    var Doc, ProdSet, ProdCount, i, ProdTtl, ProdBtn, TitleText;
    // selecteer alle product objecten
    Doc = window.document;
    ProdSet = Doc.querySelectorAll(".products .product");
    ProdCount = Object.keys(ProdSet).length;
    // loop door alle product objecten
    for (i = 0; i < ProdCount;) {
        // selecteer de objecten title en button


        ProdBtn.innerHTML = TitleText;
        i = i + 1;
    }
})(window, document);

Ik kan hier niet testen en moet het doen met de meldingen die je geeft.
 
Laatst bewerkt:
@php4u De TS heeft geen kennis van programmeren en/of templates. Daarom probeer ik een simpele oplossing te geven die je met copy/paste erin kan plakken.
Wellicht zijn er oplossingen die makkelijker zijn voor de TS maar die heb ik (nog) niet gezien.

@AjaciedNick Zie berichtje #29. Wil je het bovenste en onderste stukje aanpassen:
Code:
(function () {
    'use strict';
    var Doc, ProdSet, ProdCount, i, ProdTtl, ProdBtn, TitleText;
    // selecteer alle product objecten
    Doc = window.document;
    ProdSet = Doc.querySelectorAll(".products .product");
    ProdCount = Object.keys(ProdSet).length;
    // loop door alle product objecten
    for (i = 0; i < ProdCount;) {
        // selecteer de objecten title en button


        ProdBtn.innerHTML = TitleText;
        i = i + 1;
    }
})(window, document);

Ik kan hier niet testen en moet het doen met de meldingen die je geeft.

Ik krijg nu dit

Code:
line 5 character 11
'window' was used before it was defined.

    Doc = window.document;

line 9 character 31
Expected an identifier and instead saw ')'.

    for (i = 0; i < ProdCount;) {

line 9 character 31
Stopping. (56% scanned).

undefined
    window 
    'anonymous' 1
unused
    ProdTtl 
    'anonymous' 1
    , ProdBtn 
    'anonymous' 1
    , TitleText 
    'anonymous' 1
 
Ik kan me ook niet indenken dat de TS die knoppen niet kan vinden in de templates met een editor? ;)
Javascript kan, maar ik vind het niet echt een heel nette oplossing.

Maar als het een gratis template is, wil ik wel even zoeken daarin.
 
Ik kan me ook niet indenken dat de TS die knoppen niet kan vinden in de templates met een editor? ;)
Javascript kan, maar ik vind het niet echt een heel nette oplossing.

Maar als het een gratis template is, wil ik wel even zoeken daarin.

gratis template covernews. https://nl.wordpress.org/themes/covernews/

Heb childthema met aangepaste style.css en header.php maar die heb je niet nodig lijkt mij.
 
Maar je gebruikt toch WooCommerce? Die werkt toch met eigen templates?
Daar moet die HTML dan inzitten.
 
Het zit op één of andere manier in wc-template-functions.php ingebakken, heb ik het idee.
maar zulke dingen kan je ook prima aan de bouwer vragen als je er niet uitkomt? ;)
 
woocommerce past zich vaak aan bij je thema maar bestaat uit vaste elementen.

Om die te veranderen moet je er wel wat voor over hebben.
Wil je echt zaken veranderen zoals de standaard tekst, de kleur wellicht of andere zaken, dan zul je toch echt in de html moeten duiken.

Hier ook wat leesvoer : http://www.wcommerce.nl/category/layout-aanpassingen/

Met Elementor kan je layout veranderen: https://www.sijweb.nl/productpagina-woocommerce-aanpassen-elementor/

Of neem een ander template van Woocommerce, https://www.wplounge.nl/beste-woocommerce-templates-2020/

nog maar eens even mijn bericht quoten, al mag dat niet ;)
Maar hier kan je dus alles lezen over Woocommerce en hoe te veranderen.
 
nog maar eens even mijn bericht quoten, al mag dat niet ;)
Maar hier kan je dus alles lezen over Woocommerce en hoe te veranderen.
Toch best interessant ;)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan