Opgelost Woocommerce pagina winkel achtergrond wijzigen

[femke98]

www.123uniek.nl
Zoals jullie kunnen zien is de winkel pagina heel anders dan de rest. Is niet de bedoeling, maar krijg het niet voor elkaar dat de winkel pagina dezelfde achtergrond krijgt als de WordPress pagina's. En dan ook de winkelmand en afrekenpagina (hoewel ik dat nog niet weet).
Theme is Astra Pro i.c.m. Elementor (geen pro).

Ik las ergens dat je dit in Woocmmerce zelf moet regelen, maar hoe en waar? Child theme aanmaken voor WC (via ftp of DA) en daar de zaken in regelen.

Ik heb eerst in Elementor een nieuwe pagina aangemaakt, met de achtergrond die ik wil.
Daarna in de instellingen aangegeven dat die pagina de winkel moet zijn. Maar dan wijzigt de pagina zichzelf en is de achtergrond weer weg.

 

[femke98]

Update:
heb dit gevonden en het werkt:

/* background color for woocommerce pages */
.single-product .site,
.woocommerce-cart .site,
.woocommerce-account .site,
.woocommerce-page .site{
    background-color: #F7E2CD;
}

Uiteraard gaat het nu om de kleur, mij gaat het om een afbeelding.
Nu nog een code vinden die de afbeelding ipv de kleur kan aangeven.

Ik kom er wel, maar hulp is altijd welkom!!

Deze werkt niet:

/* background for woocommerce pages */
.single-product .site,
.woocommerce-cart .site,
.woocommerce-account .site,
.woocommerce-page .site
background-image: url(https://www.123uniek.nl/xxxx/xxxx/xxxx/xx/lucht-en-wolken-vorm.jpg);
}

 

[RogerS]

Er mist op zijn minst een { voor background-image. Verder zouden er single quotes (') om de url moeten

 

[femke98]

Ja hè, ik zie er ook maar eentje hahaha. Maar ik had hem overgenomen (zie de eerste code) en daarna de url erbij gezet. De eerste code heeft ook maar een {.
En die ( hoeven niet, het werkt ook zonder.

Nu is het wel oké, op het herhalen van de afbeelding. Nu nog hoe de grootte te verkrijgen.

Winkel

www.123uniek.nl

 

[RogerS]

Nee hoor. In je eerste code staat dat ding een regel hoger.

Als het maar 1 regel is dan hoeft het technisch gezien niet, maar dan moet je wel de afsluitende } ook weghalen. Een tekortkoming van HTML/CSS is dat foutafhandeling niet is gedefinieerd dus je weet nooit hoe verschillende browsers met dit soort code omgaan.

 

[femke98]

je hebt gelijk. Nu nog de afbeelding helemaal op de pagina laten komen. Heb het al geprobeerd met background-position: 100% 100%;
maar dat ging niet. Ik ga verder zoeken.

 

[femke98]

Update: het is gelukt!
wat bleek? De afbeelding werd telkens bij upload naar het dashboard, verkleind. Ik had de plug-in al gedeactiveerd, maar dat werkte niet. Toen zonet met frisse blik weer geprobeerd, en zie daar. Schijn ik 2 rezise plug-in te hebben, dus had ik de verkeerde uitgezet.
Eentje dus helemaal verwijderen, de afbeelding is nu niet verkleind en staat keurig op de winkelpagina.
Hier een blij mens.

Fijn weekend!