Uitlijnen producten woocommerce productpagina

  • Eddy Brock

    (@eddy-brock)


    10 jaren, 2 maanden geleden

    Hallo,

    Ik ben bezig met het bouwen van een webshop met woocommerce. Dit doe ik met een theme die ik zelf compatible heb gemaakt om te functioneren met woocommerce. Alleen valt het mij op dat wanneer ik de productpagina bekijk op een 7 inch tablet de producten niet naast elkaar uitgelijnd worden. Het eerste product is links zichtbaar, het tweede er schuinrechts onder. Wanneer ik de css bekijk dan zie ik dat woocommerce voor desktop weergave gebruikmaakt van de woocommerce.css en voor kleinere schermen terugvalt op de woocommerce-smallscreen.css. Voor desktop schermen ziet de code er als volgt uit:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    float: left;
    margin: 0 3.8% 2.992em 0;
    padding: 0;
    position: relative;
    width: 22.05%;
}

    en voor kleinere schermen zo:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce-page[class*="columns-"] ul.products li.product, .woocommerce[class*="columns-"] ul.products li.product {
    width: 48%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;
}

    Ik heb geprobeerd om de width voor kleinere schermen aan te passen in de style.css van het theme dat ik gebruik door de code te kopiëren en deze te plakken en aan te passen naar wens, maar dan wordt deze stijling ook gebruikt voor desktopweergave.

    Iets dat ik ook heb geprobeerd is om deze code te verwerken in de siteorigin css plugin, zodat de code inline geforceerd wordt weergegeven, maar met hetzelfde resultaat (dus dat de code ook gebruikt wordt voor desktop schermen).

    Wat ik wil bereiken is dat de weergave voor reguliere schermen blijft zoals het is, maar dat deze voor kleinere schermen wordt aangepast, zodat de producten horizontaal (per twee) worden uitgelijnd. Hoe krijg ik dit voor elkaar. Mijn kennis in css is beperkt tot css2.

    Om een indicatie te geven in wat ik bedoel is hier de link van de pagina van de website:
    statementkettingen.nl/winkel/

    En de tweede vraag die ik heb is hoe ik de kleur van de tekst op winkelmandknoppen (en de overige woocommerce knoppen) aan kan passen wanneer ik er met de muis overheen ga (hover). Ik heb geprobeerd om deze regel met code aan te passen:

    .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover
{color:whitesmoke;}

    maar daar bereik ik niets mee.

    Alvast bedankt voor jullie hulp.

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Thread starter Eddy Brock

    (@eddy-brock)

    10 jaren, 2 maanden geleden

    Oké ik heb het eerste probleem zelf opgelost door de padding aan te passen. Blijft alleen de tweede vraag nog staan. Hoe verander ik de kleuren van de tekst in de knoppen van woocommerce bij een hover effect?

    Guido

    (@guido07111975)

    10 jaren, 2 maanden geleden

    Hoi,

    Ik gebruik altijd deze code (voorbeeld) om ALLE Woocommerce buttons te stylen:

    a.button, button.button, input.button, #review_form #submit {background:#FF007B !important; color:whitesmoke !important;}
a.button:hover, button.button:hover, input.button:hover, #review_form #submit:hover {background:#0093ff !important; color:whitesmoke !important;}

    Om toch even op je eerste vraag terug te komen, gebruik voor de li elementen géén margin of padding rechts/links in pixels maar in procenten. En geen border rechts/links voor li element want dat is ook alleen in pixels mogelijk. Je kunt ook Woocommerce de opdracht geven om 4 op 1 rij te tonen, dan hoef je zelf ook niet al te veel met CSS te doen:

    // Woocommerce 4 producten per rij
if (!function_exists('loop_columns')) {
	function loop_columns() {
		return 4;
	}
}

    Voor de bron klik hier.

    Guido

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)

Het onderwerp ‘Uitlijnen producten woocommerce productpagina’ is gesloten voor nieuwe reacties.